Introduction to React and Flux (CodeLabs)

React + Flux
Eueung Mulyana
http://eueung.github.io/js/react
JS CodeLabs | Attribution-ShareAlike CC BY-SA

1 / 40

Agenda
React Basics #1
React Basics #2
Flux
2 / 40

 React Basics #1
A JavaScript library for building UIs | React
3 / 40

<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8"/>
<title>HelloReact!</title>
<scriptsrc="react-0.14.5/react.js"></script>
<scriptsrc="react-0.14.5/react-dom.js"></script>
<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"
</head>
<body>
<divid="example"></div>
<scripttype="text/babel">
ReactDOM.render(
<h1>Hello,world!</h1>,
document.getElementById('example')
);
</script>
</body>
</html>
Render @Browser
hello-00-A.html
4 / 40

Render @Browser
hello-01-B.html
src/hello-01.js
ReactDOM.render(
);
<!DOCTYPEhtml>
<html>
<head>
<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/babel-
</head>
<body>
<scripttype="text/babel"src="src/hello-01.js"></script
</body>
</html>
5 / 40

<!DOCTYPEhtml>
<html>
<head>
</head>
<body>
<scriptsrc="build/hello-02.js"></script>
</body>
</html>
#src/hello-02.js(JSX)
ReactDOM.render(
);
#build/hello-02.js(compiled)
ReactDOM.render(React.createElement(
'h1',
null,
'Hello,world!'
),document.getElementById('example'));
Precompile
JSX to vanilla JS
npminstall-gbabel-cli
npminstall-gbabel-preset-react
npminstall-gbabel-preset-es2015
$>babel--presetsreacthello-02.js--out-dir=../build
hello-02.js->..buildhello-02.js
6 / 40

this.props

hello-03.js
<!DOCTYPEhtml>
<html>
<head>
</head>
<body>
</body>
</html>
varHelloMessage=React.createClass({
render:function(){
return
}
});
ReactDOM.render(
<div>Hello{this.props.name}</div>;
<HelloMessagename="John"/>,document.getElem
7 / 40

hello-04.js
varTimer=React.createClass({
getInitialState:function(){
return{secondsElapsed:0};
},
tick:function(){
this.setState({secondsElapsed:this.state.secondsElapsed+
},
componentDidMount:function(){
this.interval=setInterval(this.tick,1000);
},
componentWillUnmount:function(){
clearInterval(this.interval);
},
render:function(){
return(
);
}
});
ReactDOM.render(
<div>SecondsElapsed:{this.state.secondsElapsed}</div
<Timer/>,document.getElementById('example'));
this.state

8 / 40

TodoApp
varTodoList=React.createClass({
render:function(){
varcreateItem=function(item){
return
};
return
}
});
hello-05.js
<likey={item.id}>{item.text}</li>;
<ul>{this.props.items.map(createItem)}</ul>;
varTodoApp=React.createClass({
return{items:[],text:''};
},
onChange:function(e){
this.setState({text:e.target.value});
},
handleSubmit:function(e){
e.preventDefault();
varnextItems=this.state.items.concat([{text:this.state
varnextText='';
this.setState({items:nextItems,text:nextText});
},
render:function(){
return(
<h3>TODO</h3>
<TodoListitems={this.state.items}/>
<formonSubmit={this.handleSubmit}>
<inputonChange={this.onChange}value={this.state.te
<button>{'Add#'+(this.state.items.length+1)}
</form>
</div>
);
}
});
ReactDOM.render(
<div>
<TodoApp/>,document.getElementById('example'
9 / 40

hello-06.html
<!DOCTYPEhtml>
<html>
<head>
<scriptsrc="https://facebook.github.io/react/js/marked.min.js"
</head>
<body>
</body>
</html>
MarkdownEditor
A Component Using External Plugins

11 / 40

hello-06.js
varMarkdownEditor=React.createClass({
return{value:'Typesome*markdown*here!'};
},
handleChange:function(){
this.setState({value:this.refs.textarea.value});
},
rawMarkup:function(){
return{__html:marked(this.state.value,{sanitize:true
},
render:function(){
return(
<h3>Input</h3>
<textarea
onChange={this.handleChange}
ref="textarea"
defaultValue={this.state.value}/>
<h3>Output</h3>
<div
className="content"
dangerouslySetInnerHTML={this.rawMarkup()}
/>
</div>
);
}
});
ReactDOM.render(
<divclassName="MarkdownEditor">
<MarkdownEditor/>,document.getElementById('e
12 / 40

 React Basics #2
Starter Kit Examples
13 / 40

<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<title>BasicExample</title>
<linkrel="stylesheet"href="../shared/css/base.css"/>
</head>
<body>
<h1>BasicExample</h1>
<divid="container">
<p>ToinstallReact,followtheinstructionson<ahref
<p>Ifyoucanseethis,Reactisnotworkingright.IfyoucheckedoutthesourcefromGitHubmakesuretorun
</div>
<h4>ExampleDetails</h4>
<p>ThisiswritteninvanillaJavaScript(withoutJSX)andtransformedinthebrowser.
<p>LearnmoreaboutReactat<ahref="https://facebook.github.io/react"
<scriptsrc="../../react-0.14.5/react.js"></script>
<scriptsrc="../../react-0.14.5/react-dom.js"></script>
<script>...</script>
</body>
</html>
Example #1
React with Vanilla JS
<script>
varExampleApplication=React.createClass({
render:function(){
varelapsed=Math.round(this.props.elapsed /100);
varseconds=elapsed/10+(elapsed%10?'':'.0'
varmessage=
'Reacthasbeensuccessfullyrunningfor'+seconds+
returnReact.DOM.p(null,message);
}
});
//CallReact.createFactoryinsteadofdirectlycallExample
varExampleApplicationFactory=React.createFactory(ExampleA
varstart=newDate().getTime();
setInterval(function(){
ReactDOM.render(
ExampleApplicationFactory({elapsed:newDate().getTime()
document.getElementById('container')
);
},50);
</script>
14 / 40

Example #2
React with JSX
<!DOCTYPEhtml>
<html>
<head>
<title>BasicExamplewithJSX</title>
</head>
<body>
<h1>BasicExamplewithJSX</h1>
<divid="container">
</div>
<p>ThisiswrittenwithJSXandtransformedinthebrowser.
<scripttype="text/babel">...</script>
</body>
</html>
render:function(){
varmessage=
return
}
});
ReactDOM.render(
);
},50);
</script>
<p>{message}</p>;
<ExampleApplicationelapsed={newDate().getTime()-star
15 / 40

Example #1

Example #2

16 / 40

Example #3
Basic Click Counter (JSX)

<!DOCTYPEhtml>
<html>
<head>
<title>BasicExamplewithClickCounter</title>
</head>
<body>
<divid="message"align="center"></div>
varCounter=React.createClass({
return{clickCount:0};
},
handleClick:function(){
this.setState(function(state){
return{clickCount:state.clickCount+1};
});
},
render:function(){
return(<h2onClick={this.handleClick}>Clickme!Num
}
});
ReactDOM.render(<Counter/>,document.getElementById('m
</script>
</body></html>
17 / 40

<!DOCTYPEhtml>
<html>
<head>...</head>
<body>
...
<scripttype="text/babel"src="example.js"></script>
</body>
</html>
Example #4
External JSX

example.js
render:function(){
varseconds=elapsed/10+(elapsed%10?'':'.0');
varmessage='Reacthasbeensuccessfullyrunningfor'
return
}
});
ReactDOM.render(
},50);
<p>{message}</p>;
<ExampleApplicationelapsed={newDate().get
18 / 40

Example #5
Precompiled JSX (Vanilla JS @Browser)

$>babel--presetsreactexample.js--out-dir=build
example.js->buildexample.js
<!DOCTYPEhtml>
<html>
<head>
<title>BasicExamplewithPrecompiledJSX</title>
</head>
<body>
<h1>BasicExamplewithPrecompiledJSX</h1>
<divid="container">
<p>Ifyoucanseethis,Reactisnotrunning.Tryrunni
<pre>...</pre>
</div>
<p>ThisiswrittenwithJSXinaseparatefileandprecomp
<pre>
npminstall-gbabel
cdexamples/basic-jsx-precompile/
babelexample.js--out-dir=build
</pre>
<p>LearnmoreaboutReactat<ahref="https://facebook.gi
<scriptsrc="build/example.js"></script>
</body>
</html>
19 / 40

Example #6
JSX and Harmony (ES6|ES2015)
<!DOCTYPEhtml>
<head>
<title>BasicExamplewithJSXandES6features</title>
</head>
<body>
<h1>BasicExamplewithJSXandES6features</h1>
<divid="container">
</div>
<p>ThisiswrittenwithJSXwithHarmony(ES6)syntaxandtransformedinthebrowser.
</body>
</html>
<html>
classExampleApplicationextendsReact.Component{
render(){
varmessage=`Reacthasbeensuccessfullyrunningfor
return
}
}
setInterval(()=>{
ReactDOM.render(
},50);
</script>
<p>{message}</p>;
<ExampleApplicationelapsed={newDate()
20 / 40

Example #7
CommonJS & Browserify (Bundled Vanilla JS @ Browser)
package.json
{
"name":"react-basic-commonjs-example",
"description":"BasicexampleofusingReactwithCommonJS"
"main":"index.js",
"dependencies":{
"babelify":"^6.3.0",
"react":"^0.14.0-rc1",
"react-dom":"^0.14.0-rc1",
"watchify":"^3.4.0"
},
"scripts":{
"start":"watchifyindex.js-v-tbabelify-obundle.js"
}
} npminstall
npmstart
21 / 40

index.js
'usestrict';
varReact=require('react');
varReactDOM=require('react-dom');
render:function(){
varseconds=elapsed/10+(elapsed%10?'':'.0');
varmessage=
return
}
});
ReactDOM.render(
);
},50);
<p>{message}</p>;
<ExampleApplicationelapsed={newDate().getTime()-start
index.html
<!DOCTYPEhtml>
<html>
<head>
<title>BasicCommonJSExamplewithBrowserify</title>
</head>
<body>
<h1>BasicCommonJSExamplewithBrowserify</h1>
<divid="container">
<p>Ifyoucanseethis,Reactisnotworkingright.Ify
</div>
<p>ThisiswrittenwithJSXinaCommonJSmoduleandpreco
<pre>npmstart</pre>
<p>LearnmoreaboutReactat<ahref="https://facebook.git
<scriptsrc="bundle.js"></script>
</body>
</html>
22 / 40

Example #8

index.html
<!DOCTYPEhtml>
<html>
<head>
<title>QuadraticFormulaCalculator</title>
</head>
<body>
<h1>QuadraticFormulaCalculator</h1>
<divid="container">
<p>Ifyoucanseethis,Reactisnotworkingright.This
</div>
<p>ThisiswrittenwithJSXinaseparatefileandtransfo
<p>LearnmoreaboutReactat<ahref="https://facebook.git
<scripttype="text/babel"src="example.js"></script>
</body>
</html>
23 / 40

varQuadraticCalculator=React.createClass({
getInitialState:function(){return{a:1,b:3,c:-4};},
handleInputChange:function(key,event){
varpartialState={};
partialState[key]=parseFloat(event.target.value);
this.setState(partialState);
},
render:function(){
vara=this.state.a;varb=this.state.b;varc=this.state.c;
varroot=Math.sqrt(Math.pow(b,2)-4*a*c);
vardenominator=2*a;
varx1=(-b+root)/denominator;
varx2=(-b-root)/denominator;
return(
<strong><em>ax</em><sup>2</sup>+<em>bx</em>+<em>c</em>=0</strong>
<h4>Solvefor<em>x</em>:</h4>
<p>
<label>a:<inputtype="number"value={a}onChange={this.handleInputChange.bind(null,
<label>b:<inputtype="number"value={b}onChange={this.handleInputChange.bind(null,
<label>c:<inputtype="number"value={c}onChange={this.handleInputChange.bind(null,
x:<strong>{x1},{x2}</strong>
</p>
</div>
);
}
});
ReactDOM.render(
<div>
<QuadraticCalculator/>,document.getElementById('container'));
example.js
24 / 40

Example #9
WebComponents
25 / 40

<!DOCTYPEhtml>
<head>
<metahttp-equiv='Content-type'content='text/html;charset=utf-8'
<title>BasicExamplewithWebComponents</title>
</head>
<body>
<h1>BasicExamplewithWebComponents</h1>
<divid="container">
</div><br/><br/>
<p>ThisexampledemonstratesWebComponent/ReactComponentinteroperabilitybyrenderingaReactComponent,whichrendersaW
<p>LearnmoreaboutReactat<ahref="http://facebook.github.io/react"
<scriptsrc="../shared/thirdparty/webcomponents.js"></script
<scripttype="text/babel">... </script>
</body>
</html>
<html>
index.html
varproto=Object.create(HTMLElement.prototype,{
createdCallback:{
value:function(){
varmountPoint=document.createElement('span');
this.createShadowRoot().appendChild(mountPoint);
varname=this.getAttribute('name');
varurl='https://www.google.com/search?q='+encodeU
ReactDOM.render(
}
}
});
document.registerElement('x-search',{prototype:proto});
classHelloMessageextendsReact.Component{
render(){
return<div>Hello<x-searchname={this.props.name}/>!
}
}
//MountReactComponent(whichusesWebComponentwhichuses
varcontainer=document.getElementById('container');
ReactDOM.render(
</script>
<ahref={url}>{name}</a>,mountPoint);
<HelloMessagename="JimSproch"/>,containe
26 / 40

Example #10

<divid="container">
<spanclass="animateExample"data-reactid=".0">
<divclass="animateItem"style="left:0px;background:red;"
<divclass="animateItem"style="left:128px;background:gra
<divclass="animateItem"style="left:256px;background:blue;"
</span>
</div>
27 / 40

index.html
<!DOCTYPEhtml>
<head>
<title>ExamplewithTransitions</title>
<linkrel="stylesheet"href="transition.css"/>
</head>
<body>
<h1>ExamplewithTransitions</h1>
<divid="container">
</div>
<p>ThisiswrittenwithJSXandtransformedinthebrowser.
<scriptsrc="../../react-0.14.5/react-with-addons.js"></
</body>
</html>
<html>
varCSSTransitionGroup=React.addons.CSSTransitionGroup;
varINTERVAL=2000;
varAnimateDemo=React.createClass({
getInitialState:function(){return{current:0};},
componentDidMount:function(){this.interval=setInterva
componentWillUnmount:function(){clearInterval(this.inte
tick:function(){this.setState({current:this.state.curr
render:function(){
varchildren=[];
varpos=0;
varcolors=['red','gray','blue'];
for(vari=this.state.current;i<this.state.current
varstyle={left:pos*128,background:colors[i%
pos++;
children.push(
}
return(
{children}
</CSSTransitionGroup>
);
}
});
ReactDOM.render(
</script>
<divkey={i}className="animateItem"sty
<CSSTransitionGroupclassName="animateExample"transit
<AnimateDemo/>,document.getElementById('co
28 / 40

transition.css
.example-enter,
.example-leave{
-webkit-transition:all.25s;
transition:all.25s;
}
.example-enter,
.example-leave.example-leave-active{
opacity:0.01;
}
.example-leave.example-leave-active{
margin-left:-128px;
}
.example-enter{
margin-left:128px;
}
.example-enter.example-enter-active,
.example-leave{
margin-left:0;
opacity:1;
}
.animateExample{
display:block;
height:128px;
position:relative;
width:384px;
}
.animateItem{
color:white;
font-size:36px;
font-weight:bold;
height:128px;
line-height:128px;
position:absolute;
text-align:center;
-webkit-transition:all.25s;/*TODO:makethisamoveanim
transition:all.25s;/*TODO:makethisamoveanimation*/
width:128px;
}
29 / 40

 Flux
Easy Flux Example | @tonyspiro
30 / 40

Structure
app.js
stores/ListStore.js
dispatcher/AppDispatcher.js
components/
AppRoot.jsx
NewItemForm.jsx
31 / 40

{
...,
"dependencies":{
"babelify":"^7.2.0",
"babel-preset-react":"^6.3.13",
"babel-preset-es2015":"^6.3.13",
"browserify":"^12.0.1",
"events":"^1.1.0",
"flux":"^2.1.1",
"gulp":"^3.9.0",
"gulp-rename":"^1.2.1",
"gulp-uglify":"^1.5.1",
"lodash":"^3.10.1",
"react":"^0.14.5",
"react-dom":"^0.14.5",
"run-sequence":"^1.1.5",
"vinyl-source-stream":"^1.1.0"
},
"devDependencies":{},
...
}
npminstall-greactreact-dombabelifybrowserifyfluxlodashevents
npminstall-gbabel-preset-reactbabel-preset-es2015
npminstall-gvinyl-source-streamgulpgulp-uglifygulp-renamerun-sequence
package.json
33 / 40

vargulp=require('gulp');
varbrowserify=require('browserify');
varbabelify=require('babelify');
varsource=require('vinyl-source-stream');
varuglify=require('gulp-uglify');
varrename=require('gulp-rename');
varrunSequence=require('run-sequence');
gulp.task('build',function(){
returnbrowserify({
entries:'app.js',
extensions:['.jsx'],
debug:true
})
.transform(babelify,{presets:['es2015','react']})
.bundle()
.pipe(source('bundle.js'))
.pipe(gulp.dest('dist'));
});
gulp.task('compress',function(){
returngulp.src('./dist/bundle.js')
.pipe(uglify())
.pipe(rename({suffix:'.min'}))
.pipe(gulp.dest('dist'));
});
gulp.task('default',function(cb){
runSequence('build','compress',cb);
});
gulpfile.js
gulp.task('watch',function(){
gulp.watch("./*.js",['default']);
gulp.watch("./components/*.jsx",['default']);
gulp.watch("./dispatcher/*.js",['default']);
gulp.watch("./stores/*.js",['default']);
});
34 / 40

index.html
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>EasyFluxExample</title>
</head>
<body>
<h1>EasyFluxExample</h1>
<divid="app-root"></div>
<scriptsrc="dist/bundle.min.js"></script>
</body>
</html>
$>gulp
[09:25:53]Usinggulpfile./gulpfile.js
[09:25:53]Starting'default'...
[09:25:53]Starting'build'...
[09:25:59]Finished'build'after5.48s
[09:25:59]Starting'compress'...
[09:26:04]Finished'compress'after4.99s
[09:26:04]Finished'default'after10s
app.js
importReactfrom'react';
importReactDOMfrom'react-dom';
importAppRootfrom'./components/AppRoot';
ReactDOM.render(<AppRoot/>,document.getElementById('app-root
35 / 40

ListStore.js
import{EventEmitter}from'events';
import_from'lodash';
//-----------------------------------
letListStore=_.extend({},EventEmitter.prototype,{
items:[{name:'Item1',id:0},{name:'Item2',id:
getItems:function(){returnthis.items;},
addItem:function(new_item){this.items.push(new_item);},
removeItem:function(item_id){
letitems=this.items;
_.remove(items,(item)=>{returnitem_id==item.id;});
this.items=items;
},
emitChange:function(){this.emit('change');},
addChangeListener:function(callback){this.on('change',callback);},
removeChangeListener:function(callback){this.removeListener(
});
//-----------------------------------
exportdefaultListStore;
AppDispatcher.js
import{Dispatcher}from'flux';
importListStorefrom'../stores/ListStore';
//-----------------------------------
letAppDispatcher=newDispatcher();
//-----------------------------------
AppDispatcher.register((payload)=>{
letaction=payload.action;
letnew_item=payload.new_item;
letid=payload.id;
switch(action){
case'add-item':ListStore.addItem(new_item);break;
case'remove-item':ListStore.removeItem(id);break;
default:returntrue;
}
ListStore.emitChange();
returntrue;
});
//-----------------------------------
exportdefaultAppDispatcher;
36 / 40

importListStorefrom'../stores/ListStore';
importAppDispatcherfrom'../dispatcher/AppDispatcher';
importNewItemFormfrom'./NewItemForm';
//-----------------------------------
letgetListState=()=>{return{items:ListStore.getItems()};}
//-----------------------------------
classAppRootextendsReact.Component{
constructor(){super();this.state=getListState();}
_onChange(){this.setState(getListState());}
componentDidMount() {ListStore.addChangeListener(this._onChange.bind(this));}
componentWillUnmount(){ListStore.removeChangeListener(this._onChange.bind(this));}
removeItem(e){
letid=e.target.dataset.id;
AppDispatcher.dispatch({action:'remove-item',id:id});
}
render(){
let_this=this;
letitems=ListStore.getItems();
letitemHtml=items.map((listItem)=>{
return
});
return( ;
}
}
//-----------------------------------
exportdefaultAppRoot;
<likey={listItem.id}>{listItem.name}<buttononClick={_this.removeItem
<div><ul>{itemHtml}</ul><NewItemForm/></div>)
AppRoot.jsx
37 / 40

NewItemForm.jsx
importReactDOMfrom'react-dom';
importAppDispatcherfrom'../dispatcher/AppDispatcher';
//-----------------------------------
classNewItemFormextendsReact.Component{
createItem(e){
e.preventDefault();
letid=guid();
letitem_title=ReactDOM.findDOMNode(this.refs.item_title).value.trim();
ReactDOM.findDOMNode(this.refs.item_title).value='';
AppDispatcher.dispatch({action:'add-item',new_item:{id:id,name:item_title}
}
render(){
return
}
}
//-----------------------------------
functionguid(){
functions4(){returnMath.floor((1+Math.random())*0x10000).toString(16).substri
returns4()+s4()+'-'+s4()+'-'+s4()+'-'+s4()+'-'+s4()+s4()+s4();
}
//-----------------------------------
exportdefaultNewItemForm;
<formonSubmit={this.createItem.bind(this)}><inputtype="text"ref="item_
38 / 40

References
1. A JavaScript library for building user interfaces | React
2. Getting Started | React
3. Building A Simple React Application Using The Flux Pattern: A Step-By-Step Guide
4. flux/examples/flux-todomvc
39 / 40


END
Eueung Mulyana
http://eueung.github.io/js/react
JS CodeLabs | Attribution-ShareAlike CC BY-SA
40 / 40

Introduction to React and Flux (CodeLabs)

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Introduction to React and Flux (CodeLabs)

Similar to Introduction to React and Flux (CodeLabs) (20)

More from Eueung Mulyana

More from Eueung Mulyana (20)

Recently uploaded

Recently uploaded (20)

Introduction to React and Flux (CodeLabs)