Adam Moore
Web Developer
React.js - Flux - React Native
Use React as the V in MVC.
React abstracts away the DOM.
Simpler programming model
Better Performance
Render on the Server or with React Native
React implements one-way reactive data flow.
What it looks like
React.render(
React.DOM.h1({}, "Hello"),
document.getElementById('app'));
The basics
Nesting Elements
var App = (
React.DOM.div({},
React.DOM.h1({}, 'hello world'),
React.DOM.ul({},
React.DOM.li({}, 'List item one'),
React.DOM.li({}, 'List item two')))
);
React.render(
App,
document.getElementById('app'));
Writing with JSX
React.render(
<h1>Hello</h1>,
document.getElementById('app'));
React.render(
React.DOM.h1({}, "Hello"),
document.getElementById('app'));
vs
JSX
var App = (
<div>
<h1>Hello World!</h1>
<ul>
<li>Item one</li>
<li>Item two</li>
</ul>
</div>
);
React.render(App, appEl);
Making Components
var App = React.createClass({
render: function() {
return (
<div>
<h1>Hello World!</h1>
</div>
)
}
});
React.render(<App />, appEl);
Components with Properties
Components with State
React with Flux
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.
Dispatcher is used to broadcast payloads to registered callbacks.
Instructions passed through the Dispatcher to update the store.
Data Store that emits a change event to the View
project...
Learn once - write everywhere
var App = React.createClass({
render: function() {
return (
<View>
<Text>
Welcome to React Native!
</Text>
<Text>
To get started, edit index.ios.js
</Text>
</View>
);
}
});
walkthrough...
Resources:
https://facebook.github.io/react/
https://facebook.github.io/react/blog/
- generator-react-gulp-browserify
- tutorial-setting-up-a-single-page-react-web-app-with-react-router-and-webpack/
Flux
https://facebook.github.io/flux/docs/overview.html
native
http://blog.scottlogic.com/2015/03/26/react-native-retrospective.html
http://www.raywenderlich.com/99473/introducing-react-native-building-apps-javascript
By Adam Moore