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!)
- we can do more with props. What about adding an onChange prop to CommentBox and wiring it up to the 's onChange? Then we could do - props are immutable inside the component. So we can only change them from the outside (with attributes). - state is also useful. It's for the component's internal data and can be changed inside the component (think jQuery data attributes). Check out: https://facebook.github.io/react/docs/tutorial.html#reactive-state - fetch is a new standard API that replaces XHR or if you use jquery $.get and it's included in this app! Check out: https://developer.mozilla.org/en/docs/Web/API/Fetch_API - React CSS Modules make CSS dependencies much more manageable by making them declarative and composable (like react!). Check them out: https://github.com/gajus/react-css-modules - React Animations can be helpful if you need to do simple transitions when components are added and removed. Check out: https://facebook.github.io/react/docs/animation.html