![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.](https://image.slidesharecdn.com/lesson7slides-170505093346/85/React-JS-and-Redux-14-320.jpg)
React JS and Redux
- 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.