React.js là 1 thư viện JavaScript tạo ra bởi Facebook.
http://facebook.github.io/react/
Như khái niệm trên trang web chính thức “A JavaScript library for building user interface”, React.js là một thư viện sinh ra để xây dựng giao diện người dùng (UI). Nó không phải là Framework mà chỉ là thư viện, do đó trong MVC nó sẽ tương ứng với phần V.
Virtual DOM
Virtual DOM, nói 1 cách tổng quát, là 1 object của JavaScript mang trong mình một DOM tree, mỗi khi data thay đổi thì tự tính toán phần chênh lệch của object so với tree thật, nhằm mục đích tối giản việc re-rendering vào tree thật.
Trong React.js ta tạo một component React.createClass, và định nghĩa Virtual DOM trong giá trị trả về của render method. Khi tạo Virtual DOM, ta dùng React.createElement.
<!DOCTYPE html>
<html>
<head>
<script src="libs/react.js"></script>
<script src="libs/JSXTransformer.js"></script>
</head>
<body>
<div id="mount-point"></div>
<script type="text/jsx">
/** @jsx React.DOM */
// Create a custom component by calling React.createClass.
var MyComponent = React.createClass({
render: function() {
return React.createElement("div", {className: "foo"},
React.createElement("div", {className: "bar"},
"Hello World ", this.props.name
)
);
}});
React.render(
<MyComponent name="Phat"/>,
document.getElementById('mount-point')
);
</script>
</body>
</html>
Bên cạnh đó, ta có thể diễn đạt Virtual DOM dưới dạng syntax như XML.
<!DOCTYPE html>
<html>
<head>
<script src="libs/react.js"></script>
<script src="libs/JSXTransformer.js"></script>
</head>
<body>
<div id="mount-point"></div>
<script type="text/jsx">
/** @jsx React.DOM */
// Create a custom component by calling React.createClass.
var MyComponent = React.createClass({
render: function() {
return (
<div className="foo">
<div className="bar">
Hello World {this.props.name}
</div>
</div>
)
}});
React.render(
<MyComponent name="Phat"/>,
document.getElementById('mount-point')
);
</script>
</body>
</html>