Getting started with React

it’s moving fast

double check the docs

webpack all the things.

ES5 vs. ES6

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

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

testing

deployment

secrets

API

Thanks!

@blurredbits

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/