Если вы не используете 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
- Нет необходимости импортировать React из React (начиная с React 17)
- Первая буква должна быть заглавной
- Должен вернуть 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
- Приложить между {}
- Должно быть выражением (вернуть значение)
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 - обрабатывать реактивные данные. Любые данные, которые изменяются в приложении, называются состоянием. И когда состояние изменяется, вы хотите отреагировать на обновление пользовательского интерфейса.
- Хук всегда начинается с префикса use
- Должен вызываться только в компоненте / функции React
- Должен быть вызван на верхнем уровне функционального компонента
- Декларацию нельзя назвать условно
- 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}><inputvalue={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> ) };
1 комментарий
Добавить комментарий