Day 1, Segment 2

In notebook:
FrontEndMasters React Intro 2
Created at:
2016-12-21
Updated:
2016-12-21
Tags:
JavaScript Webpack libraries React
Branch v2-2

global installs

Standard

​$ npm install --global standard​

Talks about Go and how it's great having go-format and that everyone uses the same code style. 
@ferris at Github created eslint based standard rules. It always provides the same rules so no time is lost on discussions on linting rules. 
Standard prohibits you to use semicolons. or you need to use semi-standard. 

Runs standard from the command line... Complains about globals. 

Adds comment (pragma) at the top of the file to define globals for eslint:
​/* global React ReactDOM */​

​$ standard --fix​ fixes automatically what it can. 
10:00

Continue with package.json

NPM scripts

11:40

Lets you give a shorthand name for a set of commands. So that you don't have to remember complicated commands and parameters. 
    "scripts": {
    "lint": "standard"
  },
Whatever is on the right hand side, will run in your shell (bash). 
Then you can ​$ npm run lint​.

Grunt and gulp

They're more powerful so not a good idea to replicate them with npm scripts. Better for more lightweight stuff. 

(15:00 debugging yarn install for audience)

Webpack

Will use 2.0 that just came out.

Webpack takes all your modules and bundles them into one file. 
Then a lot of extra functionalities. 

Webpack loaders

Process an input file (e.g. linter) before adding it to the bundle. 

Moves stuff from ClientApp to Mytitle.js file: 
  // **** mytitle.js ****

import React from 'react'

var div = React.DOM.div
var h1 = React.DOM.h1

var MyTitle = React.createClass({
  render: function () {
    return (
      div(null,
        h1({ style: { color: this.props.color } }, this.props.title)
      )
    )
  }
})

export default MyTitle
20:30

Modules

Explains ES6 import​ and ​export​.

​default​ is when you export multiple things.

Node uses the commonJS modules. They're in the process of implementing the ES6 syntax for modules (in NodeJs).

So ES6 modules is the future...

Then update the clientapp.js file :
  // **** clientapp.js ****
// ++++ add imports

import React from 'react'
import ReactDOM from 'react-dom'
import MyTitle from './MyTitle'

var div = React.DOM.div

var MyTitleFactory = React.createFactory(MyTitle)

var MyFirstComponent = React.createClass({
  render: function () {
    return (
      div(null,
        MyTitleFactory({title: 'props are the best', color: 'peru'}),
        // ...
      )
    )
  }
})

ReactDOM.render(React.createElement(MyFirstComponent), document.getElementById('app'))

Difference between ES6 and CommonJS modules

ES6 modules are static so you can do tree shaking (live code analysis remove dead code). This is not possible with the dynamic modules in commonjs. 

Webpack with uglify can remove dead code when bundling. 

25:00

Install and run Webpack

​$ npm install --global webpack@v2.1.0-beta.25​
(December 2016)

You could also use yarn for this. 

​$ webpack js/ClientApp.js public/bundle.js​

So you specify the input and output files. 

The resulting file is 724Kb! Can be reduced with minification and using the production version of React :

​$ NODE_ENV=production  webpack -p js/ClientApp.js public/bundle.js​ ​

Then, it's only 148Kb (no minification). 

29:38

Update index.html

  <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Frontend Masters React</title>
</head>
<body>
  <div id="app">React has not yet rendered</div>
  <!-- 1. ++++ add-->
  <script src="public/bundle.js"></script>
  <!-- 2. --- remove -->
  <!-- <script src="node_modules/react-dom/dist/react-dom.js"></script>-->
  <!--<script src="js/ClientApp.js"></script>-->
</body>
</html>
Now index.html is "done". It will always use the bundled files. 

The bundle.js is ~22 000 LOC. 

- Can plugins be included at run time, as needed basis?

Yes, with code splitting. Will show how to do this later.