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

Наверное, нет, поэтому ты здесь. Итак, приступим :)

Начиная:

Перед запуском на вашем компьютере должен быть установлен npm, который идет в комплекте с Node.js, вы можете установить его отсюда.

Структура папки:

Вы можете создать указанные выше каталоги с помощью этих команд.

mkdir react-boilerplate
cd react-boilerplate
mkdir -p src/components src/styles

Инициализировать проект:

Все проекты, использующие диспетчер пакетов узлов (npm), должны быть инициализированы. Чтобы инициализировать проект, введите в терминале команду ниже. Будет создан файл package.json.

npm init

Вам будет задано несколько вопросов, связанных с проектом, вы можете пропустить их, нажав клавишу ВВОД, если вы хотите пропустить все вопросы, добавьте флаг -y.

npm init -y

Теперь ваш файл package.json будет выглядеть примерно так.

{
"name": "react-boilerplate",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}

Установка Webpack:

Webpack - это сборщик модулей, который позволяет нам объединять наши файлы проекта в один файл для производства. Итак, давайте добавим в наш проект веб-пакет.

npm install webpack webpack-cli --save-dev

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

Установка React:

Установите react и react-dom в качестве зависимости.

npm install react react-dom --save

Установка Babel:

Чтобы React работал, нам нужно установить вместе с ним Babel. Нам нужен Babel для переноса ES6 и JSX в ES5.

Установите babel-core, babel-loader, babel-preset-env, babel-preset-react как зависимость разработчика.

npm install @babel/core babel-loader @babel/preset-env @babel/preset-react --save-dev
  • babel-core: преобразует код ES6 в ES5.
  • babel-loader: помощник Webpack для преобразования кода с учетом предустановки.
  • babel-preset-env: предустановка, которая помогает babel преобразовывать код ES6, ES7 и ES8 в ES5.
  • babel-preset-react: пресет, преобразующий JSX в JavaScript.

Index.js:

Создайте файл index.js в корне папки / src, а пока добавьте в него следующий код строки. Этот файл будет точкой входа в наше приложение.

console.log("hello");

Index.html:

Создайте файл index.html в корне папки / src и добавьте в него следующий код.

Входной и выходной файл:

Создайте webpack.config.js в корневом каталоге проекта, чтобы мы могли определять правила для наших загрузчиков.

Определите точку входа и выходной каталог нашего приложения внутри webpack.config.js

В приведенном выше коде Webpack объединит все наши файлы JavaScript в файл index-bundle.js внутри каталога / dist.

Загрузчики Webpack:

Теперь добавьте в этот файл несколько загрузчиков, которые будут отвечать за загрузку и объединение исходных файлов.

Внутри webpack.config.js добавьте следующие строки кода:

Здесь babel-loader используется для загрузки наших файлов JSX / JavaScript, а css-loader используется для загрузки и объединения всех файлов CSS в один файл и стиль -loader добавит все стили в тег стиля документа.

Прежде чем Webpack сможет использовать css-loader и style-loader, мы должны установить их как dev-dependency.

npm install css-loader style-loader --save-dev

Имейте в виду, что webpack выполняет загрузчики от последнего к первому, т.е. справа налево.

.babelrc:

Теперь создайте файл .babelrc в корне каталога проекта со следующим содержимым внутри него.

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

Этот файл сообщит babel, какие предустановки использовать для транспиляции кода. Здесь мы используем две предустановки:

  • env: этот пресет используется для переноса кода ES6 / ES7 / ES8 в ES5.
  • react: этот пресет используется для переноса кода JSX в ES5.

Компиляция файлов с помощью Webpack:

Добавьте следующие строки кода в объект сценария файла package.json, как показано ниже:

"start": "webpack --mode development --watch",
"build": "webpack --mode production"

Здесь я использовал флаг watch, поэтому при каждом изменении исходных файлов webpack автоматически компилирует все исходные файлы.

В webpack 4 есть два режима: рабочий режим, который создает оптимизированные файлы, готовые к использованию в производстве, и режим разработки, который создает легко читаемый код и дает вам лучший опыт разработки. Флаг --mode позволяет нам выбирать, какой режим использовать.

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

npm start

После выполнения вышеуказанной команды вы увидите файл index_bundle.js, созданный в каталоге / dist, который будет содержать транспилированный код ES5 из index .js.

App.js

Создайте файл App.js в папке components папки src со следующим содержимым внутри.

App.css:

Создайте файл App.css в папке styles папки src со следующим содержимым внутри.

Этот файл CSS используется, чтобы убедиться, что css-loader и style-loader работают правильно.

Теперь измените файл index.js, который мы создали ранее, чтобы он содержал следующие строки кода.

Установка плагина Html-webpack:

Теперь нам также нужно установить html-webpack-plugin, этот плагин генерирует файл HTML, вставляет скрипт в файл HTML и записывает этот файл в dist / index.html. .

Установите html-webpack-plugin как dev-dependency:

npm install html-webpack-plugin --save-dev

Теперь нам нужно настроить этот плагин внутри файла webpack.config.js, добавив в него следующие строки кода.

Здесь значением ключа шаблона является файл index.html, который мы создали ранее, и он использует этот файл в качестве шаблона и создает новый файл с именем index.html внутри / dist с внедренным скриптом.

Настройка почти завершена, все, что нам нужно сделать, это скомпилировать исходные файлы с помощью webpack, вы можете запустить проект, используя следующую команду:

npm start

Вы получите вывод в папке / dist проекта. Теперь откройте index.html в веб-браузере, вы увидите текст «My React App!» внутри него.

Но у этого подхода есть обратная сторона: вам нужно вручную обновить веб-страницу, чтобы увидеть внесенные вами изменения. Чтобы webpack отслеживал наши изменения и обновлял веб-страницу при каждом изменении наших компонентов, мы можем установить webpack-dev-server.

Установка Webpack-dev-server:

Установите webpack-dev-server как dev-dependency

npm install webpack-dev-server --save-dev

И измените стартовый скрипт package.json, как показано ниже:

"start": "webpack-dev-server --mode development --open --hot"

Я добавил два флага --open и --hot, которые открывают и обновляют веб-страницу всякий раз, когда в компоненты вносятся какие-либо изменения.

Теперь запустите следующую команду в терминале:

npm start

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

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

Если вы нашли эту статью полезной, нажмите кнопку 👏. Если есть сомнения, оставьте комментарий ниже, буду рад помочь :)