Инструкция по созданию первого React проекта

Введение

React — библиотека для создания пользовательских интерфейсов, которую разработала компания Facebook. Сегодня React широко применяется для создания веб-приложений с динамическим обновлением страниц. Если вы только начинаете работать с фронтендом или уже знакомы с JavaScript, но ещё не использовали React — данная статья поможет вам сделать свой первый шаг: окутит вас базовой теорией, проведёт через весь процесс установки и инициализации и объяснит, как устроено самое первое приложение.

В этой инструкции вы увидите:

• Как подготовить среду для работы
• Как создать новый проект на React
• Как устроено начальное приложение и его структура файлов
• Как запускать проект и вносить первые изменения

Всё это будет показано максимально просто и понятно, с пояснениями каждого шага.

Установка необходимых инструментов

Перед тем, как приступить к созданию вашего первого React-проекта, убедитесь, что у вас установлены необходимые инструменты на компьютере. На данный момент React требует наличия NodeJS и npm.

Проверяем NodeJS и npm

NodeJS нужен для запуска JavaScript вне браузера, а npm — менеджер пакетов, с которым вы сможете добавлять в проект сторонние библиотеки.

Чтобы проверить, установлены ли NodeJS и npm, введите в терминале:

node -v
npm -v

Если вы увидели номера версий — всё готово к работе.

Создание первого React-проекта - важный момент для начинающих разработчиков. Это позволяет увидеть, как React работает на практике, и получить первый опыт работы с библиотекой. Если вам нужна подробная инструкция по созданию первого React-проекта, от установки зависимостей до запуска приложения — приходите на наш большой курс Основы React, React Router и Redux Toolkit. На курсе 177 уроков и 17 упражнений, AI-тренажеры для безлимитной практики с кодом и задачами 24/7, решение задач с живым ревью наставника, еженедельные встречи с менторами.

Устанавливаем NodeJS и npm

Если команд нет или они не возвращают версию, скачайте установщик с официального сайта NodeJS. Установщик автоматически установит и NodeJS, и npm. Просто скачайте LTS-версию и пройдите стандартную установку.

Зачем нужен пакетный менеджер?

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

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

Самый популярный и быстрый способ создать новый React-проект — использовать инструмент Create React App.

С помощью Create React App

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

Шаг 1. Открываем терминал

Для этого можно воспользоваться командной строкой (Windows) или Terminal (MacOS, Linux).

Шаг 2. Запуск команды создания проекта

Выполните команду (замените my-first-react-app на название вашей папки):

npx create-react-app my-first-react-app

• npx — утилита для запуска пакетов без их предварительной установки.
• create-react-app — сама утилита.
• my-first-react-app — папка, в которой будет создан проект.

В результате будет создана новая директория с базовой структурой проекта и всеми необходимыми файлами.

Что делает команда?

• Устанавливает все нужные зависимости.
• Создаёт директорию с файлами исходного кода, настройками, README.
• Позволяет сразу запустить проект и увидеть результат в браузере.

Разбираем структуру созданного проекта

Зайдите в папку проекта:

cd my-first-react-app

Откройте папку в редакторе кода (например, VS Code):

code .

Основные папки и файлы

• public/ — тут лежит статический файл index.html и ваши будущие ресурсы (значки, изображения и т.д.).
• src/ — директория для исходного кода приложения: компоненты, стили, бизнес-логика.
• package.json — содержит информацию о проекте и списке зависимостей.
• node_modules/ — директория для установленных npm-пакетов (не добавляется в git).

Выглядит так (пример):

my-first-react-app/
├── node_modules/
├── public/
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
├── src/
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   └── logo.svg
├── package.json
├── README.md
└── yarn.lock (или package-lock.json)

Ключевые файлы

• src/App.js — основной компонент приложения. Здесь вы будете писать свой код.
• src/index.js — точка входа, файл, который монтирует ваше React-приложение в DOM на странице.

Смотрите, пример кода из App.js:

import React from 'react'; // Импорт React

// Объявляем компонент App
function App() {
  return (
    <div className="App">
      <h1>Привет, React!</h1>
      {/* Добавим элемент чтобы познакомиться с JSX */}
      <p>Это ваш первый React-компонент.</p>
    </div>
  );
}

export default App; // Экспортируем компонент для использования в index.js

Запуск проекта

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

Как запустить приложение?

1. Перейдите в корневую папку вашего проекта (если ещё не в ней):

    cd my-first-react-app

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

    npm start

После этой команды:

• Откроется новый таб в браузере по адресу http://localhost:3000/
• Вы увидите стартовую страницу с логотипом React.

Как это работает?

Когда вы редактируете какой-либо код в src/ (например, меняете текст заголовка), страница в браузере будет автоматически обновляться. Это происходит благодаря "горячей перезагрузке" — удобная особенность среды разработки React.

Первые шаги: изменяем компонент

Пора сделать первую модификацию. Например, давайте поменяем текст, выводящийся на главной странице.

1. В редакторе кода откройте файл src/App.js.

2. Найдите строку с <h1>Привет, React!</h1> и измените её, например, так:

    <h1>Мой первый React-проект!</h1>

3. Сохраните файл.

Посмотрите в браузере: страница автоматически обновится и ваше новое сообщение появится сразу же.

Обратите внимание

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

Пример создания нового компонента

Допустим, вы хотите создать свой компонент "Приветствие".

1. В папке src/ создайте файл Greeting.js.

2. Допишите в него код:

    import React from 'react';
   
    function Greeting(props) {
      // Спользуйте props для передачи данных
      return <p>Здравствуйте, {props.name}!</p>;
    }
   
    export default Greeting;

3. Импортируйте новый компонент в App.js и используйте его:

    import Greeting from './Greeting'; // Импорт нового компонента
   
    function App() {
      return (
        <div className="App">
          <h1>Мой первый React-проект!</h1>
          <Greeting name="Алексей" /> {/* Вставляем компонент Greeting */}
        </div>
      );
    }

Сохраните файлы. На странице появится строка "Здравствуйте, Алексей!".

Понимание JSX: что это и зачем нужен

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

Пример:

const element = <h2>Привет, мир!</h2>; // Это JSX, но под капотом - это JS-объект

Можно использовать JavaScript прямо внутри JSX:

const name = "Наталья";
const message = <p>Привет, {name}!</p>; // Переменная 'name' подставится прямо в разметку

Почему это удобно?

• Позволяет писать компоненты компактно и читаемо.
• Легко комбинировать логику и разметку.
• Можно динамически формировать то, что видно на экране.

Важные нюансы JSX

• Используется только один корневой элемент внутри return. Для нескольких элементов оберните их в <div> или React.Fragment.
• В JSX все атрибуты пишутся по правилам JavaScript: например, className вместо class, htmlFor вместо for.
• Все вложенные выражения оборачиваются в фигурные скобки {}.

Работа со стилями

В React можно подключать стили по-разному. Самый простой способ — использовать CSS-файл.

В вашем проекте уже есть src/App.css, который подключён в App.js:

import './App.css'; // Импортируем CSS стили

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

.App {
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 10px;
}

Теперь элементы внутри компонента App будут иметь немного другой вид.

Можно использовать и другие способы:

• Inline-стили через объект JS
• CSS-модули
• СSS-in-JS (например, styled-components)

Добавляем простое взаимодействие: счетчик

Теперь давайте создадим более интересное взаимодействие — простой счетчик, чтобы познакомиться с состоянием компонента (state) и обработкой событий.

1. Откройте App.js.
2. Замените код на следующий:

import React, { useState } from 'react';

function App() {
  // Инициализируем состояние счетчика
  const [count, setCount] = useState(0);

  // Функция увеличения значения
  function handleClick() {
    setCount(count + 1);
  }

  return (
    <div>
      <h1>Счетчик: {count}</h1>
      <button onClick={handleClick}>Увеличить</button>
    </div>
  );
}

export default App;

Объяснения:

• useState — специальная функция (хук), задающая переменную состояния (count) и функцию для её изменения (setCount).
• При нажатии на кнопку вызывается handleClick, и счетчик увеличивается.

Как компилируется и работает проект

Создавая проект через Create React App, вы работаете в режиме разработки — он максимально удобный, чтобы быстро видеть изменения. Когда же вы будете готовы показать ваше приложение другим, его нужно будет собрать (скомпилировать) для продакшена.

Как собрать проект для публикации

Выполните:

npm run build

В результате появится папка build/ — она содержит готовое для публикации оптимизированное приложение.

Подробнее о файлах сборки

• Все исходные файлы преобразуются в минифицированный JS.
• Вся разметка внедряется в index.html.
• Отдельные CSS-файлы собираются и оптимизируются.

Как добавить сторонние библиотеки

React хорошо работает с любыми библиотеками из npm. Допустим, вам нужна библиотека для работы с датами, например, dayjs.

npm install dayjs

Теперь её можно подключить и использовать:

import dayjs from 'dayjs';

const now = dayjs().format('YYYY-MM-DD');

Поддерживаем код: linters и форматтеры

Чтобы ваш код был читабельным и единообразным, рекомендую настроить инструменты, такие как ESLint и Prettier.

• ESLint контролирует стиль и возможные ошибки;
• Prettier автоматически форматирует исходный код.

Всё это можно добавить командами:

npm install --save-dev eslint prettier

А дальше в настройках редактора вы можете активировать автоформатирование при каждом сохранении.

Типичные ошибки новичков

• Не экспортируется/не импортируется компонент.
• Используются стандартные HTML-атрибуты вместо JSX-атрибутов (class → className).
• Неправильно организована структура return (две div подряд вне одного контейнера — ошибка!).
• Попытка изменять напрямую переменные состояния (state) вместо передачи изменений через функцию setState/setCount и тд.

Ещё несколько советов:

• Все папки и файлы именуйте логично и последовательно.
• Табуляция и отступы должны быть одинаковыми во всём проекте.
• Не держите слишком много логики в одном файле — разбивайте код на компоненты.

Заключение

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

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

Создание проекта - это только первый шаг. Для разработки потребуется понимание работы с данными и навигацией. На курсе Основы React, React Router и Redux Toolkit вы освоите все необходимые инструменты. В первых 3 модулях уже доступно бесплатное содержание — начните погружаться в основы React уже сегодня.

Частозадаваемые технические вопросы по теме статьи и ответы на них

Как поменять порт разработки на другой, если стандартный 3000 занят?

Остановите сервер (Ctrl+C), затем запустите так:

PORT=4000 npm start

Для Windows используйте: bash set PORT=4000 && npm start Теперь приложение будет доступно на http://localhost:4000.

Как добавить поддержку TypeScript в новый проект React?

При создании проекта добавьте флаг: bash npx create-react-app my-app --template typescript Если проект уже создан — установите TypeScript и соответствующие типы, и переименуйте файлы с .js на .tsx.

Почему изменения не отображаются в браузере?

Проверьте, не выдался ли терминал ошибку. Часто помогает перезапустить (npm start) либо сбросить кэш (удалить node_modules, пересоздать package-lock.json и run npm install).

Как подключить SASS/SCSS для стилизации?

Установите пакет: bash npm install sass Теперь можно создавать файлы с расширением .scss и импортировать их в ваши компоненты как обычные CSS-файлы.

Как обновить версию React после создания проекта?

Выполните: bash npm install react@latest react-dom@latest Если ошибок нет — обновление успешно. Если появляются предупреждения — следуйте советам из терминала или официальной документации.