This document provides an introduction to React.js, including: - React.js uses a virtual DOM for improved performance over directly manipulating the real DOM. Components are used to build up the UI and can contain state that updates the view on change. - The Flux architecture is described using React with unidirectional data flow from Actions to Stores to Views via a Dispatcher. This ensures state changes in a predictable way. - Setting up React with tools like Browserify/Webpack for module bundling is discussed, along with additional topics like PropTypes, mixins, server-side rendering and React Native.

1. An introduction to
React.js
Emanuele DelBono - @emadb
Community Days 2015

2. History of front-end development…

4. MV* in the browser

7. Enterprise Javascript

9. Quickly became the de-facto standard

10. Quiz time!

11. What’s the difference between
Service, Factory, Provider?

13. How many option do you
have with ng-class?

15. Full & Heavy
Full framework
Ajax
Routing
Binding
Modules

17. #CDays15 – Milano 24, 25 e 26 Marzo 2015
Grazie a
Pla$num(
Sponsor(

18. Who I am
A superhero?

19. Who I am
A software developer.
Passionated about his
job.

21. MVC? No, only the V

22. People think that
React.js is awesome

32. Not a new idea…

35. Hello React

36. var MyComponent = React.createClass({
render: function() {
return (
<h1>Hello React</h1>
);
}
});
React.render(
<MyComponent />,
document.body);

37. WHAT LANGUAGE IS
THAT?

38. JSX
JSX lets you create JavaScript objects using
HTML syntax
It’s optional…but once you get used to is very
helpful

39. Markup with code?

40. var MyComponent = React.createClass({
displayName: "MyComponent",
render: function() {
return (
React.createElement("h1", null, "Hello React")
);
}
});
React.render(
React.createElement(MyComponent, null),
document.body);

41. Markup with code?
“Markup and display logic both share
the same concern”
Pete Hunt

42. Everything is a
component
• HTML is defined inside the component
• Component logic
• State is private
• Support parameters
• Events or callback for communication

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

47. var Container = React.createClass({
render: function() {
return (
<div>
<Title>
<SubTitle>
</div>
);
}
});

48. Properties
• Values can be passed to the component as
parameters
• Should be immutable
• Useful for passing callback (from parent to
child)

49. var Container = React.createClass({
render: function() {
return (
<div>
<Title text="Hello react"/>
<SubTitle text="A library for web components"/>
</div>
);
}
});

50. var Title = React.createClass({
render: function() {
return (
<h1>{this.props.text}</h1>
);
}
});
var SubTitle = React.createClass({
render: function() {
return (
<h3>{this.props.text}</h3>
);
}
});

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

52. State
• State is private and represent the internal
situation
• State can change using provided methods

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

54. RENDER IS CALLED
EVERY TIME THE STATE
CHANGE!

55. OMG

56. Virtual DOM
Javascript 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.

57. 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

58. Double Buffering

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

62. WHAT
ABOUT BIG
APPS?

63. Component lifecycle
getDefaultProps
getInitialState
componentWillMount
render
componentDidMount

65. Architecture guidelines

67. Flux: React Views
• The react component that we have just seen
• They receive commands from the user and
send actions

68. Flux: React Views
Store
React View
State

69. Flux: Actions and
ActionCreators
• ActionCreators creates actions
• Communicate with the external API
• Dispatch the actions

70. Flux: React Actions
ActionCreatorReact View
Dispatcher
Action
API

71. Flux: Dispachter
• Dispatch actions to the subscribers

72. Flux: Dispatcher
Store
Action
Dispatcher
Store Store

73. Flux: Store
• Manages application state
• Receives messages from the Dispatcher
• Notify views for changes

74. Flux: Store
Store
React View
Dispatcher
Change
event
Request
new state

76. How does it feel?

92. Browserify/Webpack
Modules done right (in the browser)

93. More here…
https://github.com/facebook/react/wiki/Complementary-Tools
https://github.com/enaqx/awesome-react

94. More topics…
PropTypes for validation
Minxin for extensibility
Server side rendering
Synthetic events
Inline style
React Native

95. <Thankyou />
@emadb
http://ema.codiceplastico.com

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