什么是 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. hdu 5458 Stability(树链剖分+并查集)

    Stability Time Limit: 3000/2000 MS (Java/Others)    Memory Limit: 65535/102400 K (Java/Others)Total ...

  2. Spring MVC - 表单处理示例

    环境搭建 环境: Intellij IDEA Spring MVC 完整的项目文件结构如下所示: Student.java package com.ktao.controller; public cl ...

  3. Python中def及lambda的功能介绍

    函数def及lambda的功能介绍 1. def函数的功能介绍 1. 函数的参数 无参数函数 格式:def func_name(): '''__doc__'''#函数的说明文档(内容) express ...

  4. MongoDb进阶实践之六 MongoDB查询命令详述（补充）

    一.引言         上一篇文章我们已经介绍了MongoDB数据库的查询操作,但是并没有介绍全,随着自己的学习的深入,对查询又有了新的东西,决定补充进来.如果大家想看上一篇有关MongoDB查询的 ...

  5. php+xdebug+dbgp远程调试（多人）

    目录 创建 DBGP 服务 配置 调试 创建 DBGP 服务 到 下载页面,下载 python 版本的 dbgp 到服务器上. 解压后执行 pydbgpproxy. 如果提示找不到 dbgp 模块,则 ...

  6. text-align:center属性失效

    text-align:center只对inline元素有效,失效的情况下 给它所有的子元素加上 display:inline-block即可 inline-block不兼容ie6

  7. JVM内部原理

    这篇文章详细描述了Java虚拟机的内在结构.下面这张图来自<The Java Virtual Machine Specification Java SE 7 Edition>,它展示了一个 ...

  8. 360搜索引擎so自动收录php改写方案——适合phpcms等cms

    360搜索引擎自动收录功能,官方提供了代码,带式,十分坑爹,没有提供批量提交入口,只是提供了一段js代码,关键是 一个js去下载另外一个js,document.write到文档,然后再 重复2遍如此工 ...

  9. SignalR Progress

    Server public class ServerHub : Hub { public async Task<string> ALongTimeTask() { var p = new ...

  10. 基于无域故障转移群集 配置高可用SQLServer 2016数据库

    基于上次的文章搭建的环境,可以在这里:http://www.cnblogs.com/DragonStart/p/8275182.html看到上次的文章. 演示环境 1. 配置一览 Key Value ...