React JavaScript (Node.js): методы, примеры, установка |…

Что такое React и зачем он нужен?

React — это декларативная, эффективная и гибкая JavaScript-библиотека с открытым исходным кодом для создания пользовательских интерфейсов (UI). Она была разработана инженерами Facebook (ныне Meta) в 2013 году и с тех пор стала одной из самых популярных фронтенд-технологий в мире. React позволяет разработчикам создавать сложные, интерактивные и масштабируемые веб-приложения, разбивая интерфейс на независимые, переиспользуемые компоненты.

Зачем нужен React?

Компонентный подход: React строит UI из изолированных блоков (компонентов), каждый из которых управляет собственным состоянием. Это упрощает разработку, тестирование и поддержку кода.
Декларативность: Вы описываете, как должен выглядеть UI для каждого состояния приложения, а React эффективно обновляет и рендерит только те компоненты, которые изменились. Это делает код более предсказуемым и простым для отладки.
Виртуальный DOM (Virtual DOM): React использует легковесную копию реального DOM (Document Object Model). При изменении состояния приложения React сначала обновляет виртуальный DOM, затем сравнивает его с предыдущей версией (diffing) и применяет минимальный набор изменений к реальному DOM. Это значительно повышает производительность, особенно в приложениях с частыми обновлениями.
Огромное сообщество и экосистема: React имеет одно из крупнейших сообществ разработчиков, что означает обилие готовых решений, библиотек, инструментов (React Router, Redux, Next.js, Gatsby) и обучающих материалов.
Универсальность: React можно использовать не только для веб-приложений, но и для мобильных (React Native), десктопных (Electron) и даже VR-приложений (React 360).

React подходит для проектов любого масштаба: от простых одностраничных приложений (SPA) до сложных корпоративных систем и социальных сетей.

Установка React (npm)

Для работы с React вам потребуется Node.js (версия 14 или выше) и менеджер пакетов npm (или yarn). Самый простой способ начать новый проект — использовать официальный инструмент Create React App.

# Установка Create React App глобально (необязательно)
npm install -g create-react-app

# Создание нового проекта с именем my-app
npx create-react-app my-app

# Переход в директорию проекта
cd my-app

# Запуск сервера разработки
npm start

После выполнения этих команд ваш браузер автоматически откроется по адресу http://localhost:3000 с работающим React-приложением.

Важно: npx — это инструмент, который запускает пакеты, не устанавливая их глобально. Если у вас старая версия npm (< 5.2), используйте npm install -g create-react-app, а затем create-react-app my-app.

Альтернативный способ (ручная установка):

# Создайте папку проекта и инициализируйте npm
mkdir my-react-app && cd my-react-app
npm init -y

# Установите React и ReactDOM
npm install react react-dom

# Установите Babel для транспиляции JSX и Webpack для сборки (потребуется настройка)
npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader webpack webpack-cli html-webpack-plugin

Однако для новичков настоятельно рекомендуется использовать Create React App, так как он берет на себя всю сложную настройку сборщика (Webpack, Babel).

Быстрый старт с примером кода

После создания проекта с помощью Create React App, откройте файл src/App.js. Это главный компонент вашего приложения. Давайте создадим простое приложение "Hello, World!" с кнопкой, которая меняет заголовок.

// src/App.js
import React, { useState } from 'react';
import './App.css';

function App() {
  // Объявляем состояние (state) с помощью хука useState
  const [title, setTitle] = useState('Hello, World!');

  // Функция-обработчик для кнопки
  const handleClick = () => {
    setTitle('Вы нажали кнопку!');
  };

  return (
    <div className="App">
      <header className="App-header">
        <h1>{title}</h1>
        <button onClick={handleClick}>
          Нажми меня
        </button>
      </header>
    </div>
  );
}

export default App;

/* src/App.css */
.App {
  text-align: center;
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

button {
  font-size: 1.5rem;
  padding: 10px 20px;
  margin-top: 20px;
  cursor: pointer;
}

Объяснение:

import React, { useState } from 'react'; — импортируем React и хук useState для управления состоянием.
function App() { ... } — это функциональный компонент. Он возвращает JSX (JavaScript XML), который описывает структуру UI.
const [title, setTitle] = useState('Hello, World!'); — создаем переменную состояния title с начальным значением 'Hello, World!' и функцию setTitle для ее обновления.
onClick={handleClick} — при клике на кнопку вызывается функция handleClick, которая обновляет состояние.
{title} — в JSX фигурные скобки используются для вставки JavaScript-выражений.

Запустите приложение (npm start) и нажмите на кнопку. Вы увидите, как заголовок изменится без перезагрузки страницы.

Основные методы и функции React

React предоставляет множество API, но основу составляют хуки (Hooks) — функции, которые позволяют "подключаться" к состоянию и жизненному циклу React из функциональных компонентов. Рассмотрим 10 ключевых методов.

1. useState

Что делает: Позволяет добавить состояние (state) в функциональный компонент. Возвращает массив из двух элементов: текущее значение состояния и функцию для его обновления.

Параметры: initialValue — начальное значение состояния (может быть любого типа: число, строка, объект, массив, функция).

Пример:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Вы нажали {count} раз</p>
      <button onClick={() => setCount(count + 1)}>
        Нажми меня
      </button>
    </div>
  );
}

2. useEffect

Что делает: Позволяет выполнять побочные эффекты (side effects) в функциональных компонентах: запросы к API, подписки, таймеры, манипуляции с DOM. Заменяет методы жизненного цикла классовых компонентов (componentDidMount, componentDidUpdate, componentWillUnmount).

Параметры:

callback — функция, содержащая код эффекта.
dependencies (опционально) — массив зависимостей. Эффект выполняется только при изменении этих значений. Если массив пуст ([]), эффект выполняется один раз после монтирования.

Пример:

import React, { useState, useEffect } from 'react';

function UserList() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    // Выполняется один раз после монтирования компонента
    fetch('https://jsonplaceholder.typicode.com/users')
      .then(response => response.json())
      .then(data => setUsers(data));
  }, []); // Пустой массив зависимостей

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

3. useContext

Что делает: Позволяет использовать контекст (Context) в функциональных компонентах. Контекст — это способ передавать данные через дерево компонентов без необходимости передавать пропсы на каждом уровне (prop drilling).

Параметры: MyContext — объект контекста, созданный с помощью React.createContext().

Пример:

import React, { useContext, createContext } from 'react';

// Создаем контекст
const ThemeContext = createContext('light');

function ThemedButton() {
  // Используем контекст
  const theme = useContext(ThemeContext);
  return <button style={{ background: theme === 'dark' ? '#333' : '#FFF' }}>Кнопка</button>;
}

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <ThemedButton />
    </ThemeContext.Provider>
  );
}

4. useReducer

Что делает: Альтернатива useState для управления более сложной логикой состояния, когда следующее состояние зависит от предыдущего, или когда у вас есть несколько под-значений. Работает по принципу Redux: принимает редюсер (reducer) и начальное состояние.

Параметры:

reducer — функция (state, action) => newState.
initialState — начальное состояние.

Пример:

import React, { useReducer } from 'react';

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
    </>
  );
}

5. useRef

Что делает: Создает изменяемый объект, который сохраняется на протяжении всего жизненного цикла компонента. Используется для доступа к DOM-элементам напрямую, хранения мутируемых значений (без ре-рендера) или для хранения идентификаторов таймеров.

Параметры: initialValue — начальное значение ref-объекта.

Пример (доступ к DOM):

import React, { useRef } from 'react';

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    // `current` указывает на смонтированный DOM-элемент
    inputEl.current.focus();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Фокус на поле ввода</button>
    </>
  );
}

6. useMemo

Что делает: Мемоизирует (кэширует) результат вычисления функции между рендерами. Повторно вычисляет значение только тогда, когда изменяется одна из его зависимостей. Используется для оптимизации производительности, когда у вас есть дорогостоящие вычисления.