В последнее время я изучаю 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.
Если вы нашли эту статью полезной, нажмите кнопку 👏. Если есть сомнения, оставьте комментарий ниже, буду рад помочь :)