an introduction to react.js
TRANSCRIPT
An introduction to React.js
Emanuele DelBono - @emadb
Community Days 2015
History of front-end development…
MV* in the browser
Enterprise Javascript
Quickly became the de-facto standard
Quiz time!
What’s the difference between Service, Factory, Provider?
How many option do you have with ng-class?
Full & Heavy
Full framework
Ajax
Routing
Binding
Modules
#CDays15 – Milano 24, 25 e 26 Marzo 2015
Grazie a
Pla$num(Sponsor(
Who I am
A superhero?
Who I amA software developer.
Passionated about his job.
MVC? No, only the V
People think that React.js is awesome
Not a new idea…
Hello React
var MyComponent = React.createClass({ render: function() { return ( <h1>Hello React</h1> ); } });
React.render( <MyComponent />, document.body);
WHAT LANGUAGE IS THAT?
JSX
JSX lets you create JavaScript objects using HTML syntax
It’s optional…but once you get used to is very helpful
Markup with code?
var MyComponent = React.createClass({ displayName: "MyComponent", render: function() { return ( React.createElement("h1", null, "Hello React") ); } });
React.render( React.createElement(MyComponent, null), document.body);
Markup with code?
“Markup and display logic both share the same concern”
Pete Hunt
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> ); } });
RENDER IS CALLED EVERY TIME THE STATE
CHANGE!
OMG
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
Double Buffering
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> ); } });
WHAT ABOUT BIG
APPS?
Component lifecyclegetDefaultProps
getInitialState
componentWillMount
render
componentDidMount
Architecture guidelines
Flux: React Views
• The react component that we have just seen
• They receive commands from the user and send actions
Flux: React Views
Store
React View
State
Flux: Actions and ActionCreators
• ActionCreators creates actions
• Communicate with the external API
• Dispatch the actions
Flux: React Actions
ActionCreatorReact View
Dispatcher
ActionAPI
Flux: Dispachter
• Dispatch actions to the subscribers
Flux: Dispatcher
Store
Action
Dispatcher
Store Store
Flux: Store
• Manages application state
• Receives messages from the Dispatcher
• Notify views for changes
Flux: Store
Store
React View
Dispatcher
Change event
Request new state
How does it feel?
Browserify/Webpack
Modules done right (in the browser)
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
#CDays14 – Milano 25, 26 e 27 Febbraio 2014
Q&A
Tu#o%il%materiale%di%questa%sessione%su%h#p://www.communitydays.it/%%%Lascia%subito%il%feedback%su%questa%sessione,%potrai%essere%estra#o%per%i%nostri%premi!%%Seguici%su%
%Twi#er%@CommunityDaysIT%%Facebook%h#p://facebook.com/cdaysit%%#CDays15%