Date post: | 21-Aug-2015 |
Category: |
Technology |
Upload: | philosio |
View: | 347 times |
Download: | 21 times |
What is React?
UI Compone
nts
Virtual DOM
Immutable data
Can be used with any other frameworks (Ember, Angular…)
Abstract away the DOM and does all operations on the VD before updating the real DOM
Data flow in one direction, which brings a simple model to reason about.
More about React
• JavaScript Library for building UI, only UI
• Focus on rendering or V in MVC
• Implements unidirectional data flow
• Can power native apps with React Native
• Built and maintains by Facebook
ReactJS
ReactJS: Building a book store
JSX Syntax
var Book = React.createClass({ render: function() { return <div>Title: {this.props.title}</div>; }});
JSX Compiler
React.render(<Book title="React" />, document.body);
ReactJS: Building a book store
JS Syntax
var Book = React.createClass({displayName: "Book", render: function() { return React.createElement("div", null, "Title: ", this.props.title); }});
React.render(React.createElement(Book, {title: "React"}), document.body);
ReactJS: Building a book storeimport React from 'react';import Header from './components/header';import Main from './components/main';import Footer from './components/Footer';
var BookStore = React.createClass({render: function(){
return (<div>
<Header/><Main/><Footer/>
</div>);
}});
React.render(<BookStore/>, document.getElementById('wrapper'));
ES6 import module
Create the component
Flux Architecture
Flux Architecture
Actions Dispatchers Stores React
React Native in a nutshell
Touch Handling
Native Compone
nts
Styles &
Layout
ES6 support out of
the box
Extensibility
Polyfill
React vs. React Native
var Book = React.createClass({ render: function() { return <div>
<span>Title: {this.props.title}</span></div>;
}});
var Book = React.createClass({ render: function() { return <View>
<Text>Title: {this.props.title}</Text>
</View>; }});
React React Native
Render natively inside their environment
React Native’s workflow ?
Workflow
$ npm install react-native-cli -g
$ react-native init whatsapp
$ cd whatsapp
$ Open whatsapp on Xcode
$ Build and run whatsapp
Useful command
$ CMD+D or Crtl+D to open contextual window
$ CMD+R to refresh