发布于 2015-10-31 12:18:59 | 626 次阅读 | 评论: 0 | 来源: PHPERZ

React是由Facebook和Instagram团队共同维护, 专注于“前端UI渲染“的JavaScript库。它的角色类似我们平常提到的MVC开发模式中的”V”,这些得益于React所提出的虚拟DOM概念。

本文是系列文章的第一篇,我们将会从编写第一个React组件开始。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>First Component</title>
    <script src="../javascripts/react-0.11.1.js"></script>
    <script src="../javascripts/JSXTransformer-0.11.1.js"></script>
</head>
<body>
<script type="text/jsx">
    /*** @jsx React.DOM */
    var APP = React.createClass({
        render:function(){
            return (
                <h1>Hello React</h1>
            )
        }
    });

    React.renderComponent(<APP />, document.body)
</script>
</body>
</html>

 

首先这里通过使用引入React和JSXTransformer,你可以通过访问官方文档首页下载,或者点击这个链接.

除去其他我们常见的HTML标签,这里第一个需要注意的是 <script type="text/jsx"></script>, 这段代码的目的在于配合/*** @jsx React.DOM */告诉JSXTransformer去将标签里的内容按照JSX 的语法来进行解析。

然后我们使用React的createClass方法创建一个组件。这里我们只需定义最基本的render方法。

如果你在这个时候刷新页面,发现页面内容为空。那是因为我们这里只是创建了App这个变量,但是没有将变量加载到页面中。这时我们需要调用React的renderComponent方法,查找对应的DOM元素(这里我们使用document.body)并渲染我们的APP对象。

到这里我们的Hello World页面就编写完成了。可能还有一些概念我没有解释清楚,但是不用担心,会在后面介绍其他API时再进行详细讲解。

最新网友评论  共有(0)条评论 发布评论 返回顶部

Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务