Обратите внимание: это НЕ статья типа «Введение в React.js». Учитывая, что вы уже знаете, что это такое, я здесь, чтобы поделиться своим опытом настройки React.js с Babel и Webpack на простом примере «Hello world», который поможет вам начать работу.

Я начал свою профессиональную карьеру в качестве разработчика PHP и JavaScript, и я всегда хотел изучить React.js, потому что он был модным, минимальным и решал серьезную проблему во внешнем интерфейсе. Проблема заключалась в том, что это утомительный процесс настройки и список пакетов, которые нужно запомнить. Я никогда не думал, что печать «Hello World» может быть настолько утомительной, поэтому я начал терять интерес после первой попытки.
Через некоторое время Facebook представил инструмент командной строки create-react-app, который устраняет все проблемы конфигурации, решение в один клик. Я установил его, попробовал, и он мне понравился. Поэтому в свободное время я начал создавать небольшое приложение, чтобы разобраться в нем, и, в конце концов, я начал чувствовать потребность в дополнительной настройке и настройке. Поскольку «create-react-app» абстрагируется от всех основных потребностей конфигурации React.js, продвигаться вперед с этой настройкой оказалось сложно. Я понял, что пришло время научиться трудному пути, которого я так долго пытался избегать.
Итак, я погрузился, начал изучать Webpack и Babel, попытался понять, что они делают и как они связаны с React.js, и постепенно это стало более понятным.
Чтобы узнать больше, я погуглил и обнаружил, что существует множество подходов к созданию приложения React. Я начал экспериментировать с ними и получил комбинированное и общее решение, которое можно читать, использовать повторно и, самое главное, с минимальной конфигурацией (в большинстве случаев разработки приложений). Я намерен поделиться здесь настройкой и объяснить каждую деталь в процессе создания простого «Hello world!» пример. Мы собираемся использовать Babel и Webpack вместе с React для его создания.

Обратите внимание: Webpack и Babel являются зависимостями от разработчиков, т. е. нам не нужны в производственном режиме.

1.1 - Зачем нам Вавилон?

Ответ прост - для последней поддержки синтаксиса ECMAScript (например, ES5, ES6). Сама библиотека React.js настаивает на использовании последних предложений JavaScript для более чистого, менее читаемого и читаемого кода. Но, к сожалению, наши браузеры не понимают большую часть синтаксиса, и здесь нам нужна помощь Babel. Он отвечает за преобразование кода ES5 и ES6 в код, понятный браузеру, в основном с обратной совместимостью. Решает нашу проблему (так что вам нужно знать синтаксис ES5 и ES6 для разработки приложений React.js, если вы этого не сделаете).
Мы собираемся использовать следующие пакеты Babal:

  1. babel-core: название предполагает, что основной движок плагина babel для работы его зависимых компонентов.
  2. babel-preset-env: это часть поддержки ES5 и ES6.
  3. babel-preset-react: Babel можно использовать в любом фреймворке, которому требуется новейшая поддержка синтаксиса JS, в нашем случае это «React», отсюда и этот пресет.
  4. babel-loader: считайте это мостом для связи между Webpack и Babel.

1.2 - Зачем нужен Webpack?

Что ж, нам не обязательно нужен webpack для работы с React, другими альтернативами могут быть Browserify, Parsel, Brunch и т. Д., Но, честно говоря, я не знаю, насколько хорошо они подходят для React.js. Webpack - наиболее широко используемый и признанный сборщик модулей и средство выполнения задач в сообществе React.js. Вы найдете решения для большинства проблем, связанных с этим, его сообщество активно. Кроме того, это довольно просто и минимально. Так почему бы не Webpack. Его пакеты нам нужны по следующим причинам:

  1. webpack: основной плагин webpack как движок для своих иждивенцев.
  2. webpack-cli: для доступа к некоторым командам webpack через интерфейс командной строки, таким как запуск сервера разработки, создание производственной сборки и т. д.
  3. webpack-dev-server: минимальный сервер, предназначенный только для разработки на стороне клиента.
  4. html-webpack-plugin: поможет в создании HTML-шаблонов для нашего приложения.

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

2.1— Итак, приступим к созданию приложения.

Предполагая, что в вашей системе установлен Node.js и команды npm доступны через ваш терминал.
Допустим, наш текущий каталог - c:\

  1. Создайте в нем каталог нашего приложения "app" и cd app. Теперь мы внутри директории c:\app
  2. npm init и завершите процесс. package.json должен быть создан внутри (текущего) app каталога
  3. Установите наши основные (зависимости) пакеты React npm i -S react react-dom
    Как видите, есть 2 пакета, react, очевидно, является основным движком фреймворка React.js, и поскольку мы собираемся создать приложение для браузеров, мы используем react-dom.. Мы бы использовали react-native, если бы мы создавали мобильные приложения (что не в нашем случае).
  4. Установите пакеты Babel как зависимость для разработчиков, как описано выше в пункте 1.1
    npm i -D babel-core babel-loader babel-preset-env babel-preset-react
     Babel потребуется небольшая часть конфигурации, мы сделаем это позже.
  5. Установите пакеты Webpack как зависимости разработчика, упомянутые в пункте 1.2
    npm i -D webpack webpack-cli webpack-dev-server html-webpack-plugin
    Webpack требует небольшой настройки, которую мы сделаем позже.

В package.json dependencies и devDependencies должны выглядеть так.

{
 “name”: “client”,
 “version”: “1.0.0”,
 “description”: “”,
 “main”: “index.js”,
 “scripts”: {
 “start”: “”,
 “build”: “”
 },
 “author”: “Austin4Silvers”,
 “license”: “ISC”,
 “dependencies”: {
     “react”: “¹⁶.4.1”,
     “react-dom”: “¹⁶.4.1”
 },
 “devDependencies”: {
     “babel-core”: “⁶.26.3”,
     “babel-loader”: “⁷.1.5”,
     “babel-preset-env”: “¹.7.0”,
     “babel-preset-react”: “⁶.24.1”,
     “html-webpack-plugin”: “³.2.0”,
     “webpack”: “⁴.16.2”,
     “webpack-cli”: “³.1.0”,
     “webpack-dev-server”: “³.1.5”
 }
}

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

3.1 - Настройка Babel

Учитывая, что вы находитесь в c:\app, создайте файл .babelrc здесь, обратите внимание, что имя файла должно быть точно таким же, а содержимое этого файла должно быть следующим:

{"presets":["env", "react"]}

Это файл конфигурации, который ищет babel. Помните, у нас было 2 предустановки babel, установленных на шаге: 4 в разделе: 2.1? Эти пресеты следует упомянуть здесь, чтобы Babel знал.

3.2 - Настройка Webpack

Учитывая, что вы находитесь в каталоге c:\app, создайте файл webpack.config.js, обратите внимание, что имя файла должно быть таким же, его содержимое будет следующим:

01| const path = require(‘path’);
02| const HWP = require(‘html-webpack-plugin’);
03| module.exports = {
04|    entry: path.join(__dirname, ‘/src/index.js’),
05|    output: {
06|        filename: ‘build.js’,
07|        path: path.join(__dirname, ‘/dist’)},
08|    module:{
09|        rules:[{
10|           test: /\.js$/,
11|           exclude: /node_modules/,
12|           loader: ‘babel-loader’
13|        }]
14|    },
15|    plugins:[
16|        new HWP(
17|           {template: path.join(__dirname,‘/src/index.html’)}
18|        )
19|    ]
20| }

Давайте пройдемся по этому webpack.config.js файлу.

  1. Строка № 04 указывает начальную точку приложения. В нашем случае index.js находится внутри c:\app\src каталога, поэтому создайте src каталог внутри app и создайте новый файл index.js. Не будем пока ничего помещать внутрь файла. К настоящему времени у вас должен быть пустой файл c:\app\src\index.js
  2. Точно так же создайте другой файл в том же каталоге c:\app\src и назовите его index.html, пока оставьте файл пустым. Этот файл будет действовать как файл шаблона. Помните, что React.js наиболее известен тем, что создает одностраничные приложения. Итак, вы видите, что это основной HTML-файл шаблона, и предполагается, что содержимое внутри этого файла время от времени меняется всякий раз, когда это необходимо или когда пользователь запрашивает изменение представления. Для реализации этой концепции мы используем пакет html-webpack-plugin, который импортируется в Строке №02.
  3. Строки с № 05 по № 07 В этом разделе мы определили - в производственной среде, каким должно быть имя основного файла (build.js) и где он будет автоматически создан (внутри c:\app\dist).
  4. Строки с №8 по №14 В этом разделе внутри module нам нужно определить rules веб-пакет, к которому нужно привязать.
    Правила в №10, №11, и # 12 указывает webpack искать все .js файлы, за исключением файлов внутри каталога node_modules, с целью переноса кодов ES5, ES6 и использовать для этой цели загрузчик с именем babel-loader.
  5. Строка №15 - №19 - плагины. Если вы используете какие-либо другие плагины, которые необходимо знать Webpack для объединения или транспиляции, вам необходимо нажать ссылку плагина в этом массиве.

Вторая и последняя настройка завершена! Теперь единственное, что у нас осталось, это отображение «Hello world!».

Помните, в разделе 3.2, пункте 1 мы создали два файла index.html и index.js и оставили их пустыми?

Начнем с добавления содержимого в c:\app\src\index.html файл:

<!DOCTYPE html>
<html lang=”en”>
<head>
 <meta charset=”UTF-8">
     <meta name=”viewport” content=”width=device-width, initial-scale=1.0">
     <meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
     <title>React app</title>
</head>
<body>
      <div id=”root”></div>
</body>
</html>

Примечание. Единственная важная часть, на которую следует обратить внимание, - это <div> с идентификатором root. Неважно, насколько большим будет ваше приложение, все, что вы увидите в браузере, будет находиться внутри этого div.

Затем давайте добавим React-часть приложения в файл c:\app\src\index.js

01| import React from ‘react’;
02| import ReactDOM from ‘react-dom’;
03| const App = () => (
04|   <div>
05|      <h1>Hello world!!</h1>
06|   </div>
07| )
08| ReactDOM.render(<App/>, document.getElementById(‘root’));

Если вы посмотрите на раздел 3.2 (настройка веб-пакета), в webpack.config.js мы проинформировали веб-пакет, что этот файл index.js внутри \src каталога является точкой входа в приложение (строка # 4 файла webpack.config.js)
и
Использовать index.html внутри \src каталога в качестве основного файла шаблона.

Основная часть файла - это строка # 08. render() функция определена в пакете react-dom, который отвечает за отрисовку компонентов в браузере. Эта строка указывает react-dom отобразить компонент <App/> в элементе DOM с id="root"

Строка с №03 по №07 - const Приложение - это функция, которая возвращает «Hello world ” внутри div (к сведению: этот странный XML-код внутри функции JS называется синтаксисом JSX, если вы впервые используете React.js), который отображается в <div id="root"></div>, определенном в c:\app\src\index.html.

Приложение готово! Теперь все, что нам нужно сделать, это запустить webpack-dev-server, чтобы увидеть наш «Hello world». Для этого откроем файл package.json из c:\app\package.json и обновим в нем индекс «скрипты»:

“scripts”: {
   “start”: “webpack-dev-server --mode development --open --hot”,
   “build”: “webpack --mode production”
},

Это говорит: если мы запускаем npm start, webpack-dev-server запускает приложение в режиме = разработка, а затем отображает (- открыть) его в ваш браузер по умолчанию автоматически и следите за любыми изменениями, внесенными в приложение (- hot).
Когда запускается npm run build, используйте webpack для создания готового к работе построить в c:\app\dist каталог. Выполнено!

Вот пример, на который вы ссылаетесь:
https://github.com/SiddharthaChowdhury/react-app-example