react js - introduction
TRANSCRIPT
React JSIntroduction
What is React?
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.
Big companies use React
Yahoo!
Airbnb
Sony
React isn’t a complete framework.
React is just the V in MVC.
Main aspects of React
VIRTUAL DOM REAL DOM
PATCH
virtial dom tree real dom tree
SERVER-SIDE RENDERING
BROWSER
REACT
NODE.JS
Updates Markup Data Data
Page Render
HTTP Request
ONE-WAY DATA-BINDING MODEL
Getting Started with React
COMPONENTS
COMPONENTS
var MyComponent = React.createClass({ render: function() {
return ( React.createElement("div", null, "Hello World");
)}
});
React.render( <MyComponent/>, document.body
);
JSX
JSX
var MyComponent = React.createClass({ render: function() {
return ( <h1>Hello World</h1>
)}
});
React.render( <MyComponent/>, document.body
);
PROPS
PROPS
var MyComponent = React.createClass({ render: function() {
return ( <h1>{this.props.message}</h1>
)}
});
React.render(<MyComponent message="Hello World"/>,document.body
);
STATE
STATEvar MyComponent = React.createClass({
getInitialState: function() {return {
message: "Hello World" }
},
render: function() { return (
<h1>{this.state.message}</h1> )
} });
React.render(<MyComponent/>, document.body);
Simple APP with React
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>;}
});
main.jsx
React.render(<Hello message="Hello, world!" />,document.body
);
