node package manager

react-storyboard

Installation

  1. npm install react-storyboard
  2. Run npm install -g webpack webpack-dev-server && npm install

Running the Dev Server

To start the dev server simply run webpack-dev-server --hot from your nearest command line interface (note: you have to run it in this folder so it knows which webpack.config to load).

Notes

  • ES6 introduces classes (which are just fancy prototypes)
  • React is small, composible components
  • in JSX is a component.
  • is also a valid component in JSX (just a custom one that we defined).
  • We are composing CommentBox with CommentSection
  • define: composing: (of elements) constitute or make up (a whole).
  • So basically a ComentSection is composed of CommentBox + div + h1
  • Ok, more components
  • This one has defaultProps (it's a static property so it is defined on the prototype itself)
  • props are data for components
  • lets use the props to generate some data-driven HTML
  • curly braces in jsx is javascript inside JSX (which is inside javascript. So meta!)
  • ok, let's pass in data and control our CommentList from the outside now: . Suprise! Props can be set using attributes in JSX!

Follow Up (Bonus Material!)