Day 1, Segment 3

In notebook:
FrontEndMasters React Intro 2
Created at:
2016-12-22
Updated:
2016-12-22
Tags:
JavaScript Webpack libraries React
branch v2-4

Will build a basic Netflix app

Will have router, pages, ajax, etc. 
What's cool about React is that it gives you freedom to replace any part of your app, organise as you want. You will spend more time configuring than Ember for example.

We will use a lot of different libraries but they can all be replaced by another one if you want. 

You can swap out React-router and replace it with Director if you want. This works well with React.

03:38

There are libraries like Aphrodety and Radium if you want to put CSS, HTML and JavaScript together. We will not use them in this course.

We will do CSS imports. 

CSS imports

Add another rule to Webpack. 
  //****   webpack.config.js  ****
// ..
 module: {
    rules: [
      {
        include: path.resolve(__dirname, 'js'),
        test: /\.js$/,
        loader: 'babel-loader'
      },
      // 1. ++++ add a style loader
      {
        test: /\.css$/,
        // passing multiple loaders
        // you can add SASS step here
        use: [
          'style-loader',
          // pass the config object
          {
            loader: 'css-loader',
            options: {
              // don't inline references to images
              // like: url(myimage.jpg)
              url: false
            }
          }
        ]
      }
    ]
  }

style-loader vs css-loader

Style loader will bundle our CSS into our JavaScript. 
At Netflix they don't include CSS in their components. 

You can build critical path CSS with Webpack. 
08:49

Rewrite clientapp.js

  // ****   clientapp.js  ****

import React from 'react'
// dead code eliminition example
// only include render from react-dom
import { render } from 'react-dom'
import '../public/normalize.css'
// include the CSS here :
import '../public/style.css'

const App = React.createClass({
  render () {
    return (
      // className as in JavaScript
      <div className='app'>
        <div className='landing'>
          <h1>svideo</h1>
          <input type='text' placeholder='Search' />
          <a>or Browse All</a>
        </div>
      </div>
    )
  }
})

// this (render(<App />) gets compiled to react.createElement
render(<App />, document.getElementById('app'))

Which extension .js or .jsx?

Facebook started using just .js, so Brian follows this convention, but it's not that important. 

Adds, that it can help to denote that the file needs to be compiled.

16:10

19:25 runs Webpack, but has some problems with the background images not showing up... (path definition problems in the CSS, need to start with /).

For some people the build is failing because of the comments in the CSS. You need to kill and restart Webpack watch. 

He will not use hot module reloading because the new one is not out yet. 

Update the linter (for JSX, React etc) - eslint with standard

We need to enforce some rules for React (my comment: like closing the tags)
Standard is not at all configurable. You need to use eslint and add the standard rules. 
Create the eslint config file. 
  // ****   .eslintrc.json   ****

{
  "extends": ["standard", "standard-react"]
}
You can also use yaml. standard-react is very highly recommended.

moving to branch v2-6

Change linter to be eslint

  //  ****     package.json   ****

...
"scripts": {
  // 1. ----
    "lint": "standard",
  // 2. ++++
  "lint": "eslint js/**/*.js webpack.config.js",
26:16

npm scripts will use a node_modules/ local version of eslint if it finds one, you don't need to install it globally.

Gets lots of errors from mytitle so for now he will just delete it.

Runs eslint with the ​-s​ flag. 

then runs

$ npm run lint -s -- --fix​

to fix the lint errors. 

30:00

Add eslint to Webpack on compile

Update Webpack loaders
  // ****   webpack.config.js   ****
...


  module: {
    rules: [
      // 1. ++++
      {
        // "run this befofe you do any other"
        // so only lint the original files
        // not the output
        enforce: 'pre',
        test: /\.js$/,
        // eslint loader will use
        // eslintrc.json file
        loader: 'eslint-loader',
        // don't lint the node modules
        exclude: /node_modules/
      },
      {
        include: path.resolve(__dirname, 'js'),
        test: /\.js$/,
        loader: 'babel-loader'
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              url: false
            }
          }
        ]
      }
    ]
  }
then ​$ npm run watch​ will lint your files on save. 

pre-loader vs enforce: 'pre'

answer: webpack 1 → webpack 2
but the same concept

34:50

Webpack dev server

Super useful. 
  // ****   webpack.config.js   ****

module.exports = {
  context: __dirname,
  entry: './js/ClientApp.js',
  devtool: 'eval',
  output: {
    path: path.join(__dirname, '/public'),
    filename: 'bundle.js'
  },
  // 1. ++++
  devServer: {
    // static files serving (CSS, etc)
    publicPath: '/public/'
  },
  resolve: {
    extensions: ['.js', '.json']
  },
  stats: {
    ...
  },
  module: {
    rules: [
      {
        ...
      },
...
And
  //  ****     package.json   ****

...

  "scripts": {
    "lint": "eslint js/**/*.js webpack.config.js",
    "build": "webpack",
    // 1. ++++
    "dev": "webpack-dev-server",
    "watch": "npm run build -- --watch"
  },
​$ npm run dev​

then you can open http://localhost:8080 
Dev server has the watch built in. It can also do hot module reloading.

Hot module reloading

Like livereload for CSS but for JavaScript. It's great for example when you have to recreate a complicated state in your app. 

Moving to branch v2-7

Some users issues questions... (41:00).