- http://teropa.info/blog/2015/09/10/full-stack-redux-tutorial.html
- https://www.gitbook.com/book/maxfarseer/redux-course-ru
- https://survivejs.com/webpack_react
npm init -y
To download and add a package to package.json: `npm install --save (--save-dev)
npm i webpack webpack-dev-server --save-dev
npm i babel-core babel-loader babel-preset-es2015 babel-preset-react --save-dev
To install a preset for ES7:
npm i babel-preset-stage-0 --save-dev
To install a polyfill:
npm i babel-polyfill --save-dev
To improve the build time:
npm i babel-runtime --save
npm i babel-plugin-transform-runtime --save-dev
Add to package.json:
"babel": {
"presets": ["es2015", "stage-0", "react"]
}
npm i react react-dom --save
npm i react-hot-loader --save-dev
Add to the end of index.jsx (the main entry):
module.hot.accept();npm i babel-eslint eslint eslint-plugin-react eslint-loader --save-dev
Create .eslintrc:
{
"extends": "eslint:recommended",
"parser": "babel-eslint",
"env": {
"browser": true,
"node": true
},
"plugins": [
"react"
],
"rules": {
"no-debugger": 0,
"no-console": 0,
"new-cap": 0,
"strict": 0,
"no-underscore-dangle": 0,
"no-use-before-define": 0,
"eol-last": 0,
"quotes": [2, "single"],
"jsx-quotes": [1, "prefer-single"],
"react/jsx-no-undef": 1,
"react/jsx-uses-react": 1,
"react/jsx-uses-vars": 1
}
}
npm i mocha chai --save-dev
npm i jsdom --save-dev
Immutable:
npm i immutable --save
npm i chai-immutable --save-dev
test_helper.js:
import jsdom from 'jsdom';
import chai from 'chai';
import chaiImmutable from 'chai-immutable';
const doc = jsdom.jsdom('<!doctype html><html><body></body></html>');
const win = doc.defaultView;
global.document = doc;
global.window = win;
Object.keys(window).forEach((key) => {
if (!(key in global)) {
global[key] = window[key];
}
});
chai.use(chaiImmutable);Add to the package.json:
"scripts": {
"test": "mocha --compilers js:babel-core/register --require ./test/test_helper.js \"test/**/*@(.js|.jsx)\"",
"test:watch": "npm run test -- --watch"
}
npm i redux react-redux --save
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: [
'webpack-dev-server/client?http://localhost:8080',
'webpack/hot/only-dev-server',
'babel-polyfill',
'./src/index.jsx'
],
devtool: 'cheap-module-eval-source-map',
devServer: {
contentBase: './dist',
hot: true
},
output: {
path: path.join(__dirname, 'dist'),
publicPath: '/static/',
filename: 'bundle.js'
},
resolve: {
extensions: ['', '.js', '.jsx']
},
module: {
preLoaders: [{
test: /\.jsx?$/,
loaders: ['eslint'],
exclude: /node_modules/
}],
loaders: [{
test: /\.jsx?$/,
exclude: /node_modules/,
loaders: ['react-hot', 'babel-loader'],
plugins: ['transform-runtime']
}]
},
plugins: [
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin()
]
}