码迷,mamicode.com
首页 > 其他好文 > 详细

【React】热热身:Hello World

时间:2015-08-15 23:11:51      阅读:168      评论:0      收藏:0      [点我收藏+]

标签:react

引入React

可以使用Bower下载React

bower install react

引入react(.min).jsJSXTransformer.js。在React组件中可以不使用JSX,但建议使用 JSX。引入 JSXTransformer.js 库是来实现在浏览器里的代码转换,上线之后最好把JSX代码转换成正常的js代码,然后去掉JSXTransformer.js的引用。

JSX代码写在<script type="text/jsx">中,注意typetext/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‘));

版权声明:本文为博主原创文章,未经博主允许不得转载。

【React】热热身:Hello World

标签:react

原文地址:http://blog.csdn.net/wozaixiaoximen/article/details/47685771

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!