Быстрое погружение в React

Для разогрева:

После этого более-менее должно оформиться понимание, что:

Далее надо слегка погрузиться в ECMAScript 6 aka ES2015:

Теперь рекомендую форкнуть React tutorial и поиграться с ним, например:


Кракая выжимка для начала работы с Webpack:

npm install --save react
npm install --save react-dom
npm install --save-dev webpack
npm install --save-dev babel-loader
npm install --save-dev babel-core
npm install --save-dev babel-preset-es2015
npm install --save-dev babel-preset-react
npm install --save-dev react-hot-loader

Для запуска webpack-dev-server надо запустить в $HOME:

npm install webpack-dev-server

В этом случае webpack-dev-server будет установлен в $HOME/node_modules, и симлинк на него будет в $HOME/node_modules/.bin. Этот каталог уже можно включить в $PATH и запускать webpack и webpack-dev-server из любого места.

Типовое содержимое webpack.config.js:

var path = require('path');
var webpack = require('webpack');

module.exports = {
  entry: './public/scripts/example.js',
  output: {
    path: __dirname + "/public/build",
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      test: /.jsx?$/,
      loaders: ["react-hot", "babel-loader?presets[]=react,presets[]=es2015"],
      exclude: /node_modules/
    }]
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(), // don't reload if there is an error
  ]
};

Теперь можно запустить webpack -w и, при любых изменениях js-файлов, будет автоматически пересобираться bundle.js. Reload в браузере все-таки придется сделать. Полноценный hot&live reload можно организовать только с помощью webpack-dev-server.


Про модули:

Про компоненты:


Внедрение fetch API:

npm install --save whatwg-fetch
npm install --save imports-loader exports-loader

Остальные ссылки по fetch:


Переходим к тяжелым упражнениям:

Чтобы не ставить nodejs, npm и bower локально, можно использовать:

Но проще всего установить nodejs & npm с https://nodejs.org.

Дополнительные компоненты:

Тестирование:

Просто интересные ресурсы:

Tags:
comments powered by Disqus