Getting started with React lightning talk. Points for consideration when building a React SPA application.

1. Getting started with React

3. it’s moving fast

4. double check the docs

5. webpack all the things.

6. ES5 vs. ES6

7. function HelloMessage(props) {
return <div>Hello {props.name}</div>;
}
ReactDOM.render(<HelloMessage name="Sebastian" />, mountNode);
var HelloMessage = (props) => <div>Hello {props.name}</div>;
ReactDOM.render(<HelloMessage name="Sebastian" />, mountNode);
ES6
ES5

8. export class Counter extends React.Component {
constructor(props) {
super(props);
this.state = {count: props.initialCount};
}
tick() {
this.setState({count: this.state.count + 1});
}
render() {
return (
<div onClick={this.tick.bind(this)}>
Clicks: {this.state.count}
</div>
);
}
}
Counter.propTypes = { initialCount: React.PropTypes.number };
Counter.defaultProps = { initialCount: 0 };
- no autobinding
- no mixins
- propTypes, defaultProps

9. testing

10. deployment

11. secrets

12. API

13. Thanks!
@blurredbits

14. Resources
https://facebook.github.io/react/
https://webpack.github.io/
https://github.com/HenrikJoreteg/hjs-webpack
https://quickleft.com/blog/testing-flux-applications/
https://ampersandjs.com/
https://facebook.github.io/flux/
https://github.com/rackt/redux
http://alt.js.org/
http://reactkungfu.com/