fem-react-2017.03.20.md

notes for Frontend Masters - Complete Intro to React v2 - March 20th, 2017

# Frontend Masters - Complete Intro to React v2 - March 20th, 2017

## JSX

 - SoC smashed together
 - `{}` - output the value of this js expression
 - `webpack --watch`
 - `npm run-script foo -- ` then after `--` is sent to command

## JSX vs. createElement

 - createFactory not necessary with jsx
 - JSX handles components, mapping to function
 - JSX self-closing tags are necessary
 - if the name of the component is uppercase, it's yours
 - if the you want the tag output to the dom, lowercase

## Configuring CSS Imports

 - https://github.com/FormidableLabs/radium
 - https://github.com/Khan/aphrodite
 - add a new webpack loader
 - `style-loader`, then `css-loader` w/ `url: false`
 - code-splitting can help you
 - critical css which can be inlined

## Importing CSS in React

 - `import { render } from 'react-dom'` (tree-shaking)
 - `import '../public/style.css'` - webpack handles this
 - his styles are extremely structure heavy, don't replicate this
 - className is named as such for the DOM API name - https://developer.mozilla.org/en-US/docs/Web/API/Element/className
 - '.jsx' vs '.js' for extension? - doesn't matter, but can help keep webpack loaders clean
 - HMR is still in rewrite

## Lint Rules for React

 - `standard` - boo!
 - .eslint-rc - still works by default as JSON
 - `extends: ["standard", "standard-react"]`
 - npm scripts = `"list": "eslint js/**/*.js webpack.config.js"`
 - npm scripts look for node_modules first, then global looking

## Automated Linting

 - add a new webpack module.rule:
```javascript
  {
     enforce: 'pre',
     test: /\.js$/
     loader: 'eslint-loader',
     exclude: /node_modules/
  }
```

 - loaders affect build time differently
 - webpack watch is smart for incremental changes
 - preloaders was webpack@1, this is the same in webpack@2

## Webpack Development Server

 - in the toplevel config, add
```javascript
  devServer: {
     publicPath: '/public/'
  },
```
 - add a script: npm run dev == 'webpack-dev-server'
 - watch statement automatically built in (woo!)
 - hot-reloading