react js - introduction
Post on 16-Jul-2015
295 Views
Preview:
TRANSCRIPT
React is a JavaScript library created by a collaboration of Facebook and Instagram.
Its aim is to allow developers
to create fast user interfaces easily.
COMPONENTS
var MyComponent = React.createClass({ render: function() {
return ( React.createElement("div", null, "Hello World");
)}
});
React.render( <MyComponent/>, document.body
);
JSX
var MyComponent = React.createClass({ render: function() {
return ( <h1>Hello World</h1>
)}
});
React.render( <MyComponent/>, document.body
);
PROPS
var MyComponent = React.createClass({ render: function() {
return ( <h1>{this.props.message}</h1>
)}
});
React.render(<MyComponent message="Hello World"/>,document.body
);
STATEvar MyComponent = React.createClass({
getInitialState: function() {return {
message: "Hello World" }
},
render: function() { return (
<h1>{this.state.message}</h1> )
} });
React.render(<MyComponent/>, document.body);
index.html
<html> <head> <title>Hello World with React</title> </head> <body> <script src="https://fb.me/react-0.12.2.js"></script> <script src="https://fb.me/JSXTransformer-0.12.2.js"></script> <script type="text/jsx" src="hello.jsx"></script> <script type="text/jsx" src="main.jsx"></script> </body></html>
hello.jsx
var Hello = React.createClass({render: function() {
return <p>{this.props.message}</p>;}
});
top related