@Belinda
2015-04-20T05:43:10.000000Z
字数 1448
阅读 1473
实习笔记 翻译
学习React的最简单的方法就是跟着下面这两个 hello world 例子。
React JSFiddle
React JSFiddle without JSX
<!DOCTYPE html>
<html>
<head>
<script src="build/react.js"></script>
<script src="build/JSXTransformer.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/jsx">
React.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
</script>
</body>
</html>
初学者工具包
下载初学者工具包开始学习。在初学者工具包的根目录下，用以下内容创建一个 helloworld.html 的文件。
<!DOCTYPE html>
<html>
<head>
<script src="build/react.js"></script>
<script src="build/JSXTransformer.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/jsx">
React.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
</script>
</body>
</html>
这里的 javascript 的 XML 语法叫做 JSX。查看 JSX 语法去学习更多的内容关于它，为了把他翻译成**香草**javascript ，我们用<script type="text/jsx">并引入 JSXTransformer.js 去实现react 在浏览器中的转变。
外部文件
你的 react jsx 代码可以通过引入一个外部文件，创建一个如下的src/helloworld.js
React.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
然后在主文件中引用他
<script type="text/jsx" src="src/helloworld.js"></script>
离线转化
首先需要安装一个命令行工具（要求有npm）
npm install -g react-tools
然后把src/helloworld.js转化为javascript代码，
jsx --watch src/ build/
无论你什么时候改变这个文件，他都会自动编译。
React.render(
React.createElement('h1', null, 'Hello, world!'),
document.getElementById('example')
);
像下面这样更新你的HTML文件
<!DOCTYPE html>
<html>
<head>
<title>Hello React!</title>
<script src="build/react.js"></script>
<!-- No need for JSXTransformer! -->
</head>
<body>
<div id="example"></div>
<script src="build/helloworld.js"></script>
</body>
</html>