React JS - Introduction

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.

Facebook
Yahoo!
Airbnb
Instagram
Sony

React isn’t a complete
framework.

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

COMPONENTS
var MyComponent = React.createClass({
render: function() {
return (
React.createElement("div", null, "Hello World");
)
}
});
React.render(
<MyComponent/>,
document.body
);

JSX
return (
<h1>Hello World</h1>
)
}
});
React.render(
<MyComponent/>,
document.body
);

PROPS
return (
<h1>{this.props.message}</h1>
)
}
});
React.render(
<MyComponent message="Hello World"/>,
document.body
);

STATE
getInitialState: function() {
return {
message: "Hello World"
}
},
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({
return <p>{this.props.message}</p>;
}
});

main.jsx
React.render(
<Hello message="Hello, world!" />,
document.body
);

React JS - Introduction

Related slideshows

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (7)

Similar to React JS - Introduction

Similar to React JS - Introduction (20)

Recently uploaded

Recently uploaded (20)

React JS - Introduction