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

Метод 1: использование «create-react-app» (рекомендуется)
Самый простой и популярный способ создания приложения React — использование инструмента командной строки «create-react-app». Он устанавливает новый проект React с предварительно настроенной средой разработки. Чтобы создать приложение React, откройте терминал и выполните следующую команду:

npx create-react-app my-app

Эта команда создаст новый каталог с именем «my-app» и установит все необходимые зависимости. После завершения установки вы можете перейти в каталог проекта и запустить сервер разработки с помощью следующих команд:

cd my-app
npm start

Метод 2: ручная настройка с помощью npm
Если вы предпочитаете больше контроля над настройкой проекта, вы можете вручную создать приложение React с помощью npm. Выполните следующие действия:

Шаг 1. Инициализируйте новый проект NPM

mkdir my-app
cd my-app
npm init -y

Шаг 2. Установите React и React DOM

npm install react react-dom

Шаг 3. Создайте необходимые файлы и папки.
Создайте файл index.htmlи папку src. Внутри папки srcсоздайте файл index.js.

Шаг 4. Настройка Babel и Webpack
Установите необходимые пакеты Babel и Webpack:

npm install @babel/core @babel/preset-react babel-loader webpack webpack-cli --save-dev

Создайте файл babel.config.jsи добавьте следующую конфигурацию:

module.exports = {
  presets: ['@babel/preset-react']
};

Создайте файл webpack.config.jsи настройте его в соответствии с требованиями вашего проекта.

Шаг 5. Напишите код React
В папке srcсоздайте компонент React в файле index.js. Вот пример:

import React from 'react';
import ReactDOM from 'react-dom';
function App() {
  return <h1>Hello, React!</h1>;
}
ReactDOM.render(<App />, document.getElementById('root'));

Шаг 6. Создайте и запустите приложение.
Добавьте сценарий сборки в файл package.json:

"scripts": {
  "build": "webpack --mode production"
}

Создайте приложение:

npm run build

Откройте файл index.htmlв браузере, чтобы увидеть свое приложение React в действии.

В этой статье мы рассмотрели два метода создания приложения React с использованием npm. Первый метод, использующий «create-react-app», является рекомендуемым подходом, поскольку он устанавливает проект React с минимальной конфигурацией. Второй метод допускает большую настройку и включает ручную установку React, а также настройку Babel и Webpack. Независимо от выбранного вами метода, npm предоставляет удобный способ управления зависимостями и оптимизации процесса разработки React.