Гайд по React.js: с чего начать изучение

Библиотека была впервые использована Facebook (деятельность соцсети запрещена в РФ) ещё в 2011 году, а позже, в 2012 году, — в ленте Instagram (тоже запрещена). Исходный код React открыт в мае 2013 года на конференции JSConf US.

Посмотреть на примерах, чем React отличается от чистого JavaScript, можно в нашей статье «Что такое React и как его освоить?».

Почему важно изучать React.jsПочему важно изучать 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Какие инструменты нужны для разработки на React

Чтобы познакомиться с библиотекой, лучше воспользоваться онлайн-инструментами. Пишите простые приложения в онлайн-песочницах Playcode.io или CodeSandbox: там есть гайды по синтаксису и основные правила. Другой вариант — скачать HTML-файл с шаблоном c GitHub. После код можно для проверки прогнать через Babel — у этого сервиса тоже есть онлайн-инструмент.

Чтобы полноценно изучить библиотеку, лучше установить всё окружение React.js на компьютер:

1. Установите Node.js — серверную платформу для поддержки выполнения JavaScript-кода. Кстати, Node.js и всё остальное лучше устанавливать на ОС Linux.

2. Скачайте пакет create-react-app — библиотеку от разработчика React. Команда для скачивания:

npm i -g create-react-app

3. После установки пакета создайте шаблон приложения через команду:

create-react-app react-intro

4. Для запуска приложения выполните команды:

cd react-intro

npm start

Теперь мы перешли в папку проекта и запустили сервер разработки, который позволяет открыть новое React-приложение по адресу http://localhost:3000/.

С чего начать изучение ReactС чего начать изучение React

Будем считать, что с основами HTML, CSS и JavaScript вы знакомы, потому что без них трудно разобраться с любой библиотекой этого языка. Далее:

1. Ознакомьтесь с документацией проекта и учебником по синтаксису JSX на официальном сайте React.js.

2. Прочитайте книги для начинающих, чтобы понимать принципы работы языка, — «React. Быстрый старт» Стояна Стефанова или «React. Сборник рецептов» Дэвида и Дона Гриффитсов.

3. Посмотрите видеолекции по фронтенду в Летних школах — 2022 ШРИ Академии Яндекса. Несколько из них посвящены React.

Как выглядит код компонента в React.jsКак выглядит код компонента в React.js

Сделаем чат службы поддержки на сайте интернет-магазина. Для этого нужно выполнить следующие шаги:

1. Создайте компонент для чата. Данные загружайте в хуке useEffect, который вызывает функцию обратного вызова один раз при инициализации компонента.

2. В функции обратного вызова отправьте запросы на сервер, чтобы получить сообщения от пользователей и отобразить их в чате. Для этого используйте библиотеку Axios или другую для работы с API.

3. Создайте форму для отправки сообщений пользователям и обработайте отправку с помощью функции обратного вызова. Она отправляет введённое сообщение на сервер и запрашивает все сообщения.

4. Отобразите сообщения пользователей в чате с помощью компонента Message и Input.

Итоговый код для создания чата с использованием библиотеки Axios и хуков React выглядит так:

jsx
import React, { useState, useEffect } from 'react';
import axios from 'axios';
function Chat() {
  const [messages, setMessages] = useState([]);
  const [message, setMessage] = useState('');
  const [isChatOpen, setIsChatOpen] = useState(false);
 
  useEffect(() => {
	const fetchMessages = async () => {
  	const response = await axios.get('/messages');
  	setMessages(response.data);
	};
 
	fetchMessages();
  }, []);
 
  const handleSendMessage = (event) => {
	event.preventDefault();
	setMessage('');
	setIsChatOpen(true);
  };
 
  return (
	<div>
  	{isChatOpen && (
    	<form onSubmit={handleSendMessage}>
      	<input value={message} onChange={event => setMessage(event.target.value)} />
          <button type="submit">Отправить</button>
    	</form>
  	)}
  	<div className="chatContainer">
    	{messages.map((message, index) => (
      	<Message key={index} message={message} />
    	))}
  	</div>
	</div>
  );
}
 
export default Chat;