An introduction to React.js

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

<Thankyou />

@emadb

http://ema.codiceplastico.com

#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%