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

fem-react-2017.03.13.md

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 - 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 webpack@v2.1.0-beta-25 (as of these notes, we're at 2.2.1)
• webpack understands NODE_ENV
• code splitting is possible w/ webpack