React: руководство для начинающих по созданию веб-приложений

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

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

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

Итак, приступим! Давайте узнаем, как создавать удивительные вещи с помощью React.

Глава 1: Введение в React

• Что такое React и чем он полезен
• Настройка среды разработки
• Создание базового проекта React

Глава 2: Компоненты

• Что такое компоненты и как они работают
• Создание и визуализация компонентов
• Понимание JSX и как его использовать для определения структуры компонента

Глава 3: Реквизит

• Что такое реквизит и как им пользоваться
• Передача реквизита компоненту
• Использование свойств для настройки поведения и внешнего вида компонента

Глава 4: Состояние

• Что такое состояние и чем оно отличается от реквизита
• Управление состоянием внутри компонента
• Обновление состояния и отрисовка новых элементов пользовательского интерфейса на основе изменений состояния

Глава 5: Обработка событий

• Понимание событий и как обрабатывать их в React
• Использование обработчиков событий для изменения состояния компонента
• Предотвращение поведения событий по умолчанию и использование объектов событий

Глава 6: Списки и ключи

• Отображение списков данных в компоненте
• Понимание ключей и как их использовать
• Использование map() для преобразования данных в список компонентов

Глава 7: Формы

• Создание и обработка ввода формы в React
• Проверка данных формы
• Отправка данных формы и работа с асинхронными запросами

Глава 8: Маршрутизация

• Что такое маршрутизация и почему она полезна
• Настройка маршрутизации в приложении React
• Навигация между маршрутами и передачей параметров

Глава 9: Расширенные темы

• Работа с контекстным API React
• Использование хуков React
• Работа с асинхронными данными и обработка ошибок
• Создание и развертывание приложения React

Глава 1: Введение в React

Что такое React и чем он полезен?

React — это библиотека JavaScript для создания пользовательских интерфейсов. Он был разработан Facebook и в настоящее время поддерживается сообществом разработчиков.

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

React использует виртуальный DOM (облегченное представление фактического DOM в памяти) для повышения производительности обновлений пользовательского интерфейса. Когда состояние компонента изменяется, React обновляет виртуальную DOM, а затем эффективно обновляет фактическую DOM с минимальным количеством необходимых изменений. Это помогает уменьшить количество операций манипулирования DOM, которые могут быть медленными, особенно в больших приложениях.

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

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

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

Чтобы настроить среду разработки для приложения React, вам потребуется следующее:

1. Текстовый редактор или интегрированная среда разработки (IDE) для написания кода. Некоторые популярные варианты включают Visual Studio Code, WebStorm и Sublime Text.
2. Node.js — среда выполнения JavaScript, позволяющая запускать код JavaScript на сервере. Вам понадобится Node.js, чтобы использовать инструменты командной строки React и запустить сервер разработки. Скачать последнюю версию Node.js можно с официального сайта (https://nodejs.org/).
3. Инструменты командной строки React, которые вы можете установить с помощью следующей команды:

npm install -g create-react-app

Инструмент create-react-app — это утилита командной строки, которая создает базовый скелет приложения React. Вы можете использовать его для создания нового проекта React, выполнив следующую команду:

create-react-app my-app

Это создаст новый каталог с именем my-app с базовой структурой приложения React. Затем вы можете перейти в каталог и запустить сервер разработки, выполнив следующие команды:

cd my-app
npm start

Это запустит сервер разработки и откроет приложение в новом окне браузера. Сервер разработки автоматически перезагружает приложение всякий раз, когда вы вносите изменения в код, чтобы вы могли видеть обновления в режиме реального времени.

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

Чтобы создать базовый проект React, вы можете использовать инструмент командной строки create-react-app. Этот инструмент — удобный способ создать базовый скелет приложения React со всеми необходимыми зависимостями и конфигурацией.

Чтобы установить инструмент create-react-app, на вашем компьютере должен быть установлен Node.js. Скачать последнюю версию Node.js можно с официального сайта (https://nodejs.org/).

После установки Node.js вы можете установить инструмент create-react-app глобально, выполнив следующую команду:

npm install -g create-react-app

Это установит инструмент create-react-app глобально, что означает, что вы можете использовать его для создания нового проекта React из любого каталога.

Чтобы создать новый проект React, перейдите в каталог, в котором вы хотите создать проект, и выполните следующую команду:

create-react-app my-app

Это создаст новый каталог с именем my-app с базовой структурой приложения React. Каталог будет содержать следующие файлы и каталоги:

• public/: этот каталог содержит файл HTML, который будет использоваться для визуализации приложения React, а также любые статические ресурсы, такие как изображения и шрифты.
• src/: этот каталог содержит исходный код приложения React. Он содержит файл index.js, который является точкой входа для приложения, а также файл App.js, определяющий корневой компонент приложения.
• package.json: Этот файл определяет зависимости и сценарии для проекта.

Чтобы запустить сервер разработки и запустить приложение, перейдите в каталог проекта и выполните следующую команду:

cd my-app
npm start

Это запустит сервер разработки и откроет приложение в новом окне браузера. Сервер разработки автоматически перезагружает приложение всякий раз, когда вы вносите изменения в код, чтобы вы могли видеть обновления в режиме реального времени.

Вот пример того, как вы можете создать Hello, world! приложение в Реакции:

1. Сначала создайте новый проект React с помощью инструмента create-react-app:

npm install -g create-react-app
create-react-app hello-world
cd hello-world

1. Откройте файл src/App.js и замените содержимое следующим кодом:

import React from 'react';

function HelloWorld() {
  return <h1>Hello, world!</h1>;
}

export default HelloWorld;

Этот код определяет функцию HelloWorld, которая возвращает элемент h1 с текстом «Привет, мир!».

1. Запустите сервер разработки и запустите приложение:

npm start

Это запустит сервер разработки и откроет приложение в новом окне браузера. Вы должны увидеть Hello, world! сообщение отображается в браузере.

Глава 2: Компоненты

Что такое компоненты и как они работают?

В React компонент — это фрагмент кода, представляющий часть пользовательского интерфейса. Компоненты можно использовать повторно, и их можно объединять для создания сложного пользовательского интерфейса.

В React есть два типа компонентов: функциональные компоненты и компоненты на основе классов.

Функциональные компоненты — это простые функции, которые принимают реквизиты (сокращение от свойств) в качестве аргумента и возвращают элемент React. Вот пример функционального компонента:

import React from 'react';

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

Этот компонент принимает свойство name и возвращает элемент h1 с текстом «Привет, {имя}». Компоненты на основе классов — это классы, расширяющие класс React.Component и определяющие метод render. Вот пример компонента на основе класса:

import React from 'react';

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

Этот компонент похож на функциональный компонент выше, но использует синтаксис на основе классов.

Чтобы использовать компонент, вы можете импортировать его в другой компонент и визуализировать с использованием синтаксиса JSX. Например:

import React from 'react';
import Welcome from './Welcome';

function App() {
  return (
    <div>
      <Welcome name="Alice" />
      <Welcome name="Bob" />
      <Welcome name="Charlie" />
    </div>
  );
}

Этот код импортирует компонент Welcome и рендерит его три раза, передавая разные свойства name каждому экземпляру. Полученный пользовательский интерфейс будет содержать три сообщения «Привет, {имя}».

Создание и визуализация компонентов

В React компонент — это фрагмент кода, представляющий часть пользовательского интерфейса. Чтобы создать компонент, вы можете использовать либо функциональный компонент, либо компонент на основе классов.

Вот пример того, как создать функциональный компонент:

import React from 'react';

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

Этот компонент принимает свойство name и возвращает элемент h1 с текстом «Привет, {имя}».

Вот пример того, как создать компонент на основе класса:

import React from 'react';

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

Этот компонент похож на функциональный компонент выше, но использует синтаксис на основе классов.

Чтобы отобразить компонент, вы можете импортировать его в другой компонент и использовать в синтаксисе JSX. Например:

import React from 'react';
import Welcome from './Welcome';

function App() {
  return (
    <div>
      <Welcome name="Alice" />
      <Welcome name="Bob" />
      <Welcome name="Charlie" />
    </div>
  );
}

Этот код импортирует компонент Welcome и рендерит его три раза, передавая разные реквизиты name каждому экземпляру. Полученный пользовательский интерфейс будет содержать три сообщения «Привет, {имя}».

Понимание JSX и как его использовать для определения структуры компонента

JSX — это расширение синтаксиса для JavaScript, которое позволяет вам писать HTML-подобный код в ваших компонентах React. Это не отдельный язык программирования, а скорее синтаксис, который преобразуется в JavaScript во время сборки.

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

import React from 'react';

function Welcome(props) {
  return (
    <div>
      <h1>Hello, {props.name}</h1>
      <p>Welcome to my website!</p>
    </div>
  );
}

В этом примере компонент Welcome возвращает элемент div с элементами h1 и элементом p в качестве дочерних элементов. Элемент h1 отображает реквизит name, переданный компоненту, а элемент p отображает фиксированное сообщение.

В JSX есть несколько ключевых правил, о которых вам следует знать: 1.
В JSX можно использовать любое допустимое выражение JavaScript, заключенное в фигурные скобки. Например, вы можете использовать выражение props.name в элементе h1 для отображения реквизита name, переданного компоненту.

1. Элементы JSX должны иметь закрывающий тег. В приведенном выше примере оба элемента h1 и p имеют закрывающие теги.
2. Элементы JSX должны быть вложены внутрь родительского элемента. В приведенном выше примере элементы h1 и p вложены в элемент div.

Глава 3: Реквизит

Что такое реквизит и как им пользоваться?

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

Чтобы использовать реквизиты в компоненте, вы можете определить реквизиты как аргументы в функции или классе компонента. Например, вот функциональный компонент, который принимает свойство name:

import React from 'react';

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

Этот компонент принимает свойство name и возвращает элемент h1 с текстом «Привет, {имя}». Чтобы передать свойства компоненту, вы можете использовать синтаксис JSX, чтобы указать имя свойства и значение в качестве атрибутов элемента компонента. Например:

import React from 'react';
import Welcome from './Welcome';

function App() {
  return (
    <div>
      <Welcome name="Alice" />
      <Welcome name="Bob" />
      <Welcome name="Charlie" />
    </div>
  );
}

Этот код импортирует компонент Welcome и рендерит его три раза, передавая разные реквизиты name каждому экземпляру. Полученный пользовательский интерфейс будет содержать три сообщения «Привет, {имя}».

Свойства являются неизменяемыми, что означает, что компонент не может изменять свои собственные свойства. Если компоненту необходимо изменить свое собственное состояние или поведение, он должен использовать состояние вместо свойств.

Передача реквизита компоненту

Чтобы передать свойства компоненту в React, вы можете использовать синтаксис JSX, чтобы указать имя свойства и значение в качестве атрибутов элемента компонента.

Например, рассмотрим следующий компонент, который принимает свойство name:

import React from 'react';

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

Чтобы передать свойство этому компоненту, вы можете использовать следующий синтаксис JSX:

<Welcome name="Alice" />

Это передаст свойство name со значением «Алиса» компоненту Welcome. Затем компонент отобразит сообщение «Привет, Алиса».

Вы можете передать любое количество реквизитов компоненту, указав их как атрибуты элемента компонента. Например:

<Welcome name="Alice" age={30} location="New York" />

Это передаст реквизит name со значением «Алиса», реквизит age со значением 30 и реквизит location со значением «Нью-Йорк» компоненту Welcome.

Свойства могут быть любого типа данных, включая строки, числа, логические значения, массивы и объекты. Вы можете получить доступ к свойствам в компоненте, используя объект props.

Использование свойств для настройки поведения и внешнего вида компонента

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

Например, рассмотрим следующий компонент, который принимает свойство name:

import React from 'react';

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

Этот компонент принимает свойство name и возвращает элемент h1 с текстом «Привет, {имя}».

Вы можете настроить внешний вид и поведение этого компонента, передав ему различные реквизиты. Например:

<Welcome name="Alice" />
<Welcome name="Bob" />
<Welcome name="Charlie" />

Этот код будет отображать три экземпляра компонента Welcome, каждый с другим реквизитом name. Полученный пользовательский интерфейс будет содержать три сообщения «Привет, {имя}».

Вы также можете настроить внешний вид и поведение компонента, передав реквизиты, влияющие на стиль или поведение компонента. Например:

function Welcome(props) {
  return (
    <h1 style={{ color: props.color }}>
      Hello, {props.name}
    </h1>
  );
}

<Welcome name="Alice" color="red" />
<Welcome name="Bob" color="green" />
<Welcome name="Charlie" color="blue" />

Этот код будет отображать три экземпляра компонента Welcome, каждый с другим реквизитом color. Полученный пользовательский интерфейс будет содержать три сообщения «Привет, {имя}» разных цветов.

Глава 4: Состояние

Что такое состояние и чем оно отличается от реквизита

В React состояние — это способ хранения и управления данными, которые влияют на поведение и внешний вид компонента. Состояние похоже на свойства, но оно является частным для компонента и может быть изменено самим компонентом.

Реквизиты, с другой стороны, — это данные, которые передаются от родительского компонента к дочернему компоненту. Свойства являются неизменяемыми, что означает, что компонент не может изменять свои собственные свойства.

Вот пример того, как использовать состояние в компоненте React:

import React from 'react';

class Counter extends React.Component {
  state = {
    count: 0,
  };

  handleIncrement = () => {
    this.setState((state) => ({
      count: state.count + 1,
    }));
  };

  handleDecrement = () => {
    this.setState((state) => ({
      count: state.count - 1,
    }));
  };

  render() {
    return (
      <div>
        <button onClick={this.handleIncrement}>+</button>
        <p>{this.state.count}</p>
        <button onClick={this.handleDecrement}>-</button>
      </div>
    );
  }
}

Этот компонент определяет объект состояния со свойством count и определяет два обработчика событий для увеличения и уменьшения счетчика. Компонент отображает кнопку для увеличения счетчика, абзац для отображения счетчика и кнопку для уменьшения счетчика.

Для обновления состояния компонент использует метод setState. Этот метод принимает объект или функцию, которая возвращает объект, и обновляет состояние компонента новыми значениями.

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

Чтобы управлять состоянием внутри компонента в React, вы можете определить объект состояния и использовать метод setState для обновления состояния.

Вот пример того, как управлять состоянием внутри компонента:

import React from 'react';

class Counter extends React.Component {
  state = {
    count: 0,
  };

  handleIncrement = () => {
    this.setState((state) => ({
      count: state.count + 1,
    }));
  };

  handleDecrement = () => {
    this.setState((state) => ({
      count: state.count - 1,
    }));
  };

  render() {
    return (
      <div>
        <button onClick={this.handleIncrement}>+</button>
        <p>{this.state.count}</p>
        <button onClick={this.handleDecrement}>-</button>
      </div>
    );
  }
}

Этот компонент определяет объект состояния со свойством count и определяет два обработчика событий для увеличения и уменьшения счетчика. Компонент отображает кнопку для увеличения счетчика, абзац для отображения счетчика и кнопку для уменьшения счетчика.

Для обновления состояния компонент использует метод setState. Этот метод принимает объект или функцию, которая возвращает объект, и обновляет состояние компонента новыми значениями.

Вы можете получить доступ к состоянию компонента, используя объект this.state. В приведенном выше примере компонент использует выражение this.state.count для отображения текущего количества в абзаце.

Обновление состояния и отрисовка новых элементов пользовательского интерфейса на основе изменений состояния

В React вы можете обновлять состояние и отображать новые элементы пользовательского интерфейса на основе изменений состояния, используя метод setState и метод render компонента.

Вот пример того, как обновлять состояние и отображать новые элементы пользовательского интерфейса на основе изменений состояния:

import React from 'react';

class Counter extends React.Component {
  state = {
    count: 0,
  };

  handleIncrement = () => {
    this.setState((state) => ({
      count: state.count + 1,
    }));
  };

  handleDecrement = () => {
    this.setState((state) => ({
      count: state.count - 1,
    }));
  };

  render() {
    return (
      <div>
        <button onClick={this.handleIncrement}>+</button>
        <p>{this.state.count}</p>
        <button onClick={this.handleDecrement}>-</button>
      </div>
    );
  }
}

Этот компонент определяет объект состояния со свойством count и определяет два обработчика событий для увеличения и уменьшения счетчика. Метод компонента render возвращает элемент div с тремя дочерними элементами: кнопкой для увеличения счетчика, абзацем для отображения счетчика и кнопкой для уменьшения счетчика.

Когда пользователь нажимает одну из кнопок, вызывается соответствующий обработчик события. Обработчик событий использует метод setState для обновления свойства count в объекте состояния. Это вызывает повторную визуализацию компонента, и новое значение счетчика отображается в абзаце.

Глава 5: Обработка событий

Понимание событий и как обрабатывать их в React

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

Для обработки событий в React вы можете использовать префикс on, за которым следует имя события, чтобы указать обработчик события. Например, для обработки события клика вы можете использовать обработчик событий onClick.

Вот пример того, как обрабатывать событие клика в компоненте React:

import React from 'react';

function Button() {
  const handleClick = () => {
    console.log('Button clicked');
  };

  return <button onClick={handleClick}>Click me</button>;
}

Этот компонент определяет функцию handleClick, которая при вызове выводит сообщение на консоль. Компонент возвращает элемент кнопки с обработчиком события onClick, установленным на функцию handleClick.

Когда пользователь нажимает кнопку, вызывается функция handleClick, и сообщение записывается в консоль.

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

import React from 'react';

function MyComponent() {
  const handleClick = () => {
    console.log('Button clicked');
  };

  const handleMouseEnter = () => {
    console.log('Mouse entered');
  };

  const handleMouseLeave = () => {
    console.log('Mouse left');
  };

  return (
    <div>
      <button onClick={handleClick}>Click me</button>
      <div onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
        Hover over me
      </div>
    </div>
  );
}

Этот компонент определяет три обработчика событий: handleClick, handleMouseEnter и handleMouseLeave. Он возвращает элемент div с кнопкой и еще один элемент div в качестве дочерних элементов. Кнопка имеет обработчик событий onClick, а второй элемент div имеет обработчики событий onMouseEnter и onMouseLeave.

Когда пользователь нажимает кнопку, вызывается функция handleClick. Когда пользователь перемещает мышь за пределы второго элемента div, вызывается функция handleMouseLeave.

Надеюсь, это поможет! Дайте мне знать, если у вас есть еще вопросы.

В дополнение к встроенным событиям DOM вы также можете обрабатывать пользовательские события в своих компонентах React. Для этого вы можете использовать конструктор CustomEvent для создания пользовательского события, и вы можете использовать метод dispatchEvent для запуска события.

Вот пример того, как обрабатывать пользовательское событие в компоненте React:

import React from 'react';

class MyComponent extends React.Component {
  handleCustomEvent = () => {
    console.log('Custom event handled');
  };

  componentDidMount() {
    this.element.addEventListener('myCustomEvent', this.handleCustomEvent);
  }

  componentWillUnmount() {
    this.element.removeEventListener('myCustomEvent', this.handleCustomEvent);
  }

  render() {
    return <div ref={(el) => (this.element = el)}>Click me</div>;
  }
}

Этот компонент определяет функцию handleCustomEvent, которая при вызове выводит сообщение на консоль. Метод жизненного цикла componentDidMount компонента добавляет прослушиватель событий для события myCustomEvent к элементу компонента, а метод жизненного цикла componentWillUnmount удаляет прослушиватель событий.

Чтобы вызвать пользовательское событие, вы можете использовать следующий код:

const event = new CustomEvent('myCustomEvent');
element.dis

Есть много других аспектов обработки событий в React, о которых вы, возможно, захотите узнать. Некоторые дополнительные темы, которые вы, возможно, захотите изучить, включают:

• Передача аргументов обработчикам событий. Вы можете передавать аргументы обработчикам событий, заключив функцию обработчика событий в анонимную функцию. Например:

import React from 'react';

function MyComponent() {
  const handleClick = (arg) => {
    console.log(arg);
  };

  return <button onClick={() => handleClick('hello')}>Click me</button>;
}

Этот код будет передавать строку «привет» в качестве аргумента функции handleClick при нажатии кнопки.

• Использование объекта event: когда вызывается обработчик событий, он получает объект event в качестве аргумента. Объект event содержит информацию о событии, такую ​​как целевой элемент и текущее значение входного элемента. Вы можете использовать объект event для доступа к этой информации и изменения поведения обработчика событий.
• Предотвращение поведения по умолчанию. Многие события DOM имеют поведение по умолчанию, например переход по ссылке или отправка формы. Вы можете использовать метод preventDefault объекта event, чтобы предотвратить поведение события по умолчанию. Например:

import React from 'react';

function MyComponent() {
  const handleSubmit = (event) => {
    event.preventDefault();
    console.log('Form submitted');
  };

  return <form onSubmit={handleSubmit}></form>;
}

Этот код предотвратит отправку формы, когда пользователь нажмет кнопку отправки, и вместо этого выведет сообщение на консоль.

Использование обработчиков событий для изменения состояния компонента

В React вы можете использовать обработчики событий для изменения состояния компонента, вызвав метод setState. Метод setState принимает объект или функцию, которая возвращает объект, и обновляет состояние компонента новыми значениями.

Вот пример использования обработчика событий для изменения состояния компонента:

class Counter extends React.Component {
  state = {
    count: 0,
  };

  handleIncrement = () => {
    this.setState((state) => ({
      count: state.count + 1,
    }));
  };

  handleDecrement = () => {
    this.setState((state) => ({
      count: state.count - 1,
    }));
  };

  render() {
    return (
      <div>
        <button onClick={this.handleIncrement}>+</button>
        <p>{this.state.count}</p>
        <button onClick={this.handleDecrement}>-</button>
      </div>
    );
  }
}

Этот компонент определяет объект состояния со свойством count и определяет два обработчика событий для увеличения и уменьшения счетчика. Метод render компонента возвращает элемент div с тремя дочерними элементами: кнопкой для увеличения счетчика, абзацем для отображения счетчика и кнопкой для уменьшения счетчика.

Когда пользователь нажимает одну из кнопок, вызывается соответствующий обработчик события. Обработчик событий использует метод setState для обновления свойства count в объекте состояния. Это вызывает повторную визуализацию компонента, и новое значение счетчика отображается в абзаце.

Предотвращение поведения событий по умолчанию и использование объектов событий

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

Вот пример того, как предотвратить стандартное поведение события отправки формы и получить доступ к объекту event:

import React from 'react';

class MyForm extends React.Component {
  handleSubmit = (event) => {
    event.preventDefault();
    console.log(event.target.elements.username.value);
  };

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          username:
          <input type="text" name="username" />
        </label>
        <button type="submit">submit</button>
      </form>
    );
  }
}

Этот компонент определяет обработчик событий handleSubmit, который предотвращает поведение по умолчанию для события отправки формы и записывает значение элемента ввода username в консоль. Метод компонента render возвращает форму с меткой, элементом ввода и кнопкой отправки.

Когда пользователь отправляет форму, нажимая кнопку отправки, вызывается обработчик события handleSubmit. Обработчик событий вызывает метод preventDefault объекта event, чтобы предотвратить отправку формы, и обращается к значению элемента ввода username с помощью выражения event.target.elements.username.value.

Глава 6: Списки и ключи

Отображение списков данных в компоненте

В React вы можете отображать списки данных в компоненте, используя метод map для перебора данных и возврата списка элементов.

Вот пример того, как отобразить список данных в компоненте:

import React from 'react';

const names = ['Alice', 'Bob', 'Charlie'];

function NameList() {
  return (
    <ul>
      {names.map((name) => (
        <li key={name}>{name}</li>
      ))}
    </ul>
  );
}

Этот компонент определяет массив имен и компонент NameList, который возвращает элемент ul со списком элементов li в качестве дочерних элементов. Метод map перебирает массив names и возвращает элемент li для каждого имени.

Элементы li генерируются с помощью функции стрелки, которая возвращает элемент с именем в качестве содержимого. Свойство key используется для присвоения каждому элементу li уникального идентификатора. Это важно для производительности, поскольку позволяет React оптимизировать отрисовку списка за счет минимизации количества обновлений DOM.

Понимание ключей и как их использовать

В React key — это уникальный идентификатор, который можно использовать для оптимизации отображения списков элементов. Когда вы визуализируете список элементов, React использует свойство key, чтобы определить, какие элементы были изменены, добавлены или удалены, и соответствующим образом обновляет DOM.

Вот пример использования реквизита key:

import React from 'react';

const names = ['Alice', 'Bob', 'Charlie'];

function NameList() {
  return (
    <ul>
      {names.map((name) => (
        <li key={name}>{name}</li>
      ))}
    </ul>
  );
}

Этот компонент определяет массив имен и компонент NameList, который возвращает элемент ul со списком элементов li в качестве дочерних элементов. Метод map перебирает массив names и возвращает элемент li для каждого имени.

Элементы li генерируются с помощью функции стрелки, которая возвращает элемент с именем в качестве содержимого. Свойство key установлено на имя, которое дает каждому элементу li уникальный идентификатор. Это позволяет React оптимизировать отрисовку списка, сводя к минимуму количество обновлений DOM.

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

Использование map() для преобразования данных в список компонентов

В React вы можете использовать метод map для преобразования данных в список компонентов, вызывая функцию, которая возвращает компонент для каждого элемента данных.

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

import React from 'react';

const names = ['Alice', 'Bob', 'Charlie'];

function NameList() {
  return (
    <ul>
      {names.map((name) => (
        <Name key={name} name={name} />
      ))}
    </ul>
  );
}

function Name({ name }) {
  return <li>{name}</li>;
}

Этот код определяет массив имен и компонент NameList, который возвращает элемент ul со списком компонентов Name в качестве дочерних элементов. Компонент Name принимает свойство name и возвращает элемент li с именем в качестве содержимого.

Метод map перебирает массив names и вызывает функцию Name для каждого имени, передавая имя в качестве реквизита name. Это генерирует список компонентов Name, которые отображаются как список элементов li.

Глава 7: Формы

Создание и обработка ввода формы в React

В React вы можете создавать и обрабатывать входные данные формы, используя элементы form, input и button и указывая обработчики событий для событий submit и change.

Вот пример того, как создать и обработать ввод формы в React:

import React from 'react';

class MyForm extends React.Component {
  state = {
    username: '',
  };

  handleChange = (event) => {
    this.setState({
      username: event.target.value,
    });
  };

  handleSubmit = (event) => {
    event.preventDefault();
    console.log(this.state.username);
  };

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          username:
          <input
            type="text"
            name="username"
            value={this.state.username}
            onChange={this.handleChange}
          />
        </label>
        <button type="submit">submit</button>
      </form>
    );
  }
}

Этот компонент определяет объект состояния со свойством username и компонентом MyForm, который возвращает форму с меткой, элементом ввода и кнопкой отправки.

Элемент ввода имеет свойство value, для которого установлено значение свойства username в объекте состояния, и у него есть обработчик событий onChange, который обновляет свойство username в состоянии, когда пользователь вводит элемент ввода.

Форма имеет обработчик событий onSubmit, который предотвращает поведение по умолчанию для события отправки формы и записывает свойство username в консоль.

Проверка данных формы

Проверка данных формы является важной частью обеспечения точности и полноты данных, введенных пользователем. В React вы можете проверять данные формы, используя комбинацию атрибута pattern элемента input и пользовательских обработчиков событий.

Вот пример проверки данных формы в React:

import React from 'react';

class MyForm extends React.Component {
  state = {
    username: '',
    password: '',
    passwordError: '',
  };

  handleChange = (event) => {
    this.setState({
      [event.target.name]: event.target.value,
    });
  };

  handleSubmit = (event) => {
    event.preventDefault();

    // Validate password
    if (this.state.password.length < 8) {
      this.setState({
        passwordError: 'Password must be at least 8 characters long',
      });
      return;
    }

    // Submit form
    console.log(this.state.username, this.state.password);
  };

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          username:
          <input
            type="text"
            name="username"
            value={this.state.username}
            onChange={this.handleChange}
          />
        </label>
        <br />
        <label>
          password:
          <input
            type="password"
            name="password"
            value={this.state.password}
            onChange={this.handleChange}
          />
          {this.state.passwordError && (
            <p style={{ color: 'red' }}>{this.state.passwordError}</p>
          )}
        </label>
        <br />
        <button type="submit">submit</button>
      </form>
    );
  }
}

Этот компонент определяет объект состояния со свойствами username, password и passwordError, а также компонент MyForm, который возвращает форму с двумя элементами ввода и кнопкой отправки.

Элементы ввода имеют onChange обработчиков событий, которые обновляют соответствующие свойства в состоянии, когда пользователь вводит элементы ввода. Форма имеет обработчик событий onSubmit, который предотвращает поведение по умолчанию для события отправки формы и проверяет пароль.

Если длина пароля меньше 8 символов, для свойства passwordError в состоянии устанавливается сообщение об ошибке, а отправка формы останавливается путем возврата из обработчика событий. Если пароль содержит не менее 8 символов, отправка формы продолжается, а свойства username и password записываются в консоль.

Свойство passwordError также используется для отображения сообщения об ошибке, если оно задано. Сообщение об ошибке отображается с использованием элемента p, который отображается только в том случае, если свойство passwordError истинно.

​

Отправка данных формы и работа с асинхронными запросами

Отправка данных формы и работа с асинхронными запросами — обычная задача при создании веб-приложений. В React вы можете отправлять данные формы и делать асинхронные запросы, используя функцию fetch или библиотеку, например Axios.

Вот пример отправки данных формы и выполнения асинхронного запроса с помощью функции fetch:

import React from 'react';

class MyForm extends React.Component {
  state = {
    username: '',
    password: '',
    isLoading: false,
    error: null,
  };

  handleChange = (event) => {
    this.setState({
      [event.target.name]: event.target.value,
    });
  };

  handleSubmit = (event) => {
    event.preventDefault();

    this.setState({ isLoading: true });

    // Submit form data
    fetch('/login', {
      method: 'POST',
      body: JSON.stringify({
        username: this.state.username,
        password: this.state.password,
      }),
    })
      .then((response) => response.json())
      .then((data) => {
        if (data.error) {
          this.setState({
            isLoading: false,
            error: data.error,
          });
        } else {
          this.setState({
            isLoading: false,
            error: null,
          });
        }
      })
      .catch((error) => {
        this.setState({
          isLoading: false,
          error: error.message,
        });
      });
  };

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          username:
          <input
            type="text"
            name="username"
            value={this.state.username}
            onChange={this.handleChange}
          />
        </label>
        <br />
        <label>
          password:
          <input
            type="password"
            name="password"
            value={this.state.password}
            onChange={this.handleChange}
          />
        </label>
        <br />
        {this.state.isLoading ? (
          <p>Loading...</p>
        ) : (
          <button type="submit">submit</button>
        )}
        {this.state.error && <p style={{ color: 'red' }}>{this.state.error}</p>}
      </form>
    );
  }
}

Этот компонент определяет объект состояния со свойствами username, password, isLoading и error, а также компонент MyForm, который возвращает форму с двумя элементами ввода, кнопкой отправки и индикатором загрузки.

Элементы ввода имеют onChange обработчиков событий, которые обновляют соответствующие свойства в состоянии, когда пользователь вводит элементы ввода. Форма имеет обработчик событий onSubmit, который предотвращает стандартное поведение события отправки формы и выполняет асинхронный запрос с помощью функции fetch.

Функция fetch отправляет запрос POST в конечную точку /login со свойствами username и password в качестве тела запроса. Затем ответ анализируется как JSON и проверяется на наличие свойства error. Если свойство error существует, оно устанавливается в значение свойства error в состоянии. Если свойство error не существует, свойство error в состоянии устанавливается равным null.

Свойство isLoading используется для отображения индикатора загрузки во время выполнения асинхронного запроса. Свойство error используется для отображения сообщения об ошибке, если оно установлено.

Глава 8: Маршрутизация

Что такое маршрутизация и почему она полезна?

Маршрутизация — это процесс сопоставления URL-адреса с определенным представлением или компонентом в веб-приложении. Это полезно, потому что позволяет создавать несколько представлений или компонентов, к которым можно получить доступ по разным URL-адресам, и позволяет указать, какое представление или компонент следует отображать на основе текущего URL-адреса.

Например, рассмотрим веб-приложение с домашней страницей, страницей сведений и страницей контактов. Без маршрутизации вам нужно было бы создать одно представление или компонент, включающий весь контент для всех трех страниц, и пользователю пришлось бы перемещаться по контенту, чтобы найти интересующую его страницу.

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

Маршрутизация также полезна для обработки динамических маршрутов, когда URL-адрес включает параметры, определяющие, какое представление или компонент следует отображать. Например, у вас может быть страница продукта, на которой отображается информация о конкретном продукте на основе его идентификатора. Идентификатор продукта может быть включен в URL-адрес в качестве параметра, и система маршрутизации может использовать идентификатор для получения правильного продукта и отображения его пользователю.

Настройка маршрутизации в приложении React

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

Вот пример того, как настроить маршрутизацию в приложении React с помощью React Router:

1. Установите React-маршрутизатор:

npm install react-router-dom

1. Импортируйте компоненты Router, Route и Link из React Router в корневой компонент:

import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

1. Оберните корневой компонент компонентом Router:

function App() {
  return (
    <Router>
      {/* Your routes go here */}
    </Router>
  );
}

1. Определите свои маршруты с помощью компонента Route:

function App() {
  return (
    <Router>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
      <Route path="/contact" component={Contact} />
    </Router>
  );
}

1. Создайте навигационные ссылки с помощью компонента Link:

function App() {
  return (
    <Router>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/contact">Contact</Link>
          </li>
        </ul>
      </nav>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
      <Route path="/contact" component={Contact} />
    </Router>
  );
}

В этом примере настраивается простая система маршрутизации с тремя маршрутами: домашний маршрут, маршрут о маршруте и контактный маршрут. Каждый маршрут сопоставляет определенный путь URL с соответствующим компонентом. Свойство exact домашнего маршрута гарантирует, что домашний маршрут сопоставляется только тогда, когда URL-путь точно равен /.

Меню навигации включает Link компонентов, которые позволяют пользователю перемещаться по различным маршрутам. Когда пользователь щелкает ссылку, URL-адрес обновляется и отображается соответствующий маршрут.

1. Определите компоненты маршрута:

function Home() {
  return <h1>Home</h1>;
}

function About() {
  return <h1>About</h1>;
}

function Contact() {
  return <h1>Contact</h1>;
}

1. Экспортируйте корневой компонент:

export default App;

Вот и все! Теперь у вас должна быть работающая система маршрутизации в вашем приложении React. При необходимости вы можете добавить дополнительные маршруты и компоненты, а также использовать компонент Link для создания навигационных ссылок на различные маршруты.

Навигация между маршрутами и передачей параметров

Для навигации между маршрутами в приложении React с помощью React Router вы можете использовать компонент Link. Компонент Link используется для создания навигационных ссылок, которые обновляют URL-адрес и отображают соответствующий маршрут при нажатии.

Чтобы передать параметры маршруту, вы можете включить их в URL-адрес в виде строки запроса или в качестве параметров пути.

Вот пример того, как перемещаться между маршрутами и параметрами передачи с использованием компонента Link и параметров пути:

import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

function App() {
  return (
    <Router>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/products">Products</Link>
          </li>
        </ul>
      </nav>
      <Route exact path="/" component={Home} />
      <Route path="/products/:productId" component={Product} />
    </Router>
  );
}

function Home() {
  return <h1>Home</h1>;
}

function Product({ match }) {
  const { productId } = match.params;
  return <h1>Product {productId}</h1>;
}

В этом примере определяется система маршрутизации с двумя маршрутами: домашним маршрутом и маршрутом продуктов. Маршрут продуктов включает параметр пути :productId, который используется для указания идентификатора продукта для отображения.

Меню навигации включает Link компонентов, которые позволяют пользователю переходить к домашнему маршруту и ​​маршруту продуктов. Компонент Link для маршрута продуктов включает реквизит to, который указывает путь URL-адреса с параметром productId.

Компонент Product получает параметр productId от объекта match.params, который передается компоненту React Router в качестве реквизита. Затем компонент Product отображает параметр productId в пользовательском интерфейсе.

Глава 9: Расширенные темы

Работа с контекстным API React

React context API — это способ передачи данных через дерево компонентов без необходимости вручную передавать реквизиты на каждом уровне. Это полезно в случаях, когда вам нужно передать данные глубоко вложенным компонентам, которые не связаны напрямую в иерархии компонентов.

Чтобы использовать контекстный API, вам потребуется создать объект контекста и предоставить его компонентам, которым необходим доступ к данным. Вот пример того, как создать объект контекста и использовать его для передачи данных глубоко вложенному компоненту:

import React, { createContext } from 'react';

const MyContext = createContext();

function App() {
  const data = {
    user: 'John',
    age: 30,
  };

  return (
    <MyContext.Provider value={data}>
      <div>
        <p>I am a parent component</p>
        <Child />
      </div>
    </MyContext.Provider>
  );
}

function Child() {
  return (
    <div>
      <p>I am a child component</p>
      <Grandchild />
    </div>
  );
}

function Grandchild() {
  return (
    <MyContext.Consumer>
      {(context) => (
        <div>
          <p>I am a grandchild component</p>
          <p>My name is {context.user} and I am {context.age} years old</p>
        </div>
      )}
    </MyContext.Consumer>
  );
}

В этом примере компонент App создает объект контекста с помощью функции createContext и заключает компонент Child в компонент MyContext.Provider. Компонент MyContext.Provider указывает значение объекта контекста, используя свойство value.

Компоненты Child и Grandchild вложены внутрь компонента MyContext.Provider, поэтому они имеют доступ к объекту контекста. Компонент Grandchild отображает данные контекста, заключая функциональный компонент в компонент MyContext.Consumer и получая доступ к объекту контекста с помощью аргумента функции.

Использование хуков React

Хуки React — это способ использовать состояние и другие функции React в функциональных компонентах. Они были представлены в React 16.8 и стали популярным способом написания компонентов React, поскольку позволяют писать компоненты более кратким и удобным для повторного использования способом.

Вот пример использования хука useState для добавления состояния к функциональному компоненту:

import React, { useState } from 'react';

function Example() {
  // Declare a state variable and a function to update it
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

В этом примере хук useState вызывается с начальным значением состояния 0. Он возвращает массив с двумя элементами: текущее значение состояния и функцию для его обновления. Переменной состояния count присваивается текущее значение состояния, а функция setCount используется для обновления значения состояния.

Компонент отображает кнопку, которая увеличивает переменную состояния count при нажатии. Переменная состояния count отображается в пользовательском интерфейсе с помощью строки шаблона.

В React доступно множество других хуков, в том числе useEffect для выполнения побочных эффектов, useContext для доступа к контекстным данным и useReducer для управления сложными переходами состояний.

Работа с асинхронными данными и обработка ошибок

При работе с асинхронными данными в приложении React обычно используется библиотека, такая как axios или fetch, для выполнения HTTP-запросов к серверу. Вы можете использовать синтаксис async/await или подход на основе Promise для обработки ответа от сервера.

Вот пример того, как использовать async/await для отправки HTTP-запроса и обработки ответа в компоненте React:

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

function Example() {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await axios.get('/api/data');
        setData(response.data);
      } catch (err) {
        setError(err);
      } finally {
        setLoading(false);
      }
    }

    fetchData();
  }, []);

  if (loading) {
    return <p>Loading...</p>;
  }

  if (error) {
    return <p>Error: {error.message}</p>;
  }

  return (
    <div>
      <p>Data: {data}</p>
    </div>
  );
}

В этом примере компонент использует хук useState для управления переменными состояния data, error и loading. Он использует хук useEffect для выполнения HTTP-запроса к серверу при монтировании компонента.

Функция fetchData использует синтаксис async/await для создания HTTP-запроса и обработки ответа. Если запрос выполнен успешно, response.data сохраняется в переменной состояния data. Если запрос не выполнен, ошибка сохраняется в переменной состояния error.

Компонент отображает сообщение о загрузке во время выполнения запроса, сообщение об ошибке, если произошла ошибка, и данные, если запрос был успешным.

Создание и развертывание приложения React

Чтобы создать и развернуть приложение React, вам необходимо выполнить следующие шаги:

1. Установите необходимые зависимости:

npm install -g create-react-app

1. Создайте новое приложение React:

create-react-app my-app

1. Создайте приложение для производства:

cd my-app
npm run build

Это создаст каталог build с скомпилированной и оптимизированной версией вашего приложения.

1. Настройте сервер:

• Если вы используете сервер вроде Node.js с Express, вы можете обслуживать каталог build с помощью промежуточного ПО static:

const express = require('express');
const path = require('path');

const app = express();

app.use(express.static(path.join(__dirname, 'build')));

app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

app.listen(3000, () => {
  console.log('Server listening on port 3000');
});

• Если вы используете бессерверную платформу, такую ​​как AWS Lambda, вы можете создать функцию, которая обслуживает каталог build, используя библиотеку serverless-http:

const serverless = require('serverless-http');
const express = require('express');
const path = require('path');

const app = express();

app.use(express.static(path.join(__dirname, 'build')));

app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

module.exports.handler = serverless(app);

1. Разверните приложение:

• Если вы используете такой сервер, как Node.js, вы можете развернуть приложение на хостинге, таком как Heroku или AWS EC2.
• Если вы используете бессерверную платформу, такую ​​как AWS Lambda, вы можете использовать команду serverless deploy для развертывания приложения в облаке.

Счастливого кодирования

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

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

Продолжайте практиковаться и создавать проекты, и всегда стремитесь улучшить свои навыки и знания. Благодаря усердной работе и самоотверженности вы сможете создавать удивительные вещи с помощью React и станете уверенным в себе и опытным разработчиком.

Спасибо, что прочитали эту книгу, и я надеюсь, что она вдохновила вас на создание и создание с помощью React. Удачи на пути разработчика!