React入门：hello wrold – WEB前端开发

Web前端开发 • 10年前扫码分享

我是创始人李岩：很抱歉！给自己产品做个广告，点击进来看看。

React是由Facebook开源的一个专注于“前端UI渲染“的JavaScript框架。它的重心是我们一般所说的MVC开发模式中的”V”,而这些得益于React所提供的一种虚拟DOM的概念。

简单的hello wrold

直接上手，看代码：

		<!DOCTYPE html>
		<html>
		<head>
		<meta http-equiv='Content-type' content='text/html; charset=utf-8'>
		<title>Hello World!</title>
		<script src="http://cdn.bootcss.com/react/0.13.2/react.min.js"></script>
		<script src="http://cdn.bootcss.com/react/0.13.2/JSXTransformer.js"></script>
		</head>
		<body>
		<div id="example"></div>
		<script type="text/jsx">
		React.render(
		<h1>Hello World!</h1>,
		document.getElementById("example"),
		function(){
		console.log("OK!")
		}
		)
		</script>
		</body>
		</html>

Hello World!

入门点1：

这里引用了JSXTransformer.js,他的作用是将 JSX 语法转为 JavaScript 语法。生产环境中一般这一步放在服务端完成。

入门点2：

React.render()是非常常用的方法，渲染一个 ReactElement 到 DOM 中，放在指定的容器 DOM 元素下，返回一个到该组件的引用。如果 ReactElement 之前就被渲染到了指定的容器 DOM 元素中，该函数将会更新此 ReactElement，仅改变需要改变的 DOM 节点以展示最新的 React 组件。

第一个组件

看代码：

		<!DOCTYPE html>
		<html>
		<head>
		<meta http-equiv='Content-type' content='text/html; charset=utf-8'>
		<title>Hello World!</title>
		<script src="http://cdn.bootcss.com/react/0.13.2/react.min.js"></script>
		<script src="http://cdn.bootcss.com/react/0.13.2/JSXTransformer.js"></script>
		</head>
		<body>
		<div id="example"></div>
		<script type="text/jsx">
		var HelloMessage = React.createClass({
		render: function() {
		return <h1>Hello {this.props.name}</h1>;
		}
		});
		React.render(
		<HelloMessage name="愚人码头" />,
		document.body
		);
		</script>
		</body>
		</html>

Hello World!

入门点1：

调用 React.createClass() 来创建一个组件，组件名称（上例中的“ HelloMessage ”）第一个字母约定大写；

入门点2：

render() ：通过 React.createClass() 创建的组件，必须包含一个 render() 方法，具体说明查看 http://www.css88.com/react/docs/component-specs.html#render

入门点3：

定义完组件，需要调用React.render()方法，将ReactElement （组件）渲染到对应的DOM元素中(这里我们使用document.body)。