Getting Started
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/308246.html