Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
notes for Frontend Masters - Complete Intro to React v2 - March 13th, 2017

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


  • 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


  • 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

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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment