Vyhledávání
Tips for using React.js framework.Basic tutorial on React homepage
Basic example: Hello world
<!DOCTYPE HTML>
<html>
<head>
<title>React Hello World</title>
</head>
<body>
<!-- Use the compilation in production instead of JSX -->
<script src="http://fb.me/react-0.12.2.min.js"></script>
<script src="http://fb.me/JSXTransformer-0.12.2.js"></script>
<script type="text/jsx">
var HelloMessage = React.createClass({
render: function () {
return <h1>Hello {this.props.message}!</h1>;
}
});
React.render(<HelloMessage message="World" />, document.body);
</script>
</body>
</html>
Rendering tips
Class name tag attribute
The attribute must be named as className (simple class doest not work).
ReactDOM.render(<div className="my-class">Hello World!</div>, mountNode);
Inline styles
Could not be written as the string, but must be declared in the array variable.
var divStyle = {color: 'white'};
ReactDOM.render(<div style={divStyle}>Hello World!</div>, mountNode);
Array variable
render: function() {
return (
<ul className="Uli">
{this.props.data.map(function(value) {
return <li key={value}>{value}</li>
})}
</ul>
)
}