Гайд по React.js: с чего начать изучение
Библиотека была впервые использована Facebook (деятельность соцсети запрещена в РФ) ещё в 2011 году, а позже, в 2012 году, — в ленте Instagram (тоже запрещена). Исходный код React открыт в мае 2013 года на конференции JSConf US.
Посмотреть на примерах, чем React отличается от чистого JavaScript, можно в нашей статье «Что такое React и как его освоить?».
Почему важно изучать React.js
React — самая популярная библиотека JavaScript, в том числе в России. Её используют для создания многих сайтов, в том числе сайтов Яндекса. Значит, для их поддержки и развития нужны разработчики. Следовательно, знание React — хорошее преимущество при поиске работы.
В React используется декларативный, а не императивный подход. Это означает, что разработчику достаточно описать, что нужно вывести на страницу. Как это будет сделано — не его забота. Это сокращает объёмы кода и время на разработку.
React использует компонентный подход. Если писать на чистом JS, то каждая страница — своеобразный монолит. С библиотекой React можно определить одинаковые компоненты, например кнопки, и в дальнейшем использовать их везде, где нужно. При таком подходе легче устранять ошибки в коде, если что-то работает не так, как ожидалось.
Создать интерактивный сайт с помощью React — проще, чем на чистом JavaScript. Синтаксис понятнее, объём кода для отдельного компонента меньше. React.js — это представление кода JavaScript и HTML в удобном виде, чтобы он стал повторяемым и наглядным. Код в React.js пишут на JSX, который выглядит как сочетание JavaScript и HTML. Браузеру не нужно понимать JSX, потому что код прогоняют через программу-транспайлер (например, Babel), которая переводит JSX и другие языки в JavaScript-код.
Какие инструменты нужны для разработки на React
Чтобы познакомиться с библиотекой, лучше воспользоваться онлайн-инструментами. Пишите простые приложения в онлайн-песочницах Playcode.io или CodeSandbox: там есть гайды по синтаксису и основные правила. Другой вариант — скачать HTML-файл с шаблоном c GitHub. После код можно для проверки прогнать через Babel — у этого сервиса тоже есть онлайн-инструмент.
Чтобы полноценно изучить библиотеку, лучше установить всё окружение React.js на компьютер:
1. Установите Node.js — серверную платформу для поддержки выполнения JavaScript-кода. Кстати, Node.js и всё остальное лучше устанавливать на ОС Linux.
2. Скачайте пакет create-react-app — библиотеку от разработчика React. Команда для скачивания:
1npm i -g create-react-app
3. После установки пакета создайте шаблон приложения через команду:
1create-react-app react-intro
4. Для запуска приложения выполните команды:
1cd react-intro
2
3npm start
Теперь мы перешли в папку проекта и запустили сервер разработки, который позволяет открыть новое React-приложение по адресу http://localhost:3000/.
С чего начать изучение React
Будем считать, что с основами HTML, CSS и JavaScript вы знакомы, потому что без них трудно разобраться с любой библиотекой этого языка. Далее:
-
Ознакомьтесь с документацией проекта и учебником по синтаксису JSX на официальном сайте React.js.
-
Прочитайте книги для начинающих, чтобы понимать принципы работы языка, — «React. Быстрый старт» Стояна Стефанова или «React. Сборник рецептов» Дэвида и Дона Гриффитсов.
-
Посмотрите видеолекции по фронтенду в Летних школах — 2022 ШРИ Академии Яндекса. Несколько из них посвящены React.
Как выглядит код компонента в React.js
Сделаем чат службы поддержки на сайте интернет-магазина. Для этого нужно выполнить следующие шаги:
-
Создайте компонент для чата. Данные загружайте в хуке useEffect, который вызывает функцию обратного вызова один раз при инициализации компонента.
-
В функции обратного вызова отправьте запросы на сервер, чтобы получить сообщения от пользователей и отобразить их в чате. Для этого используйте библиотеку Axios или другую для работы с API.
-
Создайте форму для отправки сообщений пользователям и обработайте отправку с помощью функции обратного вызова. Она отправляет введённое сообщение на сервер и запрашивает все сообщения.
-
Отобразите сообщения пользователей в чате с помощью компонента Message и Input.
Итоговый код для создания чата с использованием библиотеки Axios и хуков React выглядит так:
1jsx
2import React, { useState, useEffect } from 'react';
3import axios from 'axios';
4function Chat() {
5 const [messages, setMessages] = useState([]);
6 const [message, setMessage] = useState('');
7 const [isChatOpen, setIsChatOpen] = useState(false);
8
9 useEffect(() => {
10 const fetchMessages = async () => {
11 const response = await axios.get('/messages');
12 setMessages(response.data);
13 };
14
15 fetchMessages();
16 }, []);
17
18 const handleSendMessage = (event) => {
19 event.preventDefault();
20 setMessage('');
21 setIsChatOpen(true);
22 };
23
24 return (
25 <div>
26 {isChatOpen && (
27 <form onSubmit={handleSendMessage}>
28 <input value={message} onChange={event => setMessage(event.target.value)} />
29 <button type="submit">Отправить</button>
30 </form>
31 )}
32 <div className="chatContainer">
33 {messages.map((message, index) => (
34 <Message key={index} message={message} />
35 ))}
36 </div>
37 </div>
38 );
39}
40
41export default Chat;