React – это библиотека JavaScript, разработанная компанией Meta для эффективного построения пользовательского интерфейса с минимальным кодированием. Основная цель React.js – обеспечить наилучшую производительность рендеринга путем разбиения страниц на более мелкие компоненты пользовательского интерфейса.
Главная особенность React.js – простота написания кода. Мы можем внедрять JavaScript-коды внутрь HTML-кода, используя синтаксис JSX, в отличие от таких технологий, как Angular, где нам приходится писать больше строк кода.
В этой статье мы познакомимся с основами React.js.
- Начало работы
- Настройка среды React
- Компоненты
- Компонент класса
- Функциональный компонент
- Состояние
- Реквизиты
- Установка реквизитов/состояния по умолчанию
- реквизит по умолчанию
- состояние по умолчанию
- Методы жизненного цикла
- Ссылки на DOM
- События DOM
- JSX (Javascript XML)
- Условный рендеринг
- Валидация реквизитов
- React Router
- Установка
- Пример
- React Hooks
- Основные хуки
- Дополнительные крючки
- Контекст React
- Reactstrap
- Установка:
- Пример:
- Границы ошибок
- React.js против React native
- Резюме
Начало работы
Настройка среды React
Необходимые условия для создания приложений react: Node.js и NPM
Примеры команд для создания приложений,
npx create-react-app hello-world
cd hello-world
npm start
Компоненты
Компоненты – это независимые и многократно используемые фрагменты кода. Они похожи на функции JavaScript, которые возвращают HTML через функцию render(). Компоненты делятся на две категории – компоненты классов и компоненты функций.
Компонент класса
import React from 'react'
import ReactDOM from 'react-dom'
class App extends React.Component {
render() {
return(
<div>
Hello World
</div>
)
}
}
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
Функциональный компонент
import React from 'react'
import ReactDOM from 'react-dom'
function App() {
return (
<div>
Hello World
</div>
)
}
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
Состояние
Состояние – это экземпляр класса React Component Class, который может использоваться для хранения значений свойств, принадлежащих компоненту. Компонент перерисовывается, когда происходит изменение состояния.
import React from 'react'
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
//Initializing state values
name: ""
}
}
componentDidMount() {
this.setState({
//Updating state values
name: "codemaker"
})
}
render() {
return(
<div>
Hello {this.state.name} {/* Using state values */}
</div>
)
}
}
export default App;
Реквизиты
Реквизиты (свойства) – это неизменяемые компоненты, доступные только для чтения. Это объект, который хранит значения атрибутов и служит средством передачи данных от одного компонента к другому. Он передает значения компоненту так же, как аргумент передается функции.
import React from 'react'
import ReactDOM from 'react-dom'
class App extends React.Component {
constructor(props) {
super(props);
}
render() {
return(
<div>
Hello {this.props.name} {/* Using prop values */}
</div>
)
}
}
ReactDOM.render(
<React.StrictMode>
<App name={"codemaker"} /> {/* Provide prop values */}
</React.StrictMode>,
document.getElementById('root')
);
Установка реквизитов/состояния по умолчанию
Свойство defaultProps используется для установки значений по умолчанию для реквизитов. Он может быть определен как свойство компонента, чтобы установить реквизит по умолчанию для класса. Он также задает значения по умолчанию для состояния в конструкторе.
реквизит по умолчанию
import React from 'react'
class App extends React.Component {
constructor(props) {
super(props);
}
render() {
return(
<div>
Hello {this.props.name} {/* Using prop values */}
</div>
)
}
}
App.defaultProps = { //Setting default props with values
name: "codemaker"
}
export default App;
состояние по умолчанию
import React from 'react'
class App extends React.Component {
constructor(props) {
super(props);
this.state = { //Initializing state values / default state
name: ""
}
}
componentDidMount() {
this.setState({ //Updating state values
name: "codemaker"
})
}
render() {
return(
<div>
Hello {this.state.name} {/* Using state values */}
</div>
)
}
}
export default App;
Методы жизненного цикла
React используется для вызова нескольких методов жизненного цикла во время выполнения компонента на каждом этапе. Метод, вызываемый при создании компонента, называется монтажом. Каждое обновление компонента называется обновлением. Удаление компонентов называется размонтированием. Весь процесс называется “жизненным циклом компонента”.
- Методы жизненного цикла монтированияconstructor()static getDerivedStateFromProps()render()componentDidMount()
- Обновление методов жизненного циклаstatic getDerivedStateFromProps()shouldComponentUpdate()render()getSnapshotBeforeUpdate()componentDidUpdate()
- Размонтирование жизненного цикла методcomponentWillUnmount
- Методы жизненного цикла обработки ошибокstatic getDerivedStateFromError()componentDidCatch()
Изображение кредиты projects.wojtekmaj.pl
Ссылки на DOM
React использует ссылки для доступа к DOM в компоненте. Этого можно добиться, добавив атрибут ref к элементу в вашем приложении.
import React from 'react';
class App extends Component {
render () {
return <div>
<input ref={el => this.input = el} />
</div>
} componentDidMount () {
this.input.focus()
}
}
export default App;
События DOM
Событие – это действие, которое может быть вызвано в результате действий пользователя или генерируемого системой действия. React имеет собственную систему обработки событий, известную как Synthetic Events, которая очень похожа на обработку событий на элементах DOM.
События React имеют некоторые синтаксические отличия от событий DOM. К ним относятся:
- События React называются в формате camelCase, а не в нижнем регистре.
- Обработчик событий React требует функцию вместо строки.
import React from 'react';
class App extends Component {
render () {
return (
<input type="text"
value={this.state.value}
onChange={event => this.onChange(event)} />
)
}
onChange (event) {
this.setState({ value: event.target.value })
}
}
export default App;
JSX (Javascript XML)
JSX позволяет пользователям писать JavaScript в HTML. Он записывает элементы HTML на JavaScript и помещает их в DOM без каких-либо методов createElement() или appendChild().
import React from 'react';
class App extends React.Component {
render() {
var i = 1;
const { items } = this.props
return ( // JSX syntax. Using HTML code in Javascript
<div>
<p>Hello World</p>
<p>{8+5}</p> {/* JSX expression */}
<p className={"demo-class"}>class name test</p> {/* Accessing css class */}
<div style={{backgroundColor: 'red'}}> style option test</div> {/* Defining styles inside component */}
<h1>{i == 1 ? 'True' : 'False'}</h1> {/* Conditional statements */}
{i == 1 ? <div>Hello</div> : <div>Haii</div>} {/* Conditional rendering */}
{i == 1 && <div>Test</div>} {/* Short evaluation */}
{items.map(item => //List rendering in JSX
<p>{item}</p>
)
}
{//End of the line Comment...}
{/*Multi line comment...*/}
</div>
);
}
}
export default App;
Условный рендеринг
React предлагает условный рендеринг для рендеринга определенного компонента или фрагмента кода на основе некоторого условия или состояния нашего приложения.
import React from 'react';
import ReactDOM from 'react-dom';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
isAuthenticated: true,
}
}
render() {
const isAuthenticated = this.state.isAuthenticated;
return (
<div>
Welcome {isAuthenticated ? 'Authenticated User' : 'Please login to continue'}.
</div>
);
}
}
Валидация реквизитов
Валидация реквизитов – это механизм, используемый для предотвращения проблем, связанных с данными реквизитов. PropTypes – это свойство компонента react, которое позволяет пользователям проверять типы данных значений, передаваемых через props.
import React from 'react';
import PropTypes from 'prop-types';
class App extends React.Component {
render() {
return (
<div>
<p>{this.props.propArray}</p>
<p>{this.props.propBool}</p>
<p>{this.props.propFunc(5)}</p>
<p>{this.props.propString}</p>
<p>{this.props.propNumber}</p>
</div>
);
}
}
App.propTypes = {
propArray: PropTypes.array.isRequired,
propBool: PropTypes.bool.isRequired,
propFunc: PropTypes.func,
propNumber: PropTypes.number,
propString: PropTypes.string,
}
App.defaultProps = {
propArray: [1,2,3],
propBool: true,
propFunc: function(x){return x+3},
propNumber: 1,
propString: "codemaker",
}
export default App;
React Router
React Router – это библиотека JavaScript, используемая для создания маршрутизации в приложении React. Маршрутизация – это механизм, с помощью которого мы можем переходить на различные страницы, когда путь URL совпадает с любым “маршрутом” внутри файла маршрутизатора.
Установка
npm install react-router-dom --save
Существует два типа компонентов маршрутизатора:
- BrowserRouter: Используется для обработки динамических URL.
- HashRouter: Используется для обработки статических запросов.
Пример
// This is a React Router v6 app
import { BrowserRouter, Routes, Route } from "react-router-dom";
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="users/*" element={<Users />} />
</Routes>
</BrowserRouter>
);
}
React Hooks
Крючки были введены в React 16.8. Они позволяют пользователям использовать реквизиты и состояния непосредственно внутри функционального компонента. Это полезно для управления состоянием компонента и выполнения последействия при определенных изменениях в состоянии без написания класса.
Hooks похожи на функции JavaScript, но при их использовании необходимо соблюдать следующие правила.
- Вызывайте хуки только на верхнем уровне: хуки всегда должны использоваться на верхнем уровне функций React, и не стоит вызывать их внутри циклов, условий или вложенных функций.
- Вызывайте хуки только из функций React: Вызывайте хуки только из компонентов функций и пользовательских хуков.
import React, { useState, useEffect } from 'react';
function App() {
// Declare a new state variable, which we'll call "count"
const [count, setCount] = useState(0);
// Similar to componentDidMount and componentDidUpdate:
useEffect(() => {
// Update the document title using the browser API
document.title = `You clicked ${count} times`;
});
return (
<div>
<p>You clicked {count} times</p> {/* Access state values */}
<button onClick={() => setCount(count + 1)}> {/* Updating state values using setCount */}
Click me
</button>
</div>
);
}
export default App;
Встроенные хуки делятся на два вида – основные и дополнительные.
Основные хуки
- useState
- useEffect
- useContext
Дополнительные крючки
- useReducer
- useCallback
- useMemo
- useRef
- useImperativeHandle
- useLayoutEffect
- useDebugValue
Контекст React
Контекст позволяет пользователям передавать данные дочерним компонентам, не передавая реквизиты вручную на каждом уровне.
// Create a context for the user authentication.
const AuthContext = React.createContext('auth');
class App extends React.Component {
render() {
/* Use a ContextProvider to pass the auth information,
we are passing the "true" as the current value.*/
return (
<AuthContext.Provider value="true">
<App />
</AuthContext.Provider>
);
}
}
// Now, it is not required to pass the auth down explicitly for every component.
function App(props) {
return (
<Home />
);
}
class Home extends React.Component {
static contextType = AuthContext;
render() {
return <Button auth={this.context} />;
}
}
Reactstrap
Reactstrap – это библиотека javascript, которая предоставляет встроенные компоненты Bootstrap, облегчающие создание пользовательского интерфейса для вашего приложения со встроенными проверками. Reactstrap теперь поддерживает Bootstrap 5.1.
Установка:
npm install reactstrap react react-dom
npm install --save bootstrap
Пример:
import React from 'react';
import { Button } from 'reactstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
function App() {
return (
<Button color="danger">Cancel</Button>
);
};
Границы ошибок
React 16 представляет новый подход к обработке ошибок в приложении с помощью границ ошибок. Он позволяет пользователю продолжать работу приложения, несмотря на ошибку, возникшую во время выполнения, и отображает пользователю резервный пользовательский интерфейс.
import React from 'react';
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
static getDerivedStateFromError(error) {
// It will update the state so the next render
// and shows the fallback UI.
return { hasError: true };
}
componentDidCatch(error, info) {
// It will catch error in any component below.
// We can also log the error to an error reporting service.
logErrorToMyService(error, info);
}
render() {
if (this.state.hasError) {
return (
<div>Oops! Error occurs.</div>;
);
}
return this.props.children;
}
}
// Wrap the error boundary around your component
<ErrorBoundary>
<App/>
</ErrorBoundary>
React.js против React native
React.js – это библиотека JavaScript с открытым исходным кодом, используемая для создания пользовательского интерфейса веб-приложений, в то время как React Native используется для разработки мобильных приложений для iOS и Android. React Native почти аналогичен React, однако в качестве строительных блоков он использует нативные компоненты вместо веб-компонентов и ориентирован на мобильные платформы, а не на браузеры.
Кредиты изображений Javapoint
Резюме
Спасибо за прочтение этой статьи.
Благодарим Gowri M Bhatt за рецензирование материала.
Получить статью в формате pdf: React.js-cheatsheet.pdf
Статья также доступна на Medium
Если вам понравилась эта статья, пожалуйста, нажмите на кнопку с сердечком ♥ и поделитесь, чтобы помочь другим найти ее!
Если вы заинтересованы в дальнейшем изучении, вот некоторые ресурсы, которые я нашел полезными на этом пути:
- Учебник: Введение в React
- Состояние и жизненный цикл
- Знакомство с JSX
- Знакомство с крючками