This document provides an overview of React including: key features like components, JSX, and unidirectional data flow; installation and technical requirements; the component lifecycle; differences from Angular; popular companies using React; and links to examples. It covers React concepts like states, props, and events. Questions from attendees are invited at the end.

1. Ram Murat Sharma | rammurat.rms.sharma0@gmail.com | @rammrms

2.  Introduction to React?
 React features
 Installation
 React philosophy
 Coupling vs Cohesion
 JSX
 Flux
 Components
 Why components?
 React component life
cycle
◦ Initial phase
◦ Lifetime phase
◦ Tear Down phase
 Data flow
 Virtual DOM
 States and Props
 Events
 Final HTML
 Angular VS React
 Why React?
 Where is React?
 Questions?
 What is Next?

3.  What you should know already
◦ Good knowledge of JavaScript and HTML
◦ Basic understanding of HTML DOM
 Technical preparations
◦ Latest Chrome browser on your system
◦ Your preferred IDE
◦ React developer debugger tool (Currently, available
for Chrome)

6.  A library for building user interfaces
 Designed for View layer
 Created by Facebook/Instagram developers
 Build reusable & Interactive UI components
 Renders your UI and respond to events

7.  Build Components not templates
 Re-render on every change
 Fast Virtual DOM
 Unidirectional data binding
 Reusable and Interactive components
 Components are loosely coupled and highly
cohesive
 JSX (Easy to write)
 No more explicit DOM operations – everything
is declarative
 Own debugger

8.  Individual download
◦ <script src="https://fb.me/react-0.14.5.min.js"></script>
◦ <script src="https://fb.me/react-dom-0.14.5.min.js"></script>
 npm
◦ npm install –-save react react-dom
 bower
◦ bower install –-save react react-dom

10. Coupling
The degree to which each program module relies on
each of the other modules.
Cohesion
The degree to which elements of a module belong
together.

12.  Writing code made easy and faster
 Nothing but writing HTML in JavaScript
 It’s not mandatory, you are allowed to write
your JavaScript instead
JavaScript XML Syntax Transform

13. Flux is the application architecture that Facebook uses for
building client-side web applications. It complements React's
composable view components by utilizing a unidirectional data
flow. It's more of a pattern rather than a formal framework

14. var Hello = React.createClass({
render: function() {
return <div>Hello
{this.props.name}</div>;
}
});
ReactDOM.render(
<Hello name="World" />,
document.getElementById('containe
r')
);
var Hello = React.createClass({
render: function() {
return
React.createElement("div",null,
"Hello ", this.props.name);
}
});
ReactDOM.render(
<Hello name="World" />,
document.getElementById('container')
);

19.  Components are reusable
 Components are composable
 Components are unit testable
 Every component has “state” and “props”
 Components cab be wrapped using
<div>,<span>,<Counter>,<ActionButton>

20. Initialization Phase
Lifetime Phase
Tear Down Phase

21. getDefaultProps()
getInitialState()
componentWillMount()
render()
componentDidMount()

22. componentWillReceiveProps()
shouldComponentUpdate()
componentWillUpdate()
render()
componentDidUpdate()
This is the phase
when an element lives
and changes its states
and properties.

23. componentWillUnmount()

24.  React follows unidirectional data flow like
other MVC framework
 Data flow happen from parent to child in
components by their state and props
 Only immediate parent is allowed to pass the
data to it’s children components

25.  React has Virtual DOM and event system
 React builds a new virtual DOM subtree on every
update
 React always compares its virtual DOM on change
not actual DOM
 Instead of creating new object, react just identify
what changes are took place and update the
referenced object and DOM accordingly
 Optimized for performance and memory
footprint
 All updates happen trough a batch process

27. States
 Every component has default state object.
 State can be set by using this.setState() method.
Probs
 In React props are like the HTML properties.
 They are used to pass data between components.
 name={value} is used to set the property in
component.
 this.props.propertyname is used to read values
which are passed from its parent.

28. var Hello = React.createClass({
getInitialState: function() {
return { author: “”};
},
handleAuthorChange: function(e) {
this.setState({author: e.target.value});
},render: function() {
return (
<div>
<p>Hello {this.props.bookName}</p>
<form>
<input value={this.state.author}
onChange={this.handleAuthorChange}/>
</form>
</div>;
}
});
ReactDOM.render(
<Hello bookName=“Notebook" />,
document.getElementById('container')
);

29.  React has its own
events.
 These events are
attached to its
components.
 These events can
trigger methods as
per need.
Events

30. Final HTML

31. Feature Angular React
Layers MVC V
Technology - JSX
Core Structure MVC Components
Data Flow 2 way Unidirectional
Owner Google Facebook/Instagram
Architecture - Flux
SEO support Phantom JS SEO friendly

32.  Can be used partially for your application
 Fast DOM manipulation
 Components allows you to separate your entities
 Easy to build, grasp and well thought out
 SEO friendly – Components can be rendered client
side and server side
 JSX let you write HTML in JavaScript

33.  JSX
https://jsfiddle.net/reactjs/69z2wepo/
 Without JSX
https://jsfiddle.net/reactjs/5vjqabv3/
 Running Application
https://github.com/rammurat/reactjs-instagram

34.  Facebook
 Instagram
 BBC
 Coursera
 DailyMotion
 Dropbox
 Feedly
 Flipcart
 Khan Academy
 IMDB
 Paypal
 Reddit
 Salesforce
 Yahoo
 Atlassian
 Discovery
 Ebay
 Tesco
 NetFlix

35. Questions?

36. Thank You
What is Next?