React (React.js или ReactJS) — это бесплатная библиотека JavaScript с открытым исходным кодом. Ее применяют, чтобы создавать пользовательские интерфейсы на основе компонентов.
Для чего нужен React.js
React разработала и поддерживает компания Meta* (бывший Facebook) и сообщество отдельных разработчиков и компаний. React используют в разработке одностраничных, мобильных или серверных приложений. Но React занимается только управлением состоянием и рендерингом в DOM, поэтому при создании приложений нужны дополнительные библиотеки для маршрутизации.
Пример применения React в HTML c JSX и JavaScript:
import React from "react"; const Greeting = () => {
return (
<div className="hello_world">
<h1> Hello, world! </h1>
</div>
);
};
export default Greeting;
Особенности React
React придерживается парадигмы декларативного программирования. Разработчики создают описание вида (набора DOM-элементов) для каждого состояния приложения. А React обновляет и отображает компоненты, когда меняют данные. Этим отличается от императивного программирования: там разработчики описывают конкретные шаги для перевода приложения в определенное состояние.
То есть при декларативном программировании (и React) описывают, что хотят получить. А при императивном подходе — как хотят что-то получить. Для создания пользовательских интерфейсов декларативный метод программирования подходит гораздо лучше. Поэтому он прижился в сообществе frontend-разработчиков. Сейчас его применяют практически во всех библиотеках и фреймворках. Например, Vue.js, Svelte, SwiftUI, Flutter.
Основные аспекты при создании приложения с помощью библиотеки React — это состояния и компоненты.
✔️ Состояния
В школе нас учили, что различные объекты могут находиться в разных состояниях. Например, физические вещества — в четырех: твердом, жидком, газообразном и в плазме. В зависимости от состояния одно и то же вещество выглядит и ведет себя по-разному. При внешнем воздействии вещество переходит из одного состояния в другое: например, лед (твердый) становится водой (жидким), когда температура выше 0 °C.
Эти утверждения справедливы для компонентов и приложений на React. Мы задаем набор свойств, которые определяют состояние компонента. Отслеживаем изменения после действий пользователя или других воздействий. Перерисовываем интерфейс на основе текущих состояний компонента.
✔️ Компоненты
Приложение на React строят из компонентов — как здание из отдельных кирпичиков. Компоненты взаимодействуют между собой, могут быть сгруппированы в более сложные. Всё веб-приложение на React — это один большой компонент.
Компонентом может быть отдельная кнопка, поле ввода или целая форма со множеством полей и элементами управления. То есть компонент — это изолированная и независимая сущность, которая реализует поведенческую логику. Эта логика зависит от параметров компонента и состояния. Изолированность и независимость компонентов позволяют использовать их в приложении множество раз.
Изначально компоненты в React описывали только с помощью JavaScript-функций:
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
Но когда появилась шестая версия спецификации ECMAScript-классов, React-компоненты стали описывать и с их помощью:
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
Такой подход ближе разработчикам, которые знакомы с объектно-ориентированным программированием.
Простейшие компоненты генерируют отображение только на основании переданных им параметров (this.props). Это так называемые компоненты без состояния (stateless components):
class HelloMessage extends React.Component {
render() {
return <div>Hello {this.props.name}</div>;
}
}
root.render(<HelloMessage name="Taylor" />);
Более сложные — компоненты с состоянием (stateful components) — генерируют каждое отображение на основе не только параметров, но и текущего состояния (this.state):
class Timer extends React.Component {
constructor(props) {
super(props);
this.state = { seconds: 0 };
}
tick() {
this.setState(state => ({
seconds: state.seconds + 1
}));
}
componentDidMount() {
this.interval = setInterval(() => this.tick(), 1000);
}
componentWillUnmount() {
clearInterval(this.interval);
}
render() {
return (
<div>
Seconds: {this.state.seconds}
</div>
);
}
}
root.render(<Timer />);
Компоненты в своих выходных данных могут ссылаться на другие. Это позволяет использовать одну и ту же абстракцию компонентов для любого уровня детализации. Кнопка, форма, диалог, экран и прочее:
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
function App() {
return (
<div>
<Welcome name="Sara" />
<Welcome name="Cahal" />
<Welcome name="Edite" />
</div>
);
}
Чем отличается приложение на чистом HTML и JavaScript от React
В React используют декларативный подход к написанию приложения. Он отличается от императивного подхода, который применяют при создании приложения на чистом HTML и JS.
Рассмотрим примеры реализации простейшего приложения «Счетчик», чтобы показать основные различия.
💡 Пример на чистом HTML и JavaScript
<!DOCTYPE html>
<html>
<head>
<title>Counter App</title>
<meta charset="UTF-8" />
</head>
<body>
<div>
<h1 id="counter"></h1>
<button id="inc-btn">+1</button>
<button id="dec-btn">-1</button>
</div>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0A%20%20%20%20%20const%20counterElement%20%3D%20document.getElementById(%22counter%22)%3B%0A%20%20%20%20%20const%20incBtn%20%3D%20document.getElementById(%22inc-btn%22)%3B%0A%20%20%20%20%20const%20decBtn%20%3D%20document.getElementById(%22dec-btn%22)%3B%0A%20%20%20%20%20let%20counterValue%20%3D%200%3B%0A%20%0A%20%20%20%20%20function%20inc()%20%7B%0A%20%20%20%20%20%20%20counterValue%20%2B%3D%201%3B%0A%20%20%20%20%20%20%20counterElement.innerText%20%3D%20counterValue%3B%0A%20%20%20%20%20%7D%0A%0Afunction%20dec()%20%7B%0A%20%20%20%20%20%20%20counterValue%20-%3D%201%3B%0A%20%20%20%20%20%20%20counterElement.innerText%20%3D%20counterValue%3B%0A%20%20%20%20%20%7D%0A%20%0A%20%20%20%20%20counterValueElement.innerText%20%3D%20counterValue%3B%0A%20%20%20%20%20incBtn.addEventListener(%22click%22%2C%20inc)%3B%0A%20%20%20%20%20decBtn.addEventListener(%22click%22%2C%20dec)%3B%0A%20%20%20%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
</body>
</html>
💡 Пример на React
<!DOCTYPE html> <html> <head> <title>Counter App</title> <meta charset="UTF-8" /> </head> <body> <div id="root"></div> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%3C!--React%20and%20Babel%20libraries%20links--%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" /> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fbabel%22%3E%0A%20%20%20%20%20function%20App()%20%7B%0A%20%20%20%20%20%20%20const%20%5Bvalue%2C%20setValue%5D%20%3D%20React.useState(0)%3B%0A%20%0A%20%20%20%20%20%20%20function%20inc()%20%7B%0A%20%20%20%20%20%20%20%20%20setValue(value%20%2B%201)%3B%0A%20%20%20%20%20%20%20%7D%0A%0A%09%20%20function%20dec()%20%7B%0A%20%20%20%20%20%20%20%20%20setValue(value%20-%201)%3B%0A%20%20%20%20%20%20%20%7D%0A%20%0A%20%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%20%3Cdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%20%3Ch1%3E%7Bvalue%7D%3C%2Fh1%3E%0A%20%20%20%20%20%20%20%20%20%20%20%3Cbutton%20onClick%3D%7Binc%7D%3E%2B1%3C%2Fbutton%3E%0A%3Cbutton%20onClick%3D%7Bdec%7D%3E-1%3C%2Fbutton%3E%0A%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20)%3B%0A%20%20%20%20%20%7D%0A%20%0A%20%20%20%20%20ReactDOM.render(%0A%20%20%20%20%20%20%20%3Cdiv%3E%0A%20%20%20%20%20%20%20%20%20%3CApp%20%2F%3E%0A%20%20%20%20%20%20%20%3C%2Fdiv%3E%2C%0A%20%20%20%20%20%20%20document.getElementById(%22root%22)%0A%20%20%20%20%20)%3B%0A%20%20%20%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" /> </body> </html>
❗ В первом случае нам понадобилось писать служебный код, чтобы определить элементы кнопок и вывести результат. Это лишняя работа, потому что не относится напрямую к логике приложения.
❗ При использовании компонентов React достаточно добавить на страницу еще один тег App, чтобы получить два независимых счетчика. Это делает приложение легко расширяемым.
❗ Логика компонента React изолирована. Поэтому поток данных в приложении — более предсказуемый, что упрощает разработку и отладку.
Плюсы и минусы React
| Плюсы | Минусы |
|
|
Для каких приложений подойдет React
1️⃣ Большой или средней сложности — несколько экранов, различные формы, много нестандартных элементов управления.
2️⃣ Над которым работает команда программистов — технология поможет быстрее договариваться и лучше поддерживать код.
3️⃣ Которые планируют расширять — изолированные компоненты позволяют легко масштабировать логику, использовать уже созданные решения.
4️⃣ Которые решили обновить — React можно добавлять в уже существующий проект, обновлять кодовую базу постепенно и точечно.
Почему сейчас стоит изучать React
✅ React — это востребованная технология: на React.js написаны яндекс, нетфликс и другие известные сервисы.
✅ Подходы React распространены во frontend-разработке — если изучить React, можно легко менять стек и осваивать новые технологии.
✅ Разработка пользовательских интерфейсов — развивающаяся отрасль: с помощью расширений React сможете создавать интерфейсы не только для веб-приложений, но и для мобильных платформ.
Как изучить React
🎓 Официальный сайт библиотеки на русском языке с актуальной информацией. Если знаете английский, то смотрите англоязычную версию.
🎓 Вводный тур по React. Проведет через основные этапы инициализации и начала работы над приложением. Познакомит с основными концептами React. Подскажет ссылки на ресурсы с ответами.
🎓 Документация. Подходит для более детального изучения библиотеки.
🎓 Блог. Подпишитесь, чтобы следить за последними обновлениями React.
🎓 Сообщество. В нём помогут с вопросами, на которых нет ответа в документации.
🎓 Гитхаб. Для тех, кто решил углубиться в React по полной.
🎓 Курс «Веб-разработчик» в Skypro. Изучите не только React, а еще и HTML и CSS, базовый синтаксис языка JavaScript, инструменты разработки. Сделаете проекты для портфолио: портал с продажей билетов и интерфейсом билетного контролера по QR, виджет погоды, игру, интернет-магазин и лендинг. Все домашки проверяют только практикующие веб-разработчики.
Главное о React.js для начинающих
- React — это библиотека с открытым исходным кодом. В основе — декларативный подход.
- Строительный элемент приложения на React — компонент.
- React популярен во frontend-разработке, большинство крупных компаний используют именно его. Подходит для сложных приложений, над которыми работает большая команда.
- Плюсы: приложение легко масштабировать, есть большая библиотека готовых компонентов. Минусы: увеличенный размер, дополнительные расходы мощностей и памяти устройства.
*Площадки Meta признаны экстремистскими и запрещены в РФ.
Добавить комментарий