Источник: Nuances of Programming
Недавно я начал изучать React и для создания проектов я использовал create-react-app, чтобы быстро и без особых усилий добиться желаемого результата. Я подозреваю, что вы тоже используете create-react-app или react-slingshot для создания приложений на React. Ничего не имею против этих инструментов — они хорошо справляются с конфигурацией, в то время как у вас есть возможность сосредоточиться на самом React. Но таким ли способом вы хотите изучить React?
Скорее всего нет, иначе вы бы не читали эту статью.
Начало работы:
Перед тем как мы начнем, вам нужно установить менеджер пакетов nmp на свой компьютер. Он входит в состав Node.js, который вы можете скачать отсюда.
Файловая структура:
Вы можете создать указанные выше каталоги с помощью этих команд:
Инициализация проекта:
Все проекты, которые используют nmp, должны быть инициализированы. Для инициализации проекта — введите следующую команду в терминале:
npm init
Это создаст файл package.json
Вам будет предложено ответить на вопросы, касающиеся проекта. Вы можете пропустить их, нажав enter. Если вы хотите пропустить все вопросы разом — добавьте флажок -y:
npm init -y
Теперь файл package.json будет выглядеть примерно так:
Установка Webpack:
Webpack — это модульный сборщик, который позволяет объединять ресурсы и библиотеки, необходимые для проекта, в один файл. Давайте добавим Webpack в наш проект:
npm install webpack webpack-cli --save-dev
Вышеупомянутая команда добавит webpack и webpack-cli в наш проект, в качестве зависимости dev. Мы установили webpack-cli, чтобы у нас появилась возможность использовать webpack в командной строке.
Установка React:
Установим react и react-dom в качестве зависимости.
npm install react react-dom --save
Установка Babel:
Для того чтобы React работал, необходимо вместе с ним установить Babel. Он поможет в транспайлинге ES6 и JSX в ES5.
Установите babel-core, babel-loader, babel-preset-env, babel-preset-react в качестве зависимости dev.
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 папки и добавьте в него следующий код:
Entry и Output файл:
Создайте webpack.config.js в корневом каталоге проекта, чтобы мы могли определить наши webpack loaders.
Определите точку входа и выходной каталог нашего приложения внутри webpack.config.js
В приведенном выше коде, Webpack объединит все наши JavaScript файлы в файл index-bundle.js внутри каталога /dist.
Webpack Loaders:
Теперь добавьте в этот файл loaders, которые будут ответственны за загрузку и объединение исходных файлов.
Внутри webpack.config.js добавьте следующие строки кода:
Здесь babel-loader используется для загрузки наших JSX/JavaScript файлов, css-loader для загрузки и объединения всех CSS файлов в один, а style-loader добавит все стили внутрь тега документа style.
Прежде чем Webpack сможет использовать css-loader и style-loader, мы должны установить их в качестве зависимости dev:
npm install css-loader style-loader --save-dev
Имейте в виду, что Webpack выполняет loaders в обратном порядке: с последнего до первого, то есть справа налево.
.babelrc:
Теперь создайте файл .babelrc внутри корневого каталога проекта, со следующим содержимым:
Данный файл сообщит babel, какие из пресетов использовать для транспайлинга кода. Здесь мы используем два пресета:
- env: Этот пресет используется для транспайлинга кода ES6/ES7/ES8 в ES5.
- react: Этот пресет используется для транспайлинга кода JSX в ES5.
Компиляция файлов с помощью Webpack:
Добавьте следующие строки кода в объект script файла package.json, как показано ниже:
Здесь я воспользовался флажком watch, поэтому всякий раз, когда происходит изменение исходных файлов, webpack автоматически скомпилирует все исходные файлы.
В Webpack 4 есть два режима: режим production, который создает оптимизированные файлы, готовые к использованию в режиме production и режим development, который создает легко читаемый код. Флажок --modeпозволяет выбрать, какой режим использовать.
Теперь вы можете скомпилировать проект, воспользовавшись следующей командой:
npm start
После выполнения вышеприведенной команды, вы увидите файл index_bundle.js, созданный в каталоге /dist . Файл будет содержать код ES5 из файла index.js.
App.js
Создайте файл App.js внутри папки components, находящейся в папке src, со следующим содержимым внутри него:
App.css:
Создайте файл App.css внутри папки styles, находящейся в папке src, со следующим содержимым внутри него:
Установка Html-webpack-plugin:
Теперь нам нужно установить html-webpack-plugin. Этот плагин генерирует HTML файл, затем вставляет в него скрипт и записывает файл на dist/index.html.
Установите html-webpack-plugin, в качестве зависимости dev:
npm install html-webpack-plugin --save-dev
Теперь нам нужно настроить этот плагин внутри файла webpack.config.js,добавив в него следующий код:
В каталоге /dist мы создаем файл шаблона index.html с введенным скриптом.
Установка почти завершена, осталось скомпилировать исходные файлы с помощью webpack. Вы можете запустить проект, используя следующую команду:
npm start
Вы получите выходные данные внутри каталога /dist. Откройте index.html в браузере и вы увидите текст “My React App!”.
У этого подхода есть один недостаток: вам нужно каждый раз вручную обновлять веб-страницу, чтобы увидеть сделанные вами изменения. Чтобы webpack обновлял веб-страницу всякий раз, когда какие-либо изменения вступают в силу, мы можем установить webpack-dev-server.
Установка Webpack-dev-server:
Установите webpack-dev-server, в качестве зависимости dev:
npm install webpack-dev-server --save-dev
И измените скрипт start в файле package.json, как показано ниже:
"start": "webpack-dev-server --mode development --open --hot"
Я добавил два флажка --open и --hot, которые ответственны за обновление веб-страницы всякий раз, когда происходят какие-либо изменения в компонентах.
Выполните следующую команду в терминале:
npm start
Вы должны увидеть окно браузера, в котором будет точно такое же содержимое, как на следующем скриншоте:
Вот и все, теперь у нас есть собственный boilerplate (шаблон) React, который мы можем использовать для создания наших проектов на React. Также вы можете скачать данный шаблон с моего Github.
Читайте нас в телеграмме и vk
Перевод статьи Sukhjinder Arora: How to build a React project from scratch using Webpack 4 and Babel
