React JS and Redux

Basic concepts of React framework and Redux state management. Brief explanation for Ciklum interns under internship program. Basic level.

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

2. FEATURES
➤One-way data flow
➤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.

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

4. VIRTUAL DOM
Dom mirroring

5. 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 fires whenever something changes

6. 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…

9. 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);

10. REACT COMPONENT AND PROPS

11. REACT COMPONENT AND STATE

12. MANAGING STATE AND COMPONENT LIFECYCLE

13. 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)

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