什么是 React


        React 是 Facebook 发布的 JavaScript 库，以其高性能和独特的设计理念受到了广泛关注。

React的开发背景


        Facebook需要解决的问题：构建数据不断变化的大型应用。
        数据变化
        1. 大量DOM操作 （方案：自动DOM操作 ）
        2. 逻辑极其复杂 （方案：状态对应内容 ）

React的应用场景


        复杂场景下的高性能
        重用组件库，组件组合

React的特点


        1. 简单
        2. 声明式

        React的核心是组件，组件化的开发思路，组件的设计目的是提高代码复用率、降低测试难度和代码复杂度。
        提高代码复用率：组件将数据和逻辑封装，类似面向对象中的类。
        降低测试难度：组件高内聚低耦合，很容易对单个组件进行测试。
        降低代码复杂度：直观的语法可以极大提高可读性。

React的发展过程


        2013年6月，Facebook官方发布React
        2013年9月，React热度开始上涨
        2015年3月，React Native发布

开发工具


        Sublime Text 3
        安装Sublime Text 3插件：
        1. 安装插件管理工具 packagecontrol（参考官网安装介绍）
            在Sublime Text3的命令行（View > Show Console）下输入：
import urllib.request,os,hashlib; h = 'df21e130d211cfc94d9b0905775a7c0f' + '1e3d39e33b79698005270310898eea76'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)
        然后回车执行
        安装插件方式，选择Install Package
        
        然后输入具体的插件就可以

        2. 安装Emmet：输入Emmet进行安装
        
        3. 安装babel-sublime
            支持ES6， React.js, jsx代码高亮
            输入babel-sublime进行安装

            配置：打开菜单view， Syntax -> Open all with current extension as… -> Babel -> JavaScript (Babel)，选择babel为默认 javascript 打开syntax

        4. JsFormat 格式化 js 代码 ：输入JsFormat 进行安装
    

开发环境


        安装React的Chrome插件“React Developer Tools”方便进行调试，安装完成审查元素的时候可以看到React的选项卡

用React编写第一个程序Hello, World


<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8">
        <title>Hello, World</title>
        <script src="../build/react.js"></script>
        <script src="../build/react-dom.js"></script>
        <script src="../build/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>

参考
        极客学院
        慕课网
        极客学院文档
        react中文
       
代码
        查看代码 

资料
        react-15.3.1.zip

1. React介绍 React开发环境搭建 React第一个程序的更多相关文章

  1. Go语言入门（一）特性、安装、环境搭建、第一个程序等

    Go语言是谷歌推出的一种全新的编程语言,可以在不损失应用程序性能的情况下降低代码的复杂性.谷歌首席软件工程师罗布派克(Rob Pike)说:我们之所以开发Go,是因为过去10多年间软件开发的难度令人沮 ...

  2. 一、Linux 设备驱动介绍及开发环境搭建

    1.1 Linux 设备驱动介绍 1.1.1 分类及特点 计算机系统的硬件主要由 CPU.存储器和外设组成. 当前 CPU 内部都集成有存储器和外设适配器. 外设适配器有入 UART.IIC 控制器. ...

  3. （0）ASP.NET Core 简单介绍 和开发环境搭建 - ASP.NET从MVC5升级到MVC6

    ASP.NET从MVC5升级到MVC6 总目录 ASP.NET Core 首先,ASP原本只是一种技术,这种技术从上个世纪90年代就有了. Active Service Page 和 Java Ser ...

  4. Eclipse rap 富客户端开发总结(1) ：rap简单介绍和开发环境搭建

    一.rap简单介绍 1 基本概念     RAP可以让开发人员使用JAVA API和按照Eclipse 插件的开发模式构建基于AJAX的Web 2.0应用程序, RAP的工作原理是采用交叉编译的方式将 ...

  5. struts2环境搭建和第一个程序

    环境搭建 项目目录 导入依赖jar包,如上图lib目录所示. 不同的版本可能会不一样,没关系在tomcat启动时,如果报错java.lang.ClassNotFoundException,我们可以按照 ...

  6. react实战项目开发(1) 搭建react开发环境初始化项目（Create-react-app）

    前言 Create React App npm install -g create-react-app create-react-app my-app cd my-app npm start 执行命令 ...

  7. React+Webpack+Webstorm开发环境搭建

    需要安装的软件 node.js npm包管理 Webstorm 由于6.3.0版本之后会自带npm的包管理所以不需要单独的安装npm nodejs(包含npm)安装在默认路径C:\Program Fi ...

  8. react native windows开发环境搭建(二)

    上一篇中介绍了本地服务器端环境的安装,使用已经编译好的apk程序,设置ip地址,就可以看到welcome界面,并且可以对程序做出修改以及调试. 为了扩展和发布应用 还需要能编译loader程序,这里介 ...

  9. react native windows开发环境搭建(一)

    ReactNative分为服务器端和手机端loader程序,Android版有3种代码:js代码,java代码和c++代码,主要是编写的是js代码,如果框架功能不足就需要编写原生的java代码来扩展, ...

随机推荐

  1. HEOI2017游记

    Day -1: noip与标准时限差了0.02秒,并没有申诉成功,导致NOIWC多交了900元钱. 滚回去准备学考,文科瞎写居然拿了A,可啪. NOIWC颓废记由于我实在太颓了所以懒得填坑了. THU ...

  2. udacity/CarND-Path-Planning-Project 工程详细配置过程——吐血整理

    本人原创,转载请注明地址 学习udacity/CarND-Path-Planning-Project 工程过程 1.首先登陆 jeremy-shannon/CarND-Path-Planning-Pr ...

  3. JsonArray转List，list转json字符串

    JsonArray data = object.getAsJsonArray("data"); Gson gson =new Gson(); List<Object> ...

  4. String 类

    一.String类String类在java.lang包中,java使用String类创建一个字符串变量,字符串变量属于对象.java把String类声明的final类,不能有类.String类对象创建 ...

  5. FastDFS+Nginx安装配置

    下载相关包: libevent-2.0.22-stable.tar.gz => https://github.com/libevent/libevent/releases/download/re ...

  6. Linux的发行版，不同发行版之间的联系和区别

    Linux 主要作为Linux发行版(通常被称为"distro")的一部分而使用.这些发行版由个人,松散组织的团队,以及商业机构和志愿者组织编写.它们通常包括了其他的系统软件和应用 ...

  7. List Set Map比较

    List按对象进入的顺序保存对象,不做排序或编辑操作. Set对每个对象只接受一次,并使用自己内部的排序方法(通常,你只关心某个元素是否属于Set,而不关心它的顺序–否则应该使用List). Map同 ...

  8. Python中and(逻辑与)计算法则

    在程序设计中,and称为逻辑与运算,也称布尔运算:1.and是在布尔上下文中从左到右计算表达式的值:2.0.''.[].().{}.None.False在布尔上下文中为假:其它任何东西都为真:3.如果 ...

  9. 排序算法的C语言实现(上 比较类排序：插入排序、快速排序与归并排序)

    总述:排序是指将元素集合按规定的顺序排列.通常有两种排序方法:升序排列和降序排列.例如,如整数集{6,8,9,5}进行升序排列,结果为{5,6,8,9},对其进行降序排列结果为{9,8,6,5}.虽然 ...

  10. Fiddler实现对手机抓包

    工具 && 前提条件: 1. 安装了Fiddler的PC一台 2. 手机一部 3. 手机和PC是在同一个局域网内,或者至少能够联通,即手机的流量能够转发到PC端上能够被其捕获 PC端 ...