《React极简教程》第一章 Hello,World!-阿里云开发者社区

开发者社区> 开发与运维> 正文

《React极简教程》第一章 Hello,World!

简介: react React 是一个用于构建用户界面的 JAVASCRIPT 库。 React主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图)。
react

React 是一个用于构建用户界面的 JAVASCRIPT 库。
React主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图)。
React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站,并于 2013 年 5 月开源。
React 拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它。

官网:
https://facebook.github.io/react/
入门教程:
http://reactjs.cn/react/docs/getting-started-zh-CN.html

React 特点
1.声明式设计 −React采用声明范式,可以轻松描述应用。

2.高效 −React通过对DOM的模拟,最大限度地减少与DOM的交互。

3.灵活 −React可以与已知的库或框架很好地配合。

4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ,但我们建议使用它。

5.组件 − 通过 React 构建组件,使得代码更加容易得到复用,能够很好的应用在大项目的开发中。

6.单向响应的数据流 − React 实现了单向响应的数据流,从而减少了重复代码,这也是它为什么比传统数据绑定更简单。

React 第一个实例:Hello,World!

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
    <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      ReactDOM.render(
        <h1>Hello, world!</h1>,
        document.getElementById('example')
      );
    </script>
  </body>
</html>

运行:http://www.runoob.com/try/try.php?filename=try_react_hw

解析:

实例中我们引入了三个库: react.min.js 、react-dom.min.js 和 babel.min.js:

react.min.js

React 的核心库

react-dom.min.js

提供与 DOM 相关的功能

babel.min.js

Babel 可以将 ES6 代码转为 ES5 代码,这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。通过将 Babel 和 babel-sublime 包(package)一同使用可以让源码的语法渲染上升到一个全新的水平。

一个稍微复杂的例子

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta charset='utf-8'>
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="description" content="东海陈光剑 光剑博客 Free Ebook 免费电子书 免费epub电子书 电子书大全 电子书下载 光剑免费图书馆 全球免费开放的电子图书馆 東海陳光劍的博客">

    <!--<link href='https://fonts.googleapis.com/css?family=Architects+Daughter' rel='stylesheet' type='text/css'>-->
    <link href='../public/css/font.css' rel='stylesheet' type='text/css'>


    <link rel="stylesheet" href="../public/css/style.css" media="screen" type="text/css">
    <link rel="stylesheet" href="../public/css/print.css" media="print" type="text/css">

    <link rel="shortcut icon" href="../favicon.ico">


    <title>陈光剑的个人网站 - Jason Chen's Personal Website</title>

    <!-- jQuery 2.2.3 -->
    <script src="../public/plugins/jQuery/jquery-2.2.3.min.js"></script>

    <!-- Bootstrap 3.3.6 -->
    <script src="../public/bootstrap/js/bootstrap.min.js"></script>
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="../public/bootstrap/css/bootstrap.min.css">

    <!-- BootstrapDialog -->
    <link href="../public/components/bootstrap3-dialog/bootstrap-dialog.min.css" rel="stylesheet" type="text/css"/>
    <script src="../public/components/bootstrap3-dialog/bootstrap-dialog.min.js"></script>


    <!-- React -->
    <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
    <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>

    <script type="text/babel" src="../public/js/sidebar.js"></script>
    <script type="text/babel" src="../public/js/header.js"></script>
    <script src="../public/js/jason.js"></script>

    <script>
        var _hmt = _hmt || [];
        (function() {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?bb529e2f4fa35aeb3b07ca2e09b4ef7c";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>


</head>

<body>

<div id="header"></div>

<div id="content-wrapper">
    <div class="inner clearfix">
        <section id="main-content">

            <div id="helloWorld2"></div>

            <div style="padding: 2em; text-align: center;font-size: 2em"><a
                    href="http://www.jianshu.com/p/3a9f916d930d" target="_blank">React极简教程:Hello,World</a></div>

            <div id="helloWorld"></div>

        </section>
        <div id="sidebar"></div>
    </div>
</div>


<script type="text/javascript">
    function sayHelloWorld() {
        BootstrapDialog.show({
            title: 'React Demo',
            message: 'Hello,World! 现在时间是:' + new Date(),
            type: BootstrapDialog.TYPE_DEFAULT,
            closable: false,
            cssClass: 'dialog_mar',
            buttons: [{
                label: '确认',
                cssClass: 'con_btn',
                action: function (dialogRef) {
                    dialogRef.close();
                    location.reload();
                }
            }, {
                label: '取消',
                action: function (dialogRef) {
                    dialogRef.close();
                }
            }]
        });

    }
</script>

<script type="text/babel">
    var HelloWorld = React.createClass({
        getInitialState: function () {
            return {};
        },
        sayHello: function () {
//            alert('Hello,World!');
            sayHelloWorld();


        },
        render: function () {

            var helloWorldStyle = {
                textAlign: 'center',
                padding: '4em'
            };

            var btnStyle = {
                padding: '1.5em',
                fontSize: '1.5em'
            };

            return (
                    <div style={helloWorldStyle}>
                        <button onClick={this.sayHello} style={btnStyle}>说: Hello,World!</button>
                    </div>
            );
        }
    });

    ReactDOM.render(<HelloWorld/>, document.getElementById('helloWorld'));

//    var helloWorld2=ReactDOM.render(<h1>Hello,World!</h1>, document.getElementById("helloWorld2"));

    var HelloWorld2 = React.createClass({
       render: function () {
           var helloWorld2Style={
               textAlign: 'center'
           };

           return (<h1 style={helloWorld2Style}>Hello,World!</h1>);
       }
    });

    ReactDOM.render(<HelloWorld2/>,document.getElementById("helloWorld2"));


</script>


</body>
</html>

React.render

ReactComponent render(
  ReactElement element,
  DOMElement container,
  [function callback]
)

渲染一个 ReactElement 到 DOM 中,放在 container 指定的 DOM 元素下,返回一个到该组件的引用。

如果 ReactElement 之前就被渲染到了 container 中,该函数将会更新此 ReactElement,仅改变需要改变的 DOM 节点以展示最新的 React 组件。

如果提供了可选的回调函数,则该函数将会在组件渲染或者更新之后调用。

注意:

React.render() 替换传入的容器节点内容。在将来,或许可能插入组件到已存在的 DOM 节点中,但不覆盖已有的子节点。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章