React 101

Example
Html
<div id=“dropdown”></div>
Javascript
$(function(){
$(‘#dropdown’).dropdown()
})

gulp.src('script/lib/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'))
.pipe(concat('all.js'))

View( ) to Action( )
@context.executeAction(documentAction.New,data)

Action( ) to Dispatch( )
context.dispatch(‘NewDocument', data)

Dispatch( ) to Store( )
'NewDocument': 'newDocument'

Store( ) To View( )
@context.getStore(contentStore).addChangeListener(@_onContentChange)

building large applications with data that changes over time.

Why React?
• Simple
• Declarative
• Build Composable Components

• React components can only render a single root node.

var Nav;
// Input (JSX):
var app = <Nav color="blue" />;
// Output (JS):
var app = React.createElement(Nav, {color:"blue"});

var Nav, Profile;
// Input (JSX):
var app = <Nav color="blue"><Profile>click</Profile></Nav>;
// Output (JS):
var app = React.createElement(
Nav,
{color:"blue"},
React.createElement(Profile, null, "click")
);

Attribute
// Input (JSX):
var person = <Person name={window.isLoggedIn ? window.name : ''} />;
// Output (JS):
var person = React.createElement(
Person,
{name: window.isLoggedIn ? window.name : ''}
);

Boolean
// These two are equivalent in JSX for disabling a button
<input type="button" disabled />;
<input type="button" disabled={true} />;
// And these two are equivalent in JSX for not disabling a button
<input type="button" />;
<input type="button" disabled={false} />;

Children
var content = <Container>{window.isLoggedIn ? <Nav /> : <Login />}</Container>;
// Output (JS):
var content = React.createElement(
Container,
null,
window.isLoggedIn ? React.createElement(Nav) : React.createElement(Login)
);

HTML Tags vs. React Components
• class => className
• for => htmlFor

createClass
createElement
createFactory

createElement
type,conﬁg,child

Spread Attributes - 1
var props = {};
props.foo = x;
props.bar = y;
var component = <Component {...props} />;

Spread Attribute - 2
var props = { foo: 'default' };
var component = <Component {...props} foo={'override'} />;
console.log(component.props.foo); // 'override'

Html
<div dangerouslySetInnerHTML={{__html: ‘<span>123</span>'}} />

Custom HTML Attributes
#input
<div data-custom-attribute="foo" />
#output
<div custom-attribute="foo" />

var LikeButton = React.createClass({
handleClick: function(event) {
alert(‘click’)
},
render: function() {
return (
<a onClick={this.handleClick}>
like
</a>
);
}
});

var Avatar = React.createClass({
return (
<div>
<p>{this.props.username} <p/>
</div>
);
}
});

React.createClass({
propTypes: {
optionalArray: React.PropTypes.array,
optionalBool: React.PropTypes.bool,
optionalFunc: React.PropTypes.func
}
}

getDefaultProps: function() {
return {
value: 'default value'
};
}

var MyComponent = React.createClass({
return (
<ul>
{this.props.results.map(function(result) {
return <ListItemWrapper key={result.id} data={result}/>;
})}
</ul>
);
}
});

Component Lifecycle
• Mounting
• Updating
• Unmounting

Mounting
• getInitialState
• componentWillMount
• componentDidMount

Updating
• componentWillReceiveProps(object nextProps)
• shouldComponentUpdate(object nextProps, object nextState)
• componentWillUpdate(object nextProps, object nextState)
• componentDidUpdate(object prevProps, object prevState)

Unmounting
• componentWillUnmount

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 };

Stateless Functions
function HelloMessage(props) {
return <div>Hello {props.name}</div>;
}
var HelloMessage = (props) => <div>Hello {props.name}</div>;

Transferring with ... in JSX
var { checked, ...other } = this.props;

Refs
<input ref="myInput" />
var input = this.refs.myInput;
var inputValue = input.value;
var inputRect =
input.getBoundingClientRect();

React 101

More Related Content

React 101