Недавно, в прошлом посте, я рассказывал о установке окружения для react-development, c помощью create-react-app, да это самый простой способ – но он несет кучу ограничений, для меня это:
– подходит только для однострaничных приложений
– не очень удобное конфигурирования проекта..

И вначале просто хотел пересобрать вручную конфиг для react + babel + webpack. Но как известно всегда хочется попробовать что-то новое, и этим новым в этот раз оказался Yarn, новый пакетный менеджер от facebook и google. Его плюсы – база модулей берется с npm (общая), более быстрая загрузка необходимых модулей и выполнения yarn install (протестировал – где-то раза в три в пользу yarn), лучшее разрешение зависимостей.

Для начала ставим из brew сам yarn:

brew install yarn

создаем директорию проекта, назовем его testproj (а так же создаем вложенную диреторию client в которой будут находится файлы проекта):

mkdir -p testproj/client cd testproj

делаем yarn init, который ничем не отличается от npm init:

yarn init

ставим все зависимости для проекта:

yarn add webpack webpack-dev-server react react-dom yarn add babel-loader babel-core babel-preset-es2015 babel-preset-react --dev

Далее настраиваем webpack, cоздаем конфиг:

touch webpack.config.js

далее любым удобным редактором открываем webpack.config.js и пишем туда следующее:

module.exports = { entry: './client/index.js', output: { path: __dirname + "/dist", filename: 'index_bundle.js' }, module: { loaders: [ { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ }, { test: /\.jsx?$/, loader: 'babel-loader', exclude: /node_modules/ } ] } }

entry – входная точка проекта, файл index.js, именно с него начинается сборка проекта
output – путь куда будет сохранятся скомпилированная версия, в данном случае от корня проекта в dist/
loader – тут массив из лоадеров которыми будет обработан проект, в данном случае это babel, какие файлы обрабатывать указывается через регулярное выражение, в будущем (наверное в третьей части), добавлю лоадеры для обработки saas.

Далее настраиваем babel, вначале создаем конфигурационный файл:

touch .babelrc

Далее любым редактором добавляем:

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

Настраиваем действие при yarn start, редактируем package.json:

"scripts": { "start": "webpack-dev-server" },

добавляем в массив действие при команде yarn start.

Создаем само “приложение” которое представляет собой простое hello world в консоль:

touch client/index.html && touch client/index.js

Редактируем client/index.html:

<meta charset="utf-8"></meta><title>Hello World</title><div id="root"></div>

Редактируем client/index.js:

 console.log('Hello World!')

Запускаем

yarn start

Переходм в браузере по адресу http://localhost:8080 (этот адрес будет написан в логе старта webpack по команде – yarn start).

Открывем дебагер (у меня встроенный в Firefox Developer Edition)

Итак, 2017-02-07, дополнение, почитал сам свой пост и заголовок, решил сделать небольшое дополнение в “Hello World” “приложение” – дело в том что в заголовке статья подавалась как react, а от собственно react осталось только установленные библиотеки в yarn. Исправляю недостаток этот, немного усложняем это “приложение”.

Редактируем файл client/index.js:

import React from 'react'; import ReactDOM from 'react-dom'; ReactDOM.render( React.createElement('h1', null, 'Hello World!!'), document.getElementById('root') );

Первые две строки – подключаем библиотеки React, ReactDOM. Далее ищем элемент с id=root и создаем внутри него элемент h1 с бессмертной фразой “Hello World”. Теперь вводый пост получился точно по теме заголовков.. ) Hello World на React.

В следующей части напишу про интеграцию лоадеров обработки saas, изображений, а так же минификации..