Шпаргалка по React

  • 24 июня, 21:01
  • 3880
  • 0

Если вы не используете React все время, то для выполнения мелких задач, которые нужно сделать на React, часто приходится просматривать множество документации.

Ниже представим примеры кода, который чаще всего встречается в проектах. Сохраните себе в закладках и используйте при потребности))

Памятка по React

Создать приложение React

// Create a new app
npx create-react-app my-app-name
// Run the created app
cd my-app-name
yarn start
// http://localhost:3000

Функциональный компонент First React

  1. Нет необходимости импортировать React из React (начиная с React 17)
  2. Первая буква должна быть заглавной
  3. Должен вернуть JSX

(src / App.js)

// React component
function App(){return <h1>Hello World</h1>
} 

export default App;


Как этот компонент отображается в браузере? Главный файл проекта - src / index.js, и в этом файле есть инструкция для рендеринга компонента.

ReactDOM.render(<App />, document.getElementById('root'))


Затем компонент приложения будет отображаться внутри public / index.html 'root' div.

Компонент импорта

Компонент будет создан в отдельных файлах. Каждый компонент необходимо экспортировать, а затем импортировать.

function Greeting(){    return <h1>Hello World</h2>
}
export default Greeting


Затем этот компонент можно импортировать

import Greeting from './Gretting'

function App(){  return <Greeting />
}


или имя экспорт 

export function Greeting(){   return <h1>Hello World</h2>
}


Затем этот компонент можно импортировать

import {Greeting} from './Gretting'


WELL Соглашение об именах

return (
<div className="app"> <h1 className="app_title">Welcome to my application: {appTitle}</h1>  <div className="product">    <h1 className="product__name--large">Product name: {product.name}</h1>
<h1 className="product__name--small">Nick name: {product.nickName}</h1>   <p className="product__description">Product description: {product.description}  </div>
<div>
)


Правила JSX

Вернуть один элемент (только один родительский элемент)

// not valid
return <h1>Hello world</h1><h2>Hi!</h2>

// valid with fragment. 
return (    <>        <h1>Hello World</h1>        <h2>Hi!</h2>    </>
)
// Noted the parenthesis for multi-line formatting


Используйте className вместо class
Также все имена атрибутов должны быть camelCase

// not valid
return (    <div class="title">        Hello World    </div>
)

// valid
return (    <div className="title">    </div>
)


Закройте каждый элемент

return (    <img src="http:example.com/image.jpg" />    <input type="text" name="first_name" />
)


Вложенные компоненты

// Arrow function shorthand component
const Person = () => <h1>Mike Taylor</h1>

// Arrow function component
const Message = () => {    return <h1>Hello</h1>
}

// Function component
function HelloWorld(){  return (      <>          <Message />          <Person />      </>  )
} 


Компонент CSS

(src / App.css)

h1 {    color: red;
}


(src / App.js)
Импортируйте файл CSS

import './App.css'

function App(){  return <h1>Hello World</h1>
} 


Встроенный CSS

function App(){  return <h1 style={{ color: 'red' }}>Hello World</h1>
} 


Javascript в JSX

  1. Приложить между {}
  2. Должно быть выражением (вернуть значение)
function App(){    const name = 'Mike'   return (      <>          <h1>Hello {name}</h1>          <p>{name === 'Mike' ? '(admin)': '(user)'}</p>      </>    )
} 


Свойства компонента (реквизиты)

function App()    return <Person name='Mike' age={29} />
} 

const Person = (props) => {    return <h1>Name: {props.name}, Age: {props.age}</h1>
}

// or props object deconstructing
const Person = ({name, age}) => {    return <h1>Name: {name} Age: {age}</h1>
}


Детский реквизит (слот)

function App()    return (        <Person name='Mike' age={29}>            Hi, this is a welcome message        </Person>    )
} 

const Person = (props) => {    return (        <h1>Name: {props.name}, Age: {props.age}</h1>        <p>{props.children}</p>    )
}

// or props object deconstructing
const Person = ({name, age, children}) => {    return (        <h1>Name: {name} Age: {age}</h1>        <p>{children}</p>    )
}


Значение свойства по умолчанию

const Person = ({name, age, children}) => {    return (        <h1>Name: {name} Age: {age}</h1>        <p>{children}</p>    )
}

Person.defaultProps = {    name: 'No name',    age: 0,
}


Список

const people = [  {id: 1, name: 'Mike', age: 29},  {id: 2, name: 'Peter', age: 24},  {id: 3, name: 'John', age: 39},
]
function App(){    return (        people.map(person => {            return <Person name={person.name} age={person.age}/>        })    )
} 

const Person = (props) => {  return (      <h1>Name: {props.name}, Age: {props.age}</h1>  )
}


Список с ключом (для внутренней ссылки React)

function App(){    return (        people.map(person => {            return <Person key={person.id} name={person.name} age={person.age}/>        })     )
} 


Деструктуризация объекта реквизита

function App(){  return people.map(person => <Person key={person.id} {...person} />)
}

const Person = ({name, age}) => {  return (      <h1>Name: {name}, Age: {age}</h1>  )
} 


Нажмите Событие

const clickHandler = () => alert('Hello World')
function App(){    return (        <>            <h1>Welcome to my app</h1>            <button onClick={clickHandler}>Say Hi</button>        </>     )
} 


или встроенный ...

function App(){    return (        <>           <h1>Welcome to my app</h1>            <button onClick={ () => alert('Hello World') }>Say Hi</button>        </>     )
} 


Для передачи аргументов нам нужно использовать стрелочную функцию

const clickHandler = (message) => alert(message)
function App(){    return (        <>            <h1>Welcome to my app</h1>            <button onClick={() => clickHandler('Hello World')}>Say Hi</button>        </>     )
} 


e для аргументов события

const clickHandler = (e) => console.log(e.target)
function App(){    return (        <>            <h1>Welcome to my app</h1>            <button onClick={clickHandler}>Say Hi</button>        </>     )
} 


Передать событие от дочернего к родительскому

function Todo({item, onDelete}) {    return (      <div>        {item}        <button onClick={() => onDelete(item)}       </div>    )
}

function Todos() {  const handleDelete = (todo) => {    const newTodos = todos.filter(item => item !== todo)    setTodos(() => newTodos)  }
  return (    {todos.map(todo => (       <Todo item={todo} onDelete={handleDelete}/>    }  )
}


useState Hook

Цель useState - обрабатывать реактивные данные. Любые данные, которые изменяются в приложении, называются состоянием. И когда состояние изменяется, вы хотите отреагировать на обновление пользовательского интерфейса.

  1. Хук всегда начинается с префикса use
  2. Должен вызываться только в компоненте / функции React
  3. Должен быть вызван на верхнем уровне функционального компонента
  4. Декларацию нельзя назвать условно
  5. useState возвращает массив из 2: [значение состояния, функция задания состояния]
import React, {useState} from 'react';

const DisplayTitle = () => {  const [title, setTitle] = useState('This is the Title')  const handleClick = () => setTitle('New Title')  return <>    <h2>{title}</h2>
    <button type="button" className="btn" onClick={handleClick}>      Change Title    </button>
  </>
};

export default DisplayTitle;


useState с объектом

const DisplayTitle = () => {  const [person, setPerson] = useState({name: 'Mike', age: 29})  const handleClick = () => setPerson({...person, age: 35})  return <>    <h2>{title}</h2>   <button type="button" className="btn" onClick={handleClick}>      Change Age    </button>  </>
};


Функциональная форма setState

function Counter() {  const [count, setCount] = useState(0)  // Use a function to set State  const increase = () => setCount(() => count + 1)  return (    <>      <h1>Counter</h1>      <p>{count}</p>      <button onClick={increase} className='btn'> + </button>      <button onClick={() => setCount(() => count - 1)} className='btn'> - </button>    </>  )
}


useEffect

В React вы можете захотеть выполнить код после событий жизненного цикла или побочных эффектов.

По умолчанию функция useEffect выполняется после каждого повторного рендеринга. Затем вы можете выполнять код каждый раз при обновлении компонентов.

import React, { useEffect } from 'react';

function IncreaseValue() {    const [value, setValue] = useState(0)    useEffect(() => {        document.title = `New value: ${value}`     })   return <button onClick={() => setValue(value + 1)}>Increase</button>
}


Условное использование

Условная потребность должна быть помещена в функцию useEffect

useEffect(() => {    if (value > 0) {        document.title = `New value: ${value}`     }
})


Список зависимостей useEffect

Если вы хотите выполнять код только при первом рендеринге или только при изменении определенного состояния, можете использовать функцию useEffect и отправить массив зависимостей в качестве параметра.

useEffect будет работать, только если состояние находится в списке зависимостей.
Если список пуст [], useEffect будет запущен только при первоначальном рендеринге.

useEffect(() => {    document.title = `New value: ${value}` }, [])
// Noted the empty array. useEffect will then only run once on initial render

useEffect(() => {    document.title = `New value: ${value}` }, [value])
// Will run each time 'value' state change.


Функция очистки useEffect

Если вы хотите выполнять код каждый раз при отключении компонента, чтобы выполнить код только тогда, когда компонент отключен / удален, вам необходимо добавить оператор return к вашей функции useEffect.

useEffect(() =>  {     const timer = window.setInterval(() => {         setCount(count => count + 1)    }, 1000)    return () => clearInterval(timer)
}, [])


Код clearInterval (timer) будет выполняться только до того, как компонент будет удален из пользовательского интерфейса (отключен)

Условный рендеринг

function DisplayGreeting() {    const [name, setName] = useState('Mike')    if (name === 'Mike') {        return <h1>Hello admin {name}</h1>     }    return <h1>Hello user {name}</h1> }


Встроенный If-Else

  return (    <div>      The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.    </div>  );
}


Встроенный логический оператор &&.
Отображать только в том случае, если первое выражение истинно
истинно = Not: 0, "", null, undefined и NaN

  function DisplayUserInfo({active}) {    return (      <div>        { active && <h1>User is active</h1>}      </div>    );
}


Множественный встроенный If

<span className={count === 0 && 'text-gray-500' || count > 0 && 'text-green-500' || count < 0 && 'text-red-500'}>{count}</span>


Форма

const UserForm = () => {  const [userName, setUserName] = useState('')  const handleSubmit = (e) => {    e.preventDefault()    console.log(userName)  }
return (
<>    <form onSubmit={handleSubmit}>      <input           value={userName}           onChange={(e) => setUserName(e.target.value)}           type="text" id="userName"           name="userName"      />       <button type="submit">Submit</button>    </form>
</>
)
};

export default UserForm;


useRef

useRef в основном используется для нацеливания на элемент DOM. Но его также можно использовать для сохранения изменяемого значения между каждым рендером. useRef не запускает повторную визуализацию (например, useState).

const UseRefBasics = () => {  const refContainer = useRef(null)  const handleSubmit = (e) => {    e.preventDefault()    console.log(refContainer.current.value)  }
  useEffect(() => {    refContainer.current.focus()  }, [])
  return (    <div>      <form className="form" onSubmit={handleSubmit}>        <div>          <input ref={refContainer} type="text" />          <button type="submit">Submit</button>        </div>      </form>    </div>  )
};

Теги: react
Banner
0 комментариев
Сортировка:
Добавить комментарий