《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 节点中,但不覆盖已有的子节点。

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

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
8240 0
Jenkins 教程(二)实现本地资源ssh上传
在教程一中我们只实现了在jenkins容器中的打包和结果通知,这节教程将用一个ssh工具将我们package完的项目上传到我们的服务器中。 1. 安装插件 Publish over SSH 完了点击直接安装 2. 插件的系统配置 配置完成后测试一下: 3. 插件的工程配置 最后一个框是在服务器运行什么脚本。
887 0
Directx11教程39 纹理映射(9)
在myTutorialD3D11_32中,我们在PlaneModelClass中增加一个纹理TextureClass* m_Texture;读入一个grass的纹理,程序执行后的效果如下: 完整的代码请参考: 工程文件myTutorialD3D11_32 代码下载: http://files.
785 0
Directx11教程38 纹理映射(8)
上篇日志中,我们用纹理和光照颜色调制的方式得到最终颜色,本章我们尝试用纹理采样的颜色,直接做为材质的漫反射系数Kd,并用它来做光照计算,最后再做个gamma校正,如果不做的话,效果会偏亮。      lighttex.
712 0
基于Visual C++.NET的GDI+开发教程
GDI+接口是Microsoft Whistler操作系统中的一部分,它是GDI的一个新版本,不仅在GDI基础上添加许多新特性而且对原有的GDI功能进行优化。在为开发人员提供的二维矢量图形、文本、图像处理、区域、路径以及图形数据矩阵等方面构造了一系列相关的类,如Bitmap(位图类)、Brush(画刷类)、Color(颜色类)、Font(字体类)、Graphics(图形类)、Image(图像类)、Pen(画笔类)和Region(区域类)等。
922 0
dietpi远程桌面与中文汉化教程
今天教大家dietpi系统汉化教程,当然如果你刷的不是dietpi也可以参照教程思路进行汉化.比如:armbian 固件下载链接:dietpi下载armbian下载如果你已经刷好固件了那么就开始吧! 1.
2380 0
Directx11教程40 纹理映射(10)
本章尝试使用纹理行列式,或者说纹理数组,在ps中,使用2个纹理,最终的像素颜色,是光照颜色*纹理1采样颜色*纹理2采样颜色,主要是想达到如下的效果:    把这两个图像以及光照产生的颜色融合生成以下图像:   为此我们新建一个lighttex2.
853 0
Directx11教程41 纹理映射(11)
1、第一副图我们采用各性异性的滤波方式,并设置最大各性异性值为8.     samplerDesc.Filter =  D3D11_FILTER_ANISOTROPIC;     samplerDesc.MaxAnisotropy = 8;      第二副图我们用了常用的3线性差值滤波方式   samplerDesc.Filter =  D3D11_FILTER_MIN_MAG_MIP_LINEAR;         按道理说,对于远处的纹理贴图,第一副图要好些,但我看起来,似乎这两个效果差不多,第二副效果也还可以,对于远处的贴图,我并没有发现模糊的效果。
722 0
+关注
程序员诗人
一个会写诗的程序员
831
文章
14
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载