Основные понятия React JS: справочник

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

Настройка среды разработки

Прежде чем перейти к практическим аспектам ReactJS, необходимо настроить среду разработки. В этом руководстве мы пошагово рассмотрим процесс установки необходимых инструментов и создания первого React-проекта.

Требования:

Для начала вам понадобятся Node.js и npm (Node Package Manager). Node.js — это среда выполнения JavaScript вне браузера, а npm используется для управления зависимостями вашего проекта.

1. Установка Node.js и npm:

• Перейдите на официальный сайт Node.js и скачайте версию, рекомендованную для большинства пользователей (https://nodejs.org/en/download).
• После установки убедитесь, что всё работает, выполнив в терминале следующие команды:

$ node --version

2. Редактор кода: Вы можете использовать любой текстовый редактор, но рекомендуем Visual Studio Code за удобство подсветки синтаксиса, автодополнения и интеграцию с Git.

Вот список популярных редакторов, с которыми можно ознакомиться:

Создание нового проекта React.JS

1. Установка Vite и создание проекта

npm create vite@latest my-react-app -- --template react

Замените my-react-app на желаемое имя вашего проекта.

2. Перейдите в директорию проекта

cd my-react-app

3. Установка зависимостей:

npm install

4. Запуск сервера разработки:

npm run dev

Это откроет приложение в вашем браузере по адресу http://localhost:3000.

Понимание структуры проекта

Ваш новый проект React имеет предопределённую структуру. Вот основные файлы и папки, с которыми вы будете работать:

• public/index.html: единственный HTML-файл, куда будет рендериться ваше React-приложение.
• src/index.js: точка входа JavaScript вашего React-приложения.
• src/App.js: базовый React-компонент, который служит отправной точкой для вашего приложения.

Пример: В этом примере реализовано простое React-приложение с выводом «Hello, World».

import React from 'react';

function App() {
    return (
        <div className="App">
            <h1 style={{ textAlign: 'center' }}>
                Hello, World!
            </h1>
        </div>
    );
}

export default App;

Результат:

Основные концепции React

Концепции React	Описание
Введение в JSX	JSX (JavaScript XML) — это расширение синтаксиса для React, позволяющее писать HTML-элементы внутри JavaScript-кода.
Рендеринг элементов	Рендеринг элементов в React — это эффективное обновление интерфейса пользователя путём создания и обновления виртуальных представлений компонентов UI.
Компоненты React	Компоненты в React — это модульные и переиспользуемые строительные блоки интерфейса.
Компоненты React — часть 2	Компоненты в React — это модульные и переиспользуемые строительные блоки интерфейса.
Фрагменты React	Можно рендерить один элемент или несколько, но для нескольких требуется обёртка — так называемый ‘div’ или Fragment.
Props в React — часть 1	React позволяет передавать информацию в компонент с помощью props (свойства).
Props в React — часть 2	React позволяет передавать информацию в компонент с помощью props.
PropTypes	Используйте propType для проверки корректности данных, получаемых через props.
State в React	State — способ хранения и управления данными внутри React-приложения.
Жизненный цикл компонентов	Каждый компонент React имеет жизненный цикл — последовательность методов, вызываемых на различных этапах существования компонента.
Условный рендеринг	Рендеринг элементов в зависимости от условий — условный рендеринг в React.
Списки в React	Списки React очень полезны для создания интерфейса любого сайта.
Ключи в React	Ключи — способ присвоить уникальный идентификатор каждому элементу списка, чтобы React мог эффективно обрабатывать элементы.
Refs в React	Refs используются для доступа и изменения DOM-элементов внутри React-приложения.
Формы в React	В React все данные формы хранятся в состоянии компонента.
Хуки React	Хуки дают функциональным компонентам возможность использовать состояние и управлять побочными эффектами.
React Router	React преимущественно используется для создания SPA (одностраничных приложений), поэтому навигация является сложной задачей.
ReactDOM	React предоставляет пакет react-dom для доступа и управления DOM.
Обработка событий	Современные веб-страницы зависят от пользовательских взаимодействий, таких как клики и нажатия клавиш.
Синтетические события React	Синтетические события — это обёртки React вокруг стандартных браузерных событий, обеспечивающие кроссбраузерность.
Context API	Context API используется для передачи глобальных переменных во всём приложении.
Управляемые компоненты	Управляемые компоненты React управляют данными форм через состояние, получают значения через props и обновляются через обработчики, например, onChange.