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;
Функция Greeting — это компонент React, который отображает фразу «Привет, мир».
Результат отображения в веб-браузере — рендеринг следующего HTML:
<div class="hello_world">
<h1>Привет, мир!</h1> </div>
Особенности 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>
<script>
const counterElement = document.getElementById("counter");
const incBtn = document.getElementById("inc-btn");
const decBtn = document.getElementById("dec-btn");
let counterValue = 0;
function inc() {
counterValue += 1;
counterElement.innerText = counterValue;
}
function dec() {
counterValue -= 1;
counterElement.innerText = counterValue;
}
counterValueElement.innerText = counterValue;
incBtn.addEventListener("click", inc);
decBtn.addEventListener("click", dec);
</script>
</body>
</html>
💡 Пример на React
<!DOCTYPE html>
<html>
<head>
<title>Counter App</title>
<meta charset="UTF-8" />
</head>
<body>
<div id="root"></div>
<script><!--React and Babel libraries links--></script>
<script type="text/babel">
function App() {
const [value, setValue] = React.useState(0);
function inc() {
setValue(value + 1);
}
function dec() {
setValue(value - 1);
}
return (
<div>
<h1>{value}</h1>
<button onClick={inc}>+1</button>
<button onClick={dec}>-1</button>
</div>
);
}
ReactDOM.render(
<div>
<App />
</div>,
document.getElementById("root")
);
</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 признаны экстремистскими и запрещены в РФ.
