Day 1, Segment 2, Part 3, branch v2-4

In notebook:
FrontEndMasters React Intro 2
Created at:
2016-12-22
Updated:
2016-12-22
Tags:
Webpack libraries JavaScript React
Confirms that Webpack is very complicated to set up... You are not alone!

1:02:00

Update the scripts part in package.json, to use Webpack for build :
  // ****   package.json    ****
 
  "scripts": {
    "lint": "standard"
    // 1. ++++
    "build": "webpack",
  },
He never had the use case where he had to specify multiple entry points. 

Excluding Node modules

  // ****   webpack.config.js    ****
 ...
  module: {
    rules: [
      {
        // 1. ++++
        exclude: /node_modules/,
        test: /\.js$/,
        loader: 'babel-loader'
      }
    ]
  }
This tells Webpack to not to run node_modules through Babel.

Even better, to include what you need:
  // ****   webpack.config.js    ****
 ...
  module: {
    rules: [
      {
        include: path.resolve(__dirname, 'js'),
        test: /\.js$/,
        loader: 'babel-loader'
      }
    ]
  }

JSX

When React came out, it had html included in JS and had to go through extra compilation steps. People didn't like it at all. 

HTML in your JavaScript. It's almost like a new primitive for JS. 

The advantage is that you can write directly markup in your javascript and not mimic html. One less cognitive step. 

JSX actually comes from a PHP code they used at that time at Facebook. 

Let's convert the previous code to JSX. 

Before:
  // **** mytitle.js

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
After:
  var MyTitle = React.createClass({
  render: function () {
    const style = {color: this.props.color}
    return (
      <div>
        <h1 style= { style }>
          {this.props.title}
        </h1>
      </div>
    )
  }
})

export default MyTitle
First reaction of most developers is that this is really ugly. But all of the developers he knows except for one, now writes with JSX. 

Why mix markup with code and behaviour?

You have everything in one place when you need to debug. There's exactly one place where you have look when you need to find an error. This is very powerful. Compared to older versions of Angular, where seeing the error did nod mean that you knew where it was coming from. 

The curly braces in JSX {}

1:12:53

It's a JavaScript expression that you want to output directly.
You could do: ​{ this.props.title.Uppercase() } 
Or: <h1 style= { {color: this.props.color} }>​
But it would be more confusing. 

Watching with Webpack

​$ webpack --watch​

or pass an additional flag with npm scripts (note the extra ​--​):

​$ npm run build -- --watch​

or update the npm scripts:
    // **** package.json ****
  ...
  "scripts": {
    "lint": "standard",
    "build": "webpack",
    // 1. ++++
    "watch": "npm run build -- --watch"
  },
then just ​$ npm run watch​

What JSX gets compiled into

​1:17:00
In JSX:
​<div>​ → ​React.createElement('div', null, ..)​ 
(where createElement is a factory...) :1:17:25

You can open the bundle.js to see what it gets compiled to. 
Also refactors clientapp.js with JSX

Before :
  // **** clientapp.js ****
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'}),
        MyTitleFactory({title: 'semicolons are the worst', color: 'mediumaquamarine'}),
        MyTitleFactory({title: 'jklol its okay if you like semicolons', color: 'rebeccapurple'}),
        MyTitleFactory({title: 'im out of ideas', color: 'dodgerblue'})
      )
    )
  }
})

ReactDOM.render(React.createElement(MyFirstComponent), document.getElementById('app'))
After:
  // **** clientapp.js ****
import React from 'react'
import ReactDOM from 'react-dom'
import MyTitle from './MyTitle'
var MyFirstComponent = React.createClass({
  render: function () {
    return (
      <div>
        <MyTitle title='props are cool' color='rebeccapurple' />
        <MyTitle title='props are amazing' color='mediumaquamarine' />
        <MyTitle title='props are cool still' color='peru' />
      </div>
    )
  }
})

ReactDOM.render(React.createElement(MyFirstComponent), document.getElementById('app'))
​createFactory​ is almost never necessary with JSX. Most developers don't even know it exists. 

Rules for using JSX 

  • With JSX you have to always close your tags (as in XML).
  • TitleCase your own components (​MyTitle​). If it's not title cased then it's a React component. This is because web components are coming (​<x-my-component>​)

Why ​createClass​ instead of ES6 extend (class syntax)?

He does it this way, because it's easier to teach. There are 3 ways to create React components, he starts with the easiest one. 

He himself uses createClass in his own code, as it's easier to use, less boilerplate. 
Third way is through stateless functional components (will show later). 
1:23:24

The main benefit using components is that you can compose them, and still only work with manageable chunks. 

Everything gets compiled to functions

Always have one and only one top element of your component. It's because you cannot ​return​ more than one thing in JavaScript. ( ​return x, y;​ not possible )

So mostly you would wrap everything in a top ​<div>​.

How to structure your components?

Too many, too small components are performance and maintainability burden (1:27:46)
React has to keep track of too many components → performance hit