Componentsvar Component = React.createClass({ render: function () {

return <div>Hello, Good Afternoon.</div>; }});

React.render(<Component />, document.getElementById('container'));

https://jsfiddle.net/69z2wepo/10182/

Propsvar Component = React.createClass({ getDefaultProps: function () {

return { name: "how are you today?" }; }, render: function () {

return <div>Hello, {this.props.name}</div>; }});

React.render(<Component name=”Kiprosh” />, document.getElementById('container'));

https://jsfiddle.net/69z2wepo/10183/

Statesvar Component = React.createClass({ getInitialState: function () {

return { name: ‘Everyone’ }; }, render: function () {

return <div>Hello, {this.states.name}</div>; }});

React.render(<Component />, document.getElementById('container'));

https://jsfiddle.net/69z2wepo/10186/

ComponentsWe know - 1. render() 2. getInitialState() 3. getDefaultProps()

Advanced:4. mixins: [ ... ] - https://facebook.github.io/react/docs/addons.html5. propTypes: { ... }6. statics7. displayName: "..."

Read More - Component Specs

PropTypes propTypes: {

email: React.PropTypes.string.isRequired,seats: React.PropTypes.number,callback: React.PropTypes.func,isClosed: React.PropTypes.bool,enum: React.PropTypes.oneOf(['M','F']),

message: React.PropTypes.instanceOf(Message), element: React.PropTypes.element, // react element node: React.PropTypes.node, // num, string, element // ...or array of those customProp: function(props, propName, componentName) {

if (!/matchme/.test(props[propName])) { return new Error('Validation failed!');

} }

Dom Nodes / Refs<input ref="myInput">

this.refs.myInput

React.findDOMNode(this.refs.myInput).focus()React.findDOMNode(this.refs.myInput).value

Hands on

https://jsfiddle.net/69z2wepo/10201/https://jsfiddle.net/69z2wepo/10207/

Your message

Add

1. Message 12. Message 2

Class setsvar cx = require('classnames');

render: function() { var classes = cx({

'message': true,'message-pinned': this.props.isPinned,'message-read': this.props.isRead

});

return <div className={classes}>Am a note!</div>;}

How we write React - Best Practiceshttps://github.com/planningcenter/react-patterns

Thank you