Redux and React in ES6, Ch#02

Redux React Ch#02

  • ch#2: 7~27

environment: intro

environment: tech overview

  • babel: es6 to es5
  • babel-polyfill (~50k minified, ouch)
    • array.from, set, map, promise, generators…
    • select only used module
  • webpack: moudle bundler
  • mocha: testing
  • eslint: linting

environment: versions

  • react 15.0.2
  • redux 3.5.2
  • react/router 2.4.0
  • webpack 1.13
  • babel 6.*

environment: install node

nvm: node version manager https:///nodejs.org/en/ 6.x branch and 4.x branch looks like time has changed most people use: v6.9.1 LTS latest: v7.0.0 current

how I did it

installed nvm with this command: https://github.com/creationix/nvm

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.32.1/install.sh | bash

then installed node with lts(long term support)

[email protected]:~$ nvm install --lts
Installing latest LTS version.
######################################################################## 100.0%
Computing checksum with shasum -a 256
Checksums matched!
Now using node v6.9.1 (npm v3.10.8)
nvm_ensure_default_set: a version is required
[email protected]:~$ which npm
/Users/michael/.nvm/versions/node/v6.9.1/bin/npm
[email protected]:~$ which node
/Users/michael/.nvm/versions/node/v6.9.1/bin/node
[email protected]:~$ node --version
v6.9.1
[email protected]:~$ npm --version
3.10.8

environment: package.json

  • package.json file in the code checked out from github
  "dependencies": {
    "babel-polyfill": "6.8.0",
    "bootstrap": "3.3.6",
    "jquery": "2.2.3",
    "react": "15.0.2",
    "react-dom": "15.0.2",
    "react-redux": "4.4.5",
    "react-router": "2.4.0",
    "react-router-redux": "4.0.4",
    "redux": "3.5.2",
    "redux-thunk": "2.0.1",
    "toastr": "2.1.2"
  },

environment: editor

jetbrain webstorm: not free atom: free -> install terminal, react plugin

environment: install

go to the directory that has package.json

npm install

## this will create node_modules directory and install all packages underneath. 125MB here now

environment: npm scripts

moved away from gulp for building

  • why npm?
    • easy to learn
    • simple
    • no extra layer of abstraction
    • no dependencie
    • simpler debugging
    • better doc

environment: create src file

created /src/index.html, src/index.js file and hooked it up

environment: webpack

  • module bundler
  • create a file at /
webpack.config.dev.js

export default

  • debug
  • devtool
  • noInfo
  • entry
  • target
  • output
  • devServer
  • plguins
  • module

environment: babel

  • transcode down to es5
  • .babel.rc file at /

environment: espress

  • create a nodejs express server under tools
/tools/srcServer.js

environment: start script

  • babel-node tools/srcServer.js

environment: prestart script

  • babel-node tools/startMessage.js

environment: eslint

add .eslintrc

  • put .eslintrc file at /

to run lint as a command

  • add this in package.json to be able to run the command
"lint": "node_modules/.bin/esw webpack.ocnfig.* src tools",
  • to run this command:
    npm run lint
    

to hotload lint

  • add this in package.json to have a hot loading for linting:
"lint:watch": "npm run lint -- --watch"
  • to run this command:
npm run lint:watch
  • this time whenver the files are saved, the result is updated

to run lint on app start

  • creating parallel scripts
  • use npm-run-all
"start": "npm-run-all --parallel open:src lint:watch",

environment: set up testing

  • mocha
  • added tools/testSetup.js
  • added this line:
    "test": "mocha --reporter progress tools/testSetup.js \"src/**/*.spec.js\""

  • added this test file /src/index.spec.js that contains:
import expect from 'expect';

describe('Our first test', () => {
  it('should pass', () => {
    expect(false).toEqual(true);
  });
});

and put this again in npm-run-all

"start": "npm-run-all --parallel open:src lint:watch test:watch",
  • now npm start will run test web server, linting and testing

Summary

  • babel
  • webpack
  • eslint
  • mocha
  • express
  • npm scripts
  • one command: npm start
COMMENTS