React JS and Redux

REACT JS
A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES
➤ Declarative
➤ Component-Based
➤ Learn Once, Write Anywhere
React is all about building components. The only thing to do with react is building components . They are incapsulated,
reusable and easy testing.
Imperative: $(button).removeClass('red').addClass('blue').
Declarative: this.setState({button: ‘blue’}); // color: this.state.button
It is a component oriented abstraction

FEATURES
➤ One-way data ﬂow
➤ Virtual DOM
➤ JSX
➤ Architecture beyond HTML
➤ Simple semantics (props, state, lifecycle)
➤ React Native
virtual-dom is a collection of modules designed to provide a declarative way of representing the DOM for your app.
So instead of updating the DOM when your application state changes, you simply create a virtual tree or VTree,
which looks like the DOM state that you want.
JSX is a statically-typed, object-oriented programming language designed to run on modern web browsers.
Javascript XML based extension that compile just the template part of your code.
faster (12% faster on iOS 5.1, 29% faster on Android 2.3) / safer / easier ( offer solid class system )
The basic architecture of React applies beyond rendering HTML in the browser.
React architecture in IOS/Android native apps.

No classical MVC just COMPONENTS and one way data flow!!!
VS

RENDER CALLS ON EVERY STATE UPDATE
render: function () {
return <p> Hello {this.props.text}</p>;
}
➤ <p> - pure javascript, in-memory representation of DOM node
➤ render ﬁres whenever something changes

PROPS AND STATE
PROPS - data that can be IMMUTABLE
const childComponent = React.createClass({ 
… 
doStuff: function() { 
this.props.foo = ‘smth else’; < error 
} 
})
STATE - data that can be MUTABLE
const childComponent = React.createClass({ 
… 
doStuff: function() { 
this.setState({foo: ’smth else’}); < ok 
} 
})
Components can get immutable data via props from parent components (flow)
or managed their own state via state…

INLINE STYLES
var divStyle = {
padding: 10,
margin: 10,
backgroundColor: this.props.bgcolor,
color: "#333",
display: "inline-block",
fontFamily: "monospace",
fontSize: "32",
textAlign: "center"
};
ReactDOM.render(<div style={divStyle}>Hello World!</div>, mountNode);

MANAGING STATE AND COMPONENT LIFECYCLE

REACT ROUTING
React Router is a powerful routing library built on top of React that helps you add new screens
and flows to your application incredibly quickly, all while keeping the URL in sync with what's
being displayed on the page.
// First we import some modules...
import { Router, Route, IndexRoute, Link, hashHistory } from 'react-router'
render((
<Router history={hashHistory}>
<Route path="/" component={App}>
<IndexRoute component={Home} />
<Route path="about" component={About} />
<Route path="inbox" component={Inbox} />
</Route>
</Router>
), document.body)

PROS AND CONS
➤ License
"The license granted hereunder will terminate, automatically and without notice, if you initiate directly or indirectly, or
take a direct financial interest in, any Patent Assertion: (i) against Facebook or any of its subsidiaries or corporate
affiliates, (ii) against any party if such Patent Assertion arises in whole or in part from any software, technology,
product or service of Facebook or any of its subsidiaries or corporate affiliates, or (iii) against any party relating to the
Software. [...]
CONS
PROS
➤ Components are reusable anywhere in your app.
➤ Testing / Isolated components / Virtual DOM / Isomorphic
➤ Simple UI structure.
➤ It's not a full framework.
➤ It's kind of verbose.
Writing components isn't as straight forward as pure HTML & JS , everything inside component…
➤ It's not a full framework.

React JS and Redux

More Related Content

What's hot (20)

Similar to React JS and Redux (20)

Recently uploaded (20)

React JS and Redux