Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
fem-react-2017.03.20.md
# 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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.