Pick rails 5.1.0 with React as progressive replacement of 4.2.8 with Backbone/Coffee.

account-rails-app-dev-notes.md

Why yarn?

The most important factor is shrinkwrap.json may out of date when developer forget to manually npm shrinkwrap to update npm-shrinkwrap.jsonafter upgrading.

https://code.facebook.com/posts/1840075619545360

Env

1. rubyenv
2. ruby-2.4.1
3. rails 5.1.0
4. react
5. node 6.10.2 LTS

Installation

rails new . --webpack=react --skip-coffee --skip-action-mailer
bundle i
rails  webpacker:install
rails  webpacker:install:react
bundle exec spring binstub --all

# include gem 'foreman'
# so you can write a shell script to bundle multiple tasks in parallel
# Procfile.dev
web: bundle exec rails s
# watcher: ./bin/webpack-watcher
hot: ./bin/webpack-dev-server

# ./bin/dev-server
#!/bin/bash -i
bundle install
bundle exec foreman start -f Procfile.dev

# chmod 755 ./bin/dev-server

# webpack needs webpack-merge and other plugins
yarn add webpack
yarn add webpack-merge
yarn add extract-text-webpack-plugin
yarn add webpack-manifest-plugin
yarn add path-complete-extname
yarn add js-yaml

# for react jsx support
yarn add babel-loader
yarn add babel-core
yarn add babel-preset-env

Build with webpack

https://medium.com/statuscode/introducing-webpacker-7136d66cddfb

Your Javascript code must be placed in app/javascript, in there you must define packs, a pack is a Javascript application, it needs to have an entry point like signup.js and a directory app/javascript/signup must exist with all related files to this application.

Please check webpacker gem for this integration:

https://github.com/rails/webpacker#configuration

You should put your pack_name.js as an entry point in app/javascript/packs folder which will bre packed as a single javascript resource by webpacker gem, then include it by javascript_pack_tag pack_name in your rails view templates:

// app/javascripts/packs/counter.js
// this will load app/javascripts/counter/index.js by default
// Require or import the counter module/director instead of specific js file
import '../counter';

// app/javascripts/counter/conuter.js
const incrementNode = document.getElementById('increment');
const decrementNode = document.getElementById('decrement');
const inputNode = document.getElementById('counter');

const counter = {
  initialize() {
    incrementNode.addEventListener('click', (event) => {
      event.preventDefault();
      const currentValue = inputNode.value;
      inputNode.value = parseInt(currentValue, 0) + 1;
    });

    decrementNode.addEventListener('click', (event) => {
      event.preventDefault();
      const currentValue = inputNode.value;
      if (currentValue > 0) {
        inputNode.value = parseInt(currentValue, 0) - 1;
      }
    });
  }
};

export default counter;

Though webpack output is served from http://localhost:8080/, you should visit http://localhost:5000 which rails puma server take care of all js assets instead. Above counter.js will be webpacked as a single javascript resource at http://localhost:8080/counter.js.

React naming convention

https://github.com/jamesyang124/javascript/blob/master/react/README.md#naming