React — популярная, декларативная, основанная на компонентах, управляемая состоянием библиотека JavaScript для создания пользовательских интерфейсов:
React популярен. React был представлен Facebook в 2013 году и стал одной из важнейших библиотек для создания пользовательских интерфейсов (UI).
React — декларативный. Вы описываете, как выглядит пользовательский интерфейс, а React отображает и обновляет его при изменении данных:
React основан на компонентах. В React-приложении пользовательский интерфейс создаётся из небольших повторно используемых элементов, таких как панель навигации, поиск и список. В React они называются компонентами.
React управляется состоянием. Данные, которые изменяются со временем, называются состоянием. React управляет состоянием вашего приложения и обновляет пользовательский интерфейс при изменении состояний:
Чтобы быстро освоить React, рекомендуется написать много React-приложений, начиная с простых и постепенно переходя к реальным проектам.
Раздел 1. Начало работы с React
Этот раздел поможет вам быстро начать работу с React, объяснив, как работает React.
- React Hello World — давайте создадим простое приложение React.
- JSX — узнайте о JSX и о том, как правильно писать элементы JSX в приложении React.
- Props — научитесь передавать данные из родительского компонента в дочерние компоненты с помощью системы React Props.
- Key Prop — как правильно визуализировать список в приложении React, используя key prop.
- Условный рендеринг — узнайте, как визуализировать элементы JSX на основе условия.
- События (Events) — поможет вам обрабатывать такие события, как щелчки мыши или отправка форм, с помощью событий React.
- Состояние (State) — покажет, как работать с состоянием и событиями React для создания интерактивных компонентов React.
Раздел 2. Взаимодействие с API
В этом разделе показано, как создать React-приложение, использующее внешний API.
- React API Call — покажет, как создать приложение поиска Википедии в React.
Раздел 3. Приложения Todo
В этом разделе мы постепенно создадим три версии приложения Todo на React.
- Приложение React Todo — узнайте шаг за шагом, как создать приложение React Todo.
- React Todo с API — создайте приложение Todo, которое использует API для сохранения данных.
- Приложение React Todo с контекстом — используйте контекст для распространения состояния по всему приложению React.
Раздел 4. Подробное описание React Hooks
- useState — научитесь добавлять переменную состояния к компоненту с помощью хука useState.
- useEffect — поможет вам запустить функцию побочного эффекта в компоненте.
- useReducer — покажет, как использовать хук useReducer для более эффективного управления несколькими тесно связанными состояниями.
- useRef — узнайте, как использовать хук useRef для прямого доступа к элементам DOM и изменения состояния без необходимости повторной отрисовки.
Раздел 5. Инструменты
- React + Tailwind CSS — покажет, как установить Tailwind CSS в приложение React.