引入React
可以使用Bower下载React
- bower install react
引入react(.min).js和JSXTransformer.js。在React组件中可以不使用JSX，但建议使用 JSX。引入 JSXTransformer.js 库是来实现在浏览器里的代码转换，上线之后最好把JSX代码转换成正常的js代码，然后去掉JSXTransformer.js的引用。
JSX代码写在<script type="text/jsx">中，注意type是text/jsx。
JSX -> JS
- npm install -g react-tools
- jsx --watch src/ build/
一旦src中的JSX文件修改了，就会自动转换到build文件夹中。
Hello World
一个最简单的React组件。
html文件
- <!DOCTYPE html>
- <html lang="zh-CN">
- <head>
- <Meta charset="UTF-8">
- <title></title>
- </head>
- <body>
- <div id="helloworld"></div>
- <script src="bower_components/react/react.min.js"></script>
- <script src="bower_components/react/JSXTransformer.js"></script>
- <script src="js/main.js" type="text/jsx"></script>
- </body>
- </html>
main.js文件
- var HelloWorld = React.createClass({
- render: function () {
- return <h1>Hello {this.props.name}</h1>;
- }
- });
- React.render(<HelloWorld name="World" />,document.getElementById('helloworld'));
