weisjohn · March 13, 2017 04:20 · Mar 13, 2017
diff --git a/fem-react-2017.03.13.md b/fem-react-2017.03.13.md
@@ -0,0 +1,87 @@
+# Frontend Masters - Complete Intro to React v2 - March 13th, 2017
+
+ - updated slides http://btholt.github.io/complete-intro-to-react/all.html
+ - updated repo https://github.com/btholt/complete-intro-to-react/tree/start
+
+## Intro
+
+ - It is possible to learn the entire surface area of React.
+ - This class will teach you React + tools: webpack, babel, etc.
+ - Tools introduce complexity but help get around pain-points, more complex, but easier to work on
+
+## Yarn
+
+ - node >= v4.; nvm
+ - `npm install --save react` ==> `yarn add react`
+ - `package.json` stays, but `npm-shrinkwrap.json` ==> `yarn.lock`
+ - yarn is deterministic, whereas npm isn't (which sucks, and I've ran against this dozens of times)
+ - no more `rm -rf node_modules/` then `npm install`
+ - essentially bad at libs, good for apps
+ - Yehuda Katz who did Cargo for rust was involved (at some level, arch?)
+ - yarn installs all deps in a flat structure and symlinks them together
+ - `yarn upgrade-interactive` exists
+
+(He mentioned preact).
+
+(He skipped global installs needed for this course).
+
+## Understanding React
+
+ - no es6, no .jsx needed to roll with React
+ - React is solving the problem: it's a view library (with very minimal state).
+ - MVC pattern doesn't really work in the front-end
+ - request/response cycle
+ - instead of separation of concerns, have separation of components
+ - React + jQuery can be done, but shouldn't be done
+
+## My First Component
+
+ - mentioned http://emmet.io/
+ - react / react-dom
+
+## createClass vs. createElement
+
+ - createClass creates a class
+ - createElement creates an instance ("stamp")
+
+## My Second Component
+
+ - we're not using jsx yet
+ - install the Babel syntax highlighting for Atom
+ - every component needs a `render()` - should be a pure function that returns markup
+ - element helpers are [variadic](https://en.wikipedia.org/wiki/Variadic_function) - can handle arrays or n args
+ - annoying ; debate
+
+## Factories & Props
+
+ - `.createFactory()` - makes a factory method for whatever components you have, essentially wrapping your component, abstracting away the need for `createElement` (not normally used with jsx)
+ - props - read only props that are simply received from parents, by def not writable
+ - props can handle anything that JS can pass
+ - a whole minute of talking about CSS named colors...
+ - `style` prop to attribute making
+
+## Using Standard
+
+ - no
+ - `gofmt` is cool, but `standard` isn't that
+ - standard is just eslint with it's own bike-shedded preferences
+ - eslint pragmas are a thing
+
+## npm scripts
+
+ - package.json .scripts list of commands to run
+ - `npm run lint` => { "scripts": { "lint" : "standard" } }
+ - grunt / gulp !== npm scripts
+
+## Webpack and ES6 Modules
+
+ - webpack is a code bundler with loaders that is optimized for delivering code to the front-end
+ - `import React from 'react';`
+ - `export default Foo;`
+
+## Bundling w/ Webpack
+
+ - `import` vs. `require` live-code / tree shaking
+ - npm install -g [email protected] (as of these notes, we're at 2.2.1)
+ - webpack understands `NODE_ENV`
+ - code splitting is possible w/ webpack