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

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

• React tutorial
• Курс на Хекслете

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

• React - это V в MVC;
• основа React - это компоненты;
• у компонента есть главный метод render(), который дергается React’ом, когда нужно отобразить или перерисовать компонент;
• компоненты инициализируется через properties, и хранят state;
• компоненты пишутся на JSX - специальный синтаксис, который “бесшовно” внедряет HTML в JS;
• компоненты можно связывать в иерархические структуры;
• состояние нельзя менять напрямую, а только через специальный метод setState() - таким образом React точно узнает, что состояние изменилось и объект надо перерисовать;
• состояние принято хранить в родительском компоненте, и передавать его в дочерние компоненты через properties.

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

• ES-2015 сейчас - введение
• Learn ES2015 - кратенько про отличия от ES5
• ECMAScript 6: classes - новый синтаксис классов
• ECMAScript 6: arrow functions and method definitions - лямбды!
• Learning ES6: Enhanced object literals - less boilerplate in objects
• React на ES6+ - кратко обо всем, пока не читал

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

• перевести проект на Webpack для дальнейшей работы с модулями, см. Setting up React for ES6 with Webpack and Babel
• подключить live and hot reload;
• заменить “var” на “let/const”;
• заменить определения методов внутри объектов (Enhanced object literals);
• заменить потенциально опасные манипуляции со сложным стейтом (объекты, массивы) с помощью Array.prototype.splice() или Array.prototype.concat() на изменения с помощью идеологически верных Immutability Helpers;
• заменить XHR-вызовы через jQuery на что-то более REST’овое, например fetch API.

Кракая выжимка для начала работы с 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.

Про модули:

• Модули в ECMAScript 6: будущее уже сейчас
• Babel and CommonJS modules
• Пакуем как боги
• Как мы готовим React, Require и Backbone
• Webpack — The Confusing Parts

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

• Reusable Components - пока не читал

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

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

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

• fetch API
• Введение в fetch
• This API is so Fetching!
• Using webpack with shims and polyfills

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

• React.js and Spring Data REST - мегаматериал про связку со Spring Boot

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

• Frontend maven plugin - для проектов на Java
• Docker-образ Node.js w/ Bower & Grunt - для всего остального

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

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

• React-Bootstrap - Bootstrap-компоненты, переписанные на React
• react-bootstrap-table - крутая Bootstrap-compartible табличка

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

• ReactTestUtils

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

• Spring Boot and React hot loader - пока не читал
• The React.js Way: Getting Started Tutorial - пока не читал
• Spring Boot React Example