ES6 React project setup (AirBnB style-guide)

Node, ES6, Babel, React, JSX, Webpack, Hot-Reload

Инициализируем проект npm init

Получаем список зависимостей для линтера ES6+JSX от AirBnB npm info "eslint-config-airbnb@latest" peerDependencies

Устанавливаем необходимые версии зависимостей в package.json

"devDependencies": {
  "eslint": "^3.9.1",
  "eslint-plugin-jsx-a11y": "^2.2.3",
  "eslint-plugin-import": "^2.1.0",
  "eslint-plugin-react": "^6.6.0"
}

А теперь конфигурационную библиотеку AirBnB

npm install --save-dev eslint-config-airbnb

В корневой директории создаем файл .eslintrc и добавляем расширение AirBnB

{
  "extends": "airbnb"
}

Устанавливаем Babel и необходимые библиотеки npm install —-save-dev babel-core babel-cli babel-preset-latest babel-preset-react

В корневой директории создаем файл .babelrc. Детали по react-hot-loder смотрите в конце гайда.

{
  "presets": ["latest", "react"],
  "plugins": ["react-hot-loader/babel"]
}

Теперь линтер должен работать. Дополнительно: Линтер пакет для Atom

Установим webpack и babel-loader (для работы Webpack через компилятор Babel) для сборки проекта

npm install --save-dev webpack babel-loader

В корневой директории создаем файл webpack.config.js

/* eslint-disable */

var path = require('path');

var webpack = require('webpack');

var root = path.join(process.cwd(), 'src');

module.exports = {
  entry: [
    'react-hot-loader/patch',
    'webpack-dev-server/client?http://localhost:3000',
    'webpack/hot/only-dev-server',
    './src/index.js'
  ],

  output: {
    path: path.join(__dirname, 'dist'),
    publicPath: '/assets/',
    filename: 'bundle.js'
  },

  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      },
      {
        test: /\.css$/,
        loaders: [
          'style-loader',
          'css-loader?importLoaders=1'
        ]
      },
      { test: /\.(eot|png|ttf|svg|woff|woff2)$/, loader: 'url-loader'}
    ]
  },

  resolve: {
    root: root
  },

  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ]
};

Установим webpack-dev-server

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

Сконфигурируем dev сервер Webpack(express.js). Файлы инициалайзеры по умолчанию в ./initializers. Создадим файл севера ./initializers/server/index.js.

 const webpack = require('webpack');
const webpackDevServer = require('webpack-dev-server');

const config = require('../../webpack.config.js');

const host = 'localhost';
const port = 3000;

new webpackDevServer(webpack(config), {
  hot: true,
  publicPath: config.output.publicPath,
  stats: {
    colors: true
  }
}).listen(port, host, (err) => {
  if (err)
    console.log(err);

  console.log(`Listening at host: ${host} port: ${port}`);
});

Установим модуль горячей замены модулей (экмпериментальная версия)

npm install --save-dev react-hot-loader@next

Для работы горячей замены, главный контейнер необходимо завернуть в контейнер предоставляемый react-hot-loader. Пример входного файла index.js:

import React from 'react';
import ReactDOM from 'react-dom';

import { AppContainer } from 'react-hot-loader';

import App from './App';

const rootEl = document.getElementById('app');

ReactDOM.render(
  <AppContainer>
    <App />
  </AppContainer>,
  rootEl
);

if (module.hot) {
  module.hot.accept('./App', () => {
    const NextApp = require('./App').default;

    ReactDOM.render(
      <AppContainer>
        <NextApp />
      </AppContainer>,
      rootEl
    );
  });
}

pashagray/react_proj_guide.md