react基础教程

最新推荐文章于 2024-05-12 10:46:44 发布

脚踏实地靠鞋撑

最新推荐文章于 2024-05-12 10:46:44 发布

阅读量557

点赞数

分类专栏：教程文章标签： react 编程教程

本文链接：https://blog.csdn.net/golearn/article/details/50331453

版权

教程专栏收录该内容

11 篇文章 0 订阅

订阅专栏

React 是一个 Facebook 和 Instagram 用来创建用户界面的 JavaScript 库。每个从大公司放出来的库都会被大众追捧的，React也不例外。

React 起源于 Facebook 的内部项目，因为该公司对市场上所有JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。类似的框架有AngularJS等

React创新性的从UI,Virtual DOM 和Data flow三个方面拓展了当前的JS框架技术。

本教程使用gitbook.com 书写。内容会持续更新。

同时发布在 http://gitbook.net/react/

一，快速入门

环境搭建

官网地址：http://facebook.github.io/react/
Github地址：https://github.com/facebook/react
CDN地址：
开发环境

<script src="https://fb.me/react-0.14.3.js"></script>
<script src="https://fb.me/react-dom-0.14.3.js"></script>

生产环境

<script src="https://fb.me/react-0.14.3.min.js"></script>
<script src="https://fb.me/react-dom-0.14.3.min.js"></script>

好吧，国内不能访问，请使用国内镜像

//cdn.bootcss.com/react/0.14.3/react.js

入门例子

初学者还是下载完整的代码包吧。http://facebook.github.io/react/downloads/react-0.14.3.zip开发者很照顾大家，开发包中有详细的例子。本教程为了摆脱对本地库的依赖都会使用CDN。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="http://cdn.bootcss.com/react/0.14.3/react.js"></script>
    <script src="http://cdn.bootcss.com/react/0.14.3/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.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>

运行结果也很简单：就是一个Hello, world!。但这可是动态插入的哦。

二，JSX 语法

什么是JSX

JSX语法，像是在Javascript代码里直接写XML的语法，实质上这只是一个语法糖，每一个XML标签都会被JSX转换工具转换成纯Javascript代码，React 官方推荐使用JSX，当然你想直接使用纯Javascript代码写也是可以的，只是使用JSX，组件的结构和组件之间的关系看上去更加清晰。说白了，就是方便用户在JS代码中嵌入HTML标签。时代变了，以前是js嵌入到html中，现在是反过来。这样的扩展极大方便了动态操作网页内容。
我们先看一个例子就明白其中的区别了。简化非常大啊。

    //使用JSX
    React.render(
        <div>
            <div>
                <div>content</div>
            </div>
        </div>,
        document.getElementById('example')
    );

    //不使用JSX
    React.render(
        React.createElement('div', null,
            React.createElement('div', null,
                React.createElement('div', null, 'content')
            )
        ),
        document.getElementById('example')
    );

脚踏实地靠鞋撑

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
react基础教程

React 是一个 Facebook 和 Instagram 用来创建用户界面的 JavaScript 库。每个从大公司放出来的库都会被大众追捧的，React也不例外。React 起源于 Facebook 的内部项目，因为该公司对市场上所有JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月
复制链接

扫一扫