Автор оригинала: Ola Adim.
Каждый день появляются новые инструменты и рамки, каждый из которых со своими плюсами и минусами. Это привело к непрерывной кривой обучения для каждого программиста в квесте для поиска наиболее эффективного инструмента в написании высоко оптимизированных приложений.
Я наткнулся на пару месяцев назад, и я сразу влюбился в него. Красота ее виртуального дома и новая идеология компонентов в отличие от « 2-сторонние передачи данных, связывающих о сторно-раздутых рамках» как угловой пришлось предложить.
В этой части серии мы смотрим на базовую конфигурацию, необходимую, чтобы встать и работать с реакцией, используя ES6 и WebPack Отказ Принятие рабочего процесса Development (RDD) репозитория мы будем использовать Докер Чтобы создать изображение приложения RACT, которое мы отправим в Docker Hub.
Давайте начнем с инициализации приложения узла, запустив в терминале NPM init и после подсказки. Вы можете просто нажмите Enter, пока в каждом запросе сохранить конфигурацию по умолчанию.
Это будет инициатировать приложение узла с помощью файла package.json, имеющего конфигурацию, которая может выглядеть так:
{ "name": "react-tutorial", "version": "1.0.0", "description": "", "main": "webpack.config.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "adim", "license": "ISC"}
На этом этапе мы более обеспокоены DevDependonds и зависимости Раздел нашего Package.json Все другие конфигурации не должны совпадать.
Далее давайте устанавливаем все наши зависимости разработки, работающие:
npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react webpack webpack-dev-server
Это извлекает последние версии зависимостей и устанавливает их как локальные зависимости разработки для нашего приложения.
Babel-Preset-ES2015 и Babel-Preset-React плагины, используемые Babel-Loader Для Tranpile Syntax ES6 Syntax и Syntax JSX соответственно в JavaScript для браузеров ES5 для понимания.
WebPack Будет использоваться в составе всех наших файлов JSX/JS в один файл JS, который мы будем использовать в нашем файле index.html. WebPack может использовать загрузчики для первого транспортировки наших файлов перед их составом. Вот почему мы использовали Babel-погрузчики.
WebPack транспортировка кода JSX в JS с помощью Babel-Loader
Babel Loader нуждается в некоторой конфигурации, и нам нужно сказать ему, чтобы использовать плагины ES6 и JSX. Для этого мы создадим новый файл под названием .babelrc. :
nano .babelrc
Обновите файл, чтобы выглядеть как ниже:
{ "presets" : ["es2015", "react"]}
Далее нам нужно сказать WebPack использовать Babel-Loader во время объединения наших файлов. Для этого мы создадим новый файл с именем webpack.config.js и обновите его, чтобы выглядеть ниже:
var path = require('path');
var BUILD_DIR = path.resolve(__dirname, 'public/js');var APP_DIR = path.resolve(__dirname, 'app/js/components');
var config = { entry: APP_DIR + '/app.jsx', output: { path: BUILD_DIR, filename: 'bundle.js', publicPath: 'public/js' }, module: { loaders : [{ test : /\.jsx?/, include : APP_DIR, loader : 'babel' }] }};
module.exports = config;
Давайте посмотрим на объект Config. Мы определили точку входа под названием app.jsx Расположен в Публичные/JS Папка каталога нашего приложения. Это говорит WebPack начать с этого файла, чтобы начать объединение.
Выход Свойство нашего объекта Config принимает атрибут PATH, который указывает путь к каталогу для нашего подключенного файла JS. Имя файла Определяет имя нашего подключенного файла. Мы добавили дополнительный атрибут с именем PercingPath. Это используется WebPack-Dev-Server как его выходной каталог. Обратите внимание, что WebPack-Dev-Server не создает фактический выходной файл, а скорее в памяти представление выходного файла. Чтобы создать продукцию Ready Bundled JS-файл, нам нужно запустить это:
webpack -p
Погрузчики Свойство принимает массив погрузчиков, здесь мы просто используем Babel-Loader Отказ Каждый погрузчик Недвижимость должна указать, каковы расширение файла, которое он должен обрабатывать через Тест имущество. Здесь мы настроили его для обработки обоих .js и .jsx. Файлы с использованием регулярного выражения. включить Свойство указывает, каков каталог, который будет использоваться для поиска этих расширений файлов. погрузчик Свойство представляет имя загрузчика.
WebPack-Dev-Server отличный инструмент, похожий на Номемон который запускает сервер, который слушает любые изменения файла в нашем приложении и обновляет браузер при таких изменениях.
Мы сделаем с созданием наших зависимостей развития. Давайте подключимся путем установки наших проектов зависимости. Введите это в терминале:
npm install --save react react-dom
И, наконец, мы сделаем с нашей базовой конфигурацией. Наш Package.json теперь должен выглядеть так:
{ "name": "react-tutorial", "version": "0.0.1", "description": "React tutorial using ES6, webpack and docker", "main": "webpack.config.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "webpack -d --watch", "dev-server": "webpack-dev-server --host 0.0.0.0 --port 8080 --progress --colors", "build": "webpack -p" }, "author": "Adim", "license": "ISC", "dependencies": { "react": "^15.3.1", "react-dom": "^15.3.1" }, "devDependencies": { "babel-core": "~6.7.*", "babel-loader": "~6.2.*", "babel-preset-es2015": "^6.14.0", "babel-preset-react": "^6.11.1", "webpack": "^1.13.2", "webpack-dev-server": "^1.16.1" }}
Пожалуйста, обновите раздел скрипта вашего package.json, чтобы посмотреть выше. Мы будем использовать его достаточно скоро. Теперь, давайте напишите некоторые реагирующие, чтобы убедиться, что наша конфигурация разработана. Для этого давайте убедитесь, что у нас есть эта структура проекта:
Project-Root-Directory | |- app/ | |- js/ | |- components/ | |- app.jsx |- public/ | |- js/ | |- index.html | |- node_modules/ |- .babelrc |- webpack.config.js |- package.json
Обновить app.jsx выглядеть как ниже:
import React from 'react';import { render } from 'react-dom';
class App extends React.Component { render(){ return Hello React! }}
render(, document.getElementById('container'));
Ваш index.html должен выглядеть так:
React Tutorial
Обратите внимание, как мы включили ваш бандажный файл JS в качестве источника сценария.
Давайте начнем наш сервер разработки и проверить наше приложение.
Беги NPM запустить Dev-Server
Перейдите к своему браузеру и введите: http://localhost: 8080
И VOILA!, Вы должны увидеть Hello React! отображается на странице браузера.
Докер
Я создал Docker Image для этого проекта, который доступен на Docker Hub. Пожалуйста, потяните это изображение из Docker Hub, чтобы быстро работать с этим, набрав:
docker pull adim/react-tutorial
Затем запустите это, чтобы начать контейнер для изображения:
docker run --rm -p 8080:8080 adim/react-tutorial
Теперь вы можете перейти к вашему браузеру и введите: http://localhost: 8080
При использовании Docker-Machine, вам может потребоваться получить адрес станции Docker, чтобы открыть приложение в браузере, используйте этот сокращенный в терминале, если вы используете машину по умолчанию.
open http://$(docker-machine ip default):8080
Резюме
В этом посте мы видели, как встать и работать с реакцией, используя WebPack и Babel-погрузчики. В следующей части этого учебника мы увидим, как подключить больше погрузчиков, таких как сасс или Кофе-скрипт Погрузчики для использования наряду с реагированием и углубленным углубленным в реакцию на строительные компоненты.
Спасибо за прочтение!
Оригинал: «https://www.codementor.io/@olaadim/the-hitchhiker-s-guide-to-mastering-react-with-es6-webpack-and-docker-part-1-cvl2qskvv»