The Hello World program
JSbin
enable es6/babel
add library - react with addons
ReactDOM . render ( < h1 > Hello , world !< /h1> ,
document . body );
<!DOCTYPE html>
<html>
<head>
<script src= "//fb.me/react-with-addons-0.14.3.js" ></script>
<script src= "//fb.me/react-dom-0.14.3.js" ></script>
<meta charset= "utf-8" >
<meta name= "viewport" content= "width=device-width" >
<title> JS Bin</title>
</head>
<body>
</body>
</html>
Create a component
var HelloWorld = React . createClass ({
render () {
return (
< h1 > Hello , world !< /h1 >
)
}
});
ReactDOM . render ( < HelloWorld /> , document . body );
<HelloWorld/>
is JSX - JavaScript XML tag.
Using custom methods in the component
var HelloWorld = React . createClass ({
sayHello () { return " Hello, world! " },
render () {
return (
< h1 > { this . sayHello () } < /h1 >
)
}
});
ReactDOM . render ( < HelloWorld /> , document . body );
It’s better to avoid rendering to document.body directly.
There is no guarantee that it will not be manipulated by other js libs.
Always use an element that is only used by react.
ReactDOM . render ( < HelloWorld /> ,
document . getElementById ( " container " ));
Props
var FruitList = React . createClass ({
renderFruits () {
var fruits = this . props . fruits . map ( ( fruit ) =>
< li > { fruit } < /li >
);
return fruits ;
},
render () {
return (
< ul >
{ this . renderFruits ()}
< /ul >
)
}
});
ReactDOM . render (
< FruitList
fruits = {[ " Apple " , " Mango " , " Papaya " ]}
/> ,
document . getElementById ( " container " ));
PropTypes
var FruitList = React . createClass ({
propTypes : {
fruits : React . PropTypes . array . isRequired
},
// other stuff
});
State
var Form = React . createClass ({
getInitialState () {
return (
{ name : " Nithin " }
);
},
onClick () {
alert ( this . state . name );
},
render () {
console . log ( this . state );
return (
< div >
< h1 > GCRC < /h1 >
< input type = " text "
value = { this . state . name }
onChange = { ( event ) => {
this . setState ({ name : event . target . value })}
}
value = { this . state . name } / >
< input type = " submit " value = " Save " />
< /div >
)
}
});
ReactDOM . render (
< Form /> ,
document . getElementById ( " container " ));
FruitListContainer
var FruitList = React . createClass ({
renderFruits () {
var fruits = this . props . fruits . map (( fruit ) => {
return (
< li > { fruit } < /li >
)
});
return fruits ;
},
render () {
return (
< ul >
{ this . renderFruits ()}
< /ul >
)
}
});
var FruitListContainer = React . createClass ({
getInitialState () {
return ({ fruits : [ " Orange " , " Mango " ] })
},
render () {
return (
< FruitList fruits = { this . state . fruits } / >
)
}
})
ReactDOM . render (
< FruitListContainer fruits = { [ " Orange " ] } /> ,
document . getElementById ( " container " ));
Clock tick
var ClockTick = React . createClass ({
getInitialState () {
return this . timeDict ();
},
componentDidMount () {
setInterval ( this . updateTick , 1000 );
},
timeDict () {
date = new Date ();
hh = date . getHours ();
mm = date . getMinutes ();
ss = date . getSeconds ();
return { hours : hh , minutes : mm , seconds : ss };
},
updateTick () {
this . setState ( this . timeDict ());
},
render () {
return (
< div >
< h1 > Clock tick < /h1 >
< h3 >
{ this . state . hours }:{ this . state . minutes }:{ this . state . seconds }
< /h3 >
< /div >
);
}
})
ReactDOM . render (
< ClockTick /> ,
document . getElementById ( " container " ));
Links
React with Rails