Руководство по React для начинающих: создайте свой первый пользовательский интерфейс с нуля

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

Почему стоит выбрать React?

React имеет следующие преимущества:

• Компонентность: React разбивает пользовательский интерфейс на независимые, многократно используемые компоненты. Это упрощает поддержку и понимание кода.
• Декларативность: React использует декларативный стиль программирования, что означает, что вам нужно только описать, что вы хотите отобразить, а React автоматически обработает обновления и рендеринг.
• Эффективность: React использует виртуальный DOM и интеллектуальный diff-алгоритм, чтобы эффективно обновлять пользовательский интерфейс, уменьшая ненужный рендеринг.
• Огромная поддержка сообщества: React имеет огромное сообщество и богатую экосистему, где вы можете найти множество учебных пособий, библиотек и инструментов, которые помогут вам в разработке.
• Кроссплатформенность: React Native позволяет использовать React для разработки нативных мобильных приложений (iOS и Android).

Подготовка

Прежде чем начать, убедитесь, что на вашем компьютере установлены следующие инструменты:

• Node.js: Node.js — это среда выполнения JavaScript, используемая для запуска инструментов разработки React. Вы можете скачать и установить ее с https://nodejs.org/.
• npm или yarn: npm (Node Package Manager) и yarn — это менеджеры пакетов JavaScript, используемые для установки и управления зависимостями React. Обычно npm устанавливается вместе с Node.js. yarn можно установить с https://yarnpkg.com/.

Создание вашего первого React-приложения

Мы будем использовать create-react-app, чтобы быстро создать React-проект.

1. Создание с помощью npm:

   npx create-react-app my-first-react-app
   cd my-first-react-app
   npm start
   

2. Создание с помощью yarn:

   yarn create react-app my-first-react-app
   cd my-first-react-app
   yarn start
   

После выполнения приведенных выше команд create-react-app автоматически создаст каталог с именем my-first-react-app и инициализирует в нем React-проект. Команда npm start или yarn start запустит сервер разработки, и вы сможете получить доступ к своему React-приложению в браузере по адресу http://localhost:3000.

Структура каталогов

Структура каталогов проекта, созданного create-react-app, выглядит следующим образом:

my-first-react-app/
├── node_modules/         # Библиотеки, от которых зависит проект
├── public/               # Статические ресурсы (например, HTML файлы)
│   ├── index.html        # Входной HTML файл приложения
│   └── ...
├── src/                  # Исходный код React
│   ├── App.css           # CSS стили компонента App
│   ├── App.js            # Компонент App
│   ├── App.test.js       # Файл тестов для компонента App
│   ├── index.css         # Глобальные CSS стили
│   ├── index.js          # Входной JavaScript файл приложения
│   ├── logo.svg          # Логотип React
│   └── ...
├── .gitignore            # Файл игнорирования Git
├── package.json          # Метаданные и зависимости проекта
├── README.md             # Документация проекта
└── yarn.lock             # Файл блокировки версий зависимостей (если используется yarn)

Понимание React Компонентов

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

В файле src/App.js вы можете увидеть компонент App по умолчанию:

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    
      
        
        
          Edit `src/App.js` and save to reload.
        

        [
          Learn React
        ](https://reactjs.org)
      
    
  );
}

export default App;

Объяснение кода:

• import React from 'react'; Импортирует библиотеку React.
• function App() { ... } Определяет функциональный компонент с именем App.
• return ( ... ) Возвращает JSX выражение, описывающее, что должен рендерить компонент.
• export default App; Экспортирует компонент App, чтобы его можно было использовать в других файлах.

JSX (JavaScript XML)

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

Изменение App Компонента

Давайте изменим компонент App и создадим простой счетчик.

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

function App() {
  const [count, setCount] = useState(0);
  const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return (
    
      

# Счетчик

      Текущий счет: {count}

      +
      -
    
  );
}

export default App;

Пояснения к изменениям:

• import React, { useState } from 'react'; Импортирует Hook useState. useState - это React Hook, используемый для добавления состояния в функциональные компоненты.
• const [count, setCount] = useState(0); Использует Hook useState для создания переменной состояния с именем count и инициализирует ее значением 0. setCount - это функция для обновления состояния count.
• const increment = () => { setCount(count + 1); }; Определяет функцию с именем increment, которая увеличивает состояние count на 1.
• const decrement = () => { setCount(count - 1); }; Определяет функцию с именем decrement, которая уменьшает состояние count на 1.
• Текущий счет: {count} Отображает значение состояния count на странице. {count} - это JSX выражение, используемое для вставки JavaScript переменных в JSX код.
• + и - Создают две кнопки, которые привязаны к функциям increment и decrement соответственно. onClick - это обработчик событий, используемый для выполнения указанной функции при нажатии на кнопку.

После сохранения файла src/App.js браузер автоматически обновится, и вы увидите простой счетчик. Нажатие на кнопку "+" увеличит счет, нажатие на кнопку "-" уменьшит счет.

Использование CSS стилей

Вы можете использовать CSS для улучшения внешнего вида вашего React приложения. create-react-app поддерживает CSS Modules и обычные CSS файлы.

Использование CSS Modules:

CSS Modules позволяют создавать независимые CSS стили для каждого компонента, избегая конфликтов стилей. Чтобы использовать CSS Modules в компоненте, необходимо создать файл с расширением .module.css.

Например, создайте файл с именем App.module.css и добавьте в него следующие CSS стили:

.App {
  text-align: center;
}

.App h1 {
  color: blue;
}

.App button {
  padding: 10px 20px;
  font-size: 16px;
  background-color: lightgreen;
  border: none;
  cursor: pointer;
}

Затем импортируйте CSS Modules в файл src/App.js:

import React, { useState } from 'react';
import styles from './App.module.css'; // Импорт CSS Modules

function App() {
  const [count, setCount] = useState(0);
 const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return (
     {/* Используем объект styles для ссылки на CSS классы */}
      

# Счетчик

      Текущий счет: {count}

      +
      -
    
  );
}

export default App;

Использование обычного CSS файла:

Вы также можете использовать обычный CSS файл для определения глобальных стилей. В файле src/index.css вы можете определить глобальные стили.

Например, добавьте следующие CSS стили:

body {
  font-family: sans-serif;
}

Этот стиль будет применен ко всему элементу body приложения.

Следующий шаг

Поздравляю, вы завершили свое первое React приложение! Далее вы можете узнать больше о React, например:

• Компонентное взаимодействие: Узнайте, как заставить разные компоненты взаимодействовать друг с другом.
• Обработка форм: Узнайте, как создавать и обрабатывать формы.
• Маршрутизация: Узнайте, как использовать React Router для создания многостраничных приложений.
• Redux или Context API: Узнайте, как управлять состоянием приложения.
• Hooks: Углубитесь в React Hooks, например useEffect, useContext и т.д.

Помните, React - это технология, требующая постоянной практики и обучения. Желаю вам приятного обучения!