Быстрые шпаргалки по REACT
Что такое Debounce?
04.03.2022
Список навыков Full Stack разработчика
05.03.2022
Что такое ReactJS?
📌ReactJS — это интерфейсная библиотека на основе компонентов с открытым исходным кодом, отвечающая только за уровень представления приложения. Его поддерживает Facebook.
ReactJS использует механизм на основе виртуального DOM для заполнения данных (представлений) в HTML DOM.
📌Виртуальный DOM работает быстро благодаря тому, что он изменяет только отдельные элементы DOM, а не перезагружает каждый раз весь DOM.
Создание React-приложения
📌creat-react-app — это генератор шаблонов приложений React, созданный Facebook. Он предоставляет среду разработки, сконфигурированную для простоты использования с минимальной настройкой, включая:
1. Транспиляция ES6 и JSX
2. Сервер разработки с горячей перезагрузкой модулей
3. Линтинг кода
4. Автоматическое префиксирование CSS
5. Сценарий сборки с JS, CSS и объединением изображений, а также исходными картами
6. Инфраструктура тестирования Jest
Установка
Сначала установите приложение create-react-app с менеджером пакетов узла (npm)
|
1 2 3 4 5 6 |
npx create-react-app my-app cd my-app npm start |
JSX-выражение
scr и нажмите App.js
|
1 2 3 4 5 6 7 8 9 10 11 12 |
function App(){ const name= 'Buddhadeb' return( <div className ="Container"> <h1> Hello World </h1> <h2> Hi {name}</h2> </div> ) } |
React Компоненты
1. Компонент без сохранения состояния📌
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
import React, { Component } from 'react'; import { render } from 'react-dom'; class FirstComponent extends Component { render() { return ( <div> Hello, I am Buddhadeb Chhetri. </div> ); } } export default FirstComponent |
2. Функциональные компоненты без сохранения состояния📌
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
import React from 'react'; import PropTypes from 'prop-types'; const FirstComponent = props => ( <div> Hello, ! I am {props.name}. </div> ); FirstComponent.propTypes = { name: "Buddhadeb Chhetri" } |
3. Свойства в компоненте без сохранения состояния📌
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
const YourComponent = ({ propExample1, example2 }) => ( <div> <h1>properties from parent component:</h1> <ul> <li>{propExample1}</li> <li>{example2}</li> </ul> </div> ) <YourComponent propExample1="Buddhadeb" example2="Chhetri" /> |
4. Компонент класса📌
|
1 2 3 4 5 6 7 8 9 10 11 |
import React from 'react' class YourComponent extends React.Component { render() { return <div>Buddhadeb Chhetri</div> } } export default YourComponent |
5. Свойства в компоненте класса📌
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
class YourComponent extends React.Component { render() { return ( <div> <h1> properties from parent component: </h1> <ul> <li>{this.props.propExample1}</li> <li>{this.props.example2} </li> </ul> </div> ) } } |
6. Состояние📌
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
class CountClicks extends React.Component { state = { clicks: 0 } onButtonClick = () => { this.setState(prevState => ({ clicks: prevState.clicks + 1 })) } render() { return ( <div> <button onClick={this.onButtonClick}> Click me </button> <span> The button clicked {this.state.clicks} times. </span> </div> ) } } |
7. Реагирующий маршрутизатор📌
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
import { BrowserRouter, Route } from 'react-router-dom' const Hello = () => <h1>Hello world!</h1> const App = () => ( <BrowserRouter> <div> <Route path="/hello" component={Hello}/> </div> </BrowserRouter> ) |
8. Хук useState📌
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
import React, { useState } from 'react' function Example() { const [count, setCount] = useState(0) return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click here to increase the counter. </button> </div> ) } |
Сохраните себе обязательно. чтобы не потерять. Когда мы учимся, у нас под рукой всегда должны быть шпаргалки, пока вся работа не будет отлажена до автоматизма.
Источник статьи: http://dev.to/
