React中文教程翻译文档 - Getting Started

Getting Started

Download React Starter Kit


Hello,world!

在开发包解压文件夹根目录创建一下内容的文件,并命名为 helloworld.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-type' content='text/html; charset=utf-8'>
<title>Hello World - Getting Starter</title>
<script src="build/react.min.js"></script>
<script src="build/JSXTransformer.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/jsx">
	/** @jsx React.DOM */
	/** 上面一行注释代码不能删除,否则React无法运行 */
	React.renderComponent(
		<h1>Hello World!</h1>,document.getElementById('example')
	);
</script>
</body>
</html>

上面Javascript代码中在类似XML语法的一段<h1>Hello World!</h1>,它叫JSX。更多JSX语法请查看:http://facebook.github.io/react/docs/syntax.html

为了使浏览器支持JSX,我们需要在HTML中引入JSXTransformer.js,并且使用<script type="text/jsx">的Javascript标签属性。


分隔文件

跟普通的Javascript代码一样,您也可以把上面的JSX代码保存为独立文件。创建 scr/helloworld.js

/** @jsx React.DOM */
React.renderComponent(
    <h1>Hello,world!</h1>,document.getElementById('example')
);

然后在 helloworld.html 中引用

<script type="text/jsx" src="src/helloworld.js"></script>

离线转换工具

使用该工具可以把自己的JSX代码段转换成普通的JS代码,这样就不需要引入JSXTransformer.js文件。如何使用该工具呢?

首先,需要安装命令行工具npm

# 使用mpm命令安装react工具
npm install -g react-tools

# 转换命令
# usage: jsx --watch source-dir dest-dir
jsx --watch src/ build/
经过上面的转换之后,你会得到 build/helloworld.js 的常规Javascript代码文件。
/** @jsx React.DOM */
React.renderComponent(
    React.DOM.h1(null,'Hello,world!'),// 已经变成常规JS代码了
    document.getElementById('example')
);
更新helloworld.html的文件内容
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-type' content='text/html; charset=utf-8'>
<title>Hello World - Getting Starter</title>
<script src="build/react.min.js"></script>
<!-- 不需要引入JSXTransformer.js -->
</head>
<body>
<div id="example"></div>
<script src="build/helloworld.js"></script>
</body>
</html>


更多教程请关注本博客,您也可以参考sample/ 的目录的例子。

欢迎使用React,祝您好运!


您可以修改并重新发布本文,如果您能留下本文的参考连结,万分谢谢! 如果您对本文存在疑问,欢迎留言或者直接对本文评论,我会在看到的第一时间回复您。

相关文章

react 中的高阶组件主要是对于 hooks 之前的类组件来说的,如...
我们上一节了解了组件的更新机制,但是只是停留在表层上,例...
我们上一节了解了 react 的虚拟 dom 的格式,如何把虚拟 dom...
react 本身提供了克隆组件的方法,但是平时开发中可能很少使...
mobx 是一个简单可扩展的状态管理库,中文官网链接。小编在接...
我们在平常的开发中不可避免的会有很多列表渲染逻辑,在 pc ...