Post on 22-Aug-2015
transcript
var MyComponent = React.createClass({ render: function() { return ( <h1>Hello React</h1> ); } });
React.render( <MyComponent />, document.body);
JSX
JSX lets you create JavaScript objects using HTML syntax
It’s optional…but once you get used to is very helpful
var MyComponent = React.createClass({ displayName: "MyComponent", render: function() { return ( React.createElement("h1", null, "Hello React") ); } });
React.render( React.createElement(MyComponent, null), document.body);
Everything is a component
• HTML is defined inside the component
• Component logic
• State is private
• Support parameters
• Events or callback for communication
var Title = React.createClass({ render: function() { return ( <h1>Hello React</h1> ); } });
var SubTitle = React.createClass({ render: function() { return ( <h3>A library for web components</h3> ); } });
var Container = React.createClass({ render: function() { return ( <div>
<Title> <SubTitle>
</div> ); } });
Properties
• Values can be passed to the component as parameters
• Should be immutable
• Useful for passing callback (from parent to child)
var Container = React.createClass({ render: function() { return ( <div> <Title text="Hello react"/> <SubTitle text="A library for web components"/> </div> ); } });
var Title = React.createClass({ render: function() { return ( <h1>{this.props.text}</h1> ); } });
var SubTitle = React.createClass({ render: function() { return ( <h3>{this.props.text}</h3> ); } });
var Container = React.createClass({ render: function(){ return ( <div> <h2> Some title </h2> {this.props.children} </div>); } });
var Panel = React.createClass({ render: function(){ return ( <Container> <div>child one</div> <div>child two</div> </Container>); } });
State
• State is private and represent the internal situation
• State can change using provided methods
var Container = React.createClass({ getInitialState: function(){ return { title: this.props.title, newTitle: 'new title' } }, handleClick: function(){ this.setState({title: this.state.newTitle}); }, handleChg: function(event) { this.setState({newTitle: event.target.value}); }, render: function() { return ( <div> <h1>{this.state.title}</h1> <input type="text" value={this.state.newTitle} onChange={this.handleChg}/> <button onClick={this.handleClick}>Change title</button> </div> ); } });
Virtual DOMJavascript that access to the DOM is slow
console.dir(document.createElement('div'));
A DIV contains about 135 first level properties/function (700 on second level).
A virtual DOM div element contains only 6 properties.
Virtual DOM
• Our code act on a fake DOM
• React.js takes care of generating a DOM patch to update the real DOM
• Every ReactElement is a light, stateless, immutable, virtual representation of a DOM Element
var ClickCounter = React.createClass({ getInitialState: function(){ console.log('getInitialState'); return {count: 0}; }, handleClick: function(){ console.log('handleClick'); this.setState({count: ++this.state.count}); }, render: function() { console.log('rendering....'); return ( <div> <button onClick={this.handleClick}>+</button> <span> {this.state.count} </span> </div> ); } });
Flux: React Views
• The react component that we have just seen
• They receive commands from the user and send actions
Flux: Actions and ActionCreators
• ActionCreators creates actions
• Communicate with the external API
• Dispatch the actions
Flux: Store
• Manages application state
• Receives messages from the Dispatcher
• Notify views for changes
More here…
https://github.com/facebook/react/wiki/Complementary-Tools
https://github.com/enaqx/awesome-react
More topics…
PropTypes for validation
Minxin for extensibility
Server side rendering
Synthetic events
Inline style
React Native