Как начать работать с React

Содержание туториала по React React с самого начала был разработан для постепенного внедрения. Вы можете использовать React именно в том объеме, в каком вам нужно. Если вы хотите попробовать React, добавить интерактивности на HTML-страницу или запустить сложное приложение на основе React, этот раздел поможет вам начать работу.

Попробовать React

Есть множество онлайн-песочниц, поддерживающих React: например, CodeSandbox, StackBlitz или CodePen.

Попробовать React локально

Чтобы попробовать React локально на своем компьютере, загрузите эту HTML-страницу. Откройте его в редакторе и в браузере.

Установка React и создание проекта

Если вы начинаете новый проект, рекомендуется использовать набор инструментов или фреймворк. Эти инструменты обеспечивают удобную среду разработки, но требуют локальной установки Node.js.

Создание проекта с create-react-app (CRA)

Если вы изучаете React, рекомендуется воспользоваться Create React App. Это самый популярный способ попробовать React и создать новое одностраничное клиентское приложение (SPA). Он создан для React, но не включает встроенных инструментов для маршрутизации или выборки данных. Сначала установите Node.js. Затем откройте терминал и запустите эту строку, чтобы создать проект:

npx create-react-app my-app

Теперь вы можете запустить свое приложение с помощью:

cd my-app
npm start

Create React App не обрабатывает внутреннюю логику или базы данных. Вы можете использовать его с любым бэкендом. Когда вы создадите проект, вы получите папку со статическим HTML, CSS и JS. Поскольку Create React App не может использовать преимущества серверного рендеринга, оно не обеспечивает наилучшей производительности. Если вам нужно более быстрое время загрузки и встроенные функции, такие как маршрутизация и серверная логика, рекомендуется вместо этого использовать фреймворк.

Популярные альтернативы

• Vite
• Parcel

Разработка с полнофункциональным фреймворком

Если вы хотите начать продакшен-проект, Next.js — отличное вариант для начала. Next.js — это популярная легкая платформа для статических и серверных приложений, созданных с помощью React. Он поставляется со встроенным функционалом, таким как маршрутизация, стилизация и рендеринг на стороне сервера, что позволяет быстро запустить ваш проект.

Популярные альтернативы

• Gatsby
• Remix
• Razzle

Кастомные инстурменты

Вы можете предпочесть создать и настроить свой собственный инструментарий. Такой Инструментарий обычно состоит из:

• Менеджер пакетов позволяет устанавливать, обновлять и управлять сторонними пакетами. Популярные менеджеры пакетов: npm (встроен в Node.js), Yarn, pnpm.
• Компилятор позволяет компилировать функции современного языка и дополнительный синтаксис, такой как JSX, или аннотации типов для браузеров. Популярные компиляторы: Babel, TypeScript, swc.
• Сборщик позволяет писать модульный код и объединять его в небольшие пакеты для оптимизации времени загрузки. Популярные сборщики: webpack, Parcel, esbuild, swc.
• Минификатор делает ваш код более компактным, чтобы он загружался быстрее. Популярные минификаторы: Terser, swc.
• Сервер обрабатывает запросы c клиентского приложения, чтобы вы могли отображать компоненты в HTML. Популярные серверы: Express.
• Линтер проверяет ваш код на распространенные ошибки. Популярные линтеры: ESLint.
• Средство запуска тестов позволяет запускать тесты для вашего кода. Популярные инструменты для тестирования: Jest.

Мы начнем с самых базовых концепций. Рассмотрим различные варианты добавления ReactJS на сайт и создания React проекта. Создадим первые компоненты и шаг за шагом будем подробно рассматривать все части компонента - JSX, события, стили, хуки и т.д. Данный react туториал на русском разделен на удобные части, каждая из которых включает подробное объяснение и простые примеры. Этот гайд подойдет и для начинающих react разработчиков. Также весь API собран в удобный справочник, в котором можно найти подробное объяснение конкретных функций React.

Установка

В этом разделе полного руководства по Реакт собраны все варианты установки React. Можно создать проект на React с нуля или постепенно внедрять его в существующее приложение. Также узнаем как настроить базовый набор инструментов на компьютере для разработки и отладки React приложения.

• Как начать работать с React
• Как добавить React на сайт
• Настройка редактора IDE для работы с React
• Инструменты разработчика React
• Быстрый старт с React
• Мышление в стиле React

Интерфейс пользователя

В этой части руководства по React мы напишем первый React компонент. React компоненты - это переиспользуемые элементы пользовательского интерфейса. В приложении React каждая часть пользовательского интерфейса является компонентом.

• Пишем первый React компонент
• Импорт и экспорт компонентов
• Разметка с JSX
• JavaScript в фигурных скобках в JSX
• Как передать пропсы компоненту
• Рендеринг по условию
• Рендеринг списков
• Чистые компоненты

Добавление интерактивности

Эта часть руководства по React посвящена тому как обрабатывать действия пользователя. Некоторые элементы на экране обновляются в ответ на действия пользователя. Например, клик по галерее изображений переключает активное изображение. В React данные, которые меняются со временем, называются состоянием. Вы можете добавить состояние к любому компоненту и обновить его по мере необходимости. В этой части курса по Реакт вы узнаете, как писать компоненты, которые обрабатывают взаимодействия, обновляют свое состояние и отображают разные выходные данные с течением времени.

• Реакция на события
• Состояние - память компонента
• Рендеринг и фиксация
• Состояние как снимок
• Очередь обновлений состояния
• Обновление объектов в состоянии
• Обновление массивов в состоянии

Управление состоянием

Данная часть react js руководства включает подробное объяснение работы с состоянием. По мере роста вашего React приложения полезно более внимательно относиться к тому, как организовано состояние и как данные передаются между вашими компонентами. Избыточное или повторяющееся состояние является распространенным источником ошибок. В этой части вы узнаете, как правильно структурировать состояние, как поддерживать логику обновления состояния и как обмениваться состоянием между компонентами.

• Реакция на ввод с состоянием
• Какую структуру состояния выбрать
• Обмен данными между компонентами
• Сохранение и сброс состояния
• Управление состоянием в редьюсере
• Отправка данных вглубь с помощью контекста
• Масштабирование состояния с редьюсером и контекстом

Продвинутые темы

Некоторым из ваших компонентов может потребоваться управление и синхронизация с системами вне React. Например, вам может потребоваться сфокусировать ввод с помощью API браузера, воспроизвести и приостановить видеопроигрыватель, реализованный без React, или подключиться и прослушать сообщения с удаленного сервера. В этой части курса по Реакт вы узнаете о лозейках, позволяющих «выйти за пределы» React и подключиться к внешним системам. Большая часть логики вашего приложения и потока данных не должны полагаться на эти функции.

• Доступ к данным через рефы
• Управление DOM с помощью рефов
• Синхронизация с помощью эффектов
• Вам может не понадобиться эффект
• Жизненный цикл реактивных эффектов
• Отделение событий от эффектов
• Удаление лишних зависимостей эффектов
• Переиспользование логики с кастомными хуками