React 101

1. Frontend

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

4. javascript Web

10. Build

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

20. WebPack

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

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

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

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

31. building large applications with data that changes over time.

32. Why React?
• Simple
• Declarative
• Build Composable Components

33. • React components can only render a single root node.

34. Transform

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

36. 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")
);

37. JavaScript Expressions

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

39. 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} />;

40. 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)
);

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

42. createClass
createElement
createFactory

43. createElement
type,config,child

44. Attributes

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

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

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

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

49. Event

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

51. Props

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

53. Props validation

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

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

56. State

57. var LikeButton = React.createClass({
getInitialState: function() {
return {liked: false};
},
handleClick: function(event) {
this.setState({liked: !this.state.liked});
},
render: function() {
var text = this.state.liked ? 'like' : 'haven't liked';
return (
<p onClick={this.handleClick}> You {text} this. Click to toggle. </p>
);
}
});

58. Key

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

60. Component Lifecycle
• Mounting
• Updating
• Unmounting

61. Mounting
• getInitialState
• componentWillMount
• componentDidMount

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

63. Unmounting
• componentWillUnmount

64. Mixin

65. var SetIntervalMixin = {
componentWillMount: function() {
this.intervals = [];
},
setInterval: function() {
this.intervals.push(setInterval.apply(null, arguments));
},
componentWillUnmount: function() {
this.intervals.forEach(clearInterval);
}
};

66. var TickTock = React.createClass({
mixins: [SetIntervalMixin], // Use the mixin
getInitialState: function() {
return {seconds: 0};
},
componentDidMount: function() {
this.setInterval(this.tick, 1000); // Call a method on the mixin
},
tick: function() {
this.setState({seconds: this.state.seconds + 1});
},
render: function() {
return (
<p>
React has been running for {this.state.seconds} seconds.
</p>

67. ES6 Class

68. 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>
);
}
}

69. Counter.propTypes = { initialCount: React.PropTypes.number };
Counter.defaultProps = { initialCount: 0 };

70. No Autobinding,No Mixins

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

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

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

74. Simple is the best