react-storyboard
v0.1.0
Published
1. npm install `react-storyboard` 2. Run `npm install -g webpack webpack-dev-server && npm install`
Downloads
12
Readme
Installation
- npm install
react-storyboard
- 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
- 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 <CommentBox onChange={function() {console.log("change!")}} />
- 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