什么是 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. [ Java学习基础 ] Java的继承与多态

    看到自己写的东西(4.22的随笔[ Java学习基础 ] Java构造函数)第一次达到阅读100+的成就还是挺欣慰的,感谢大家的支持!希望以后能继续和大家共同学习,共同努力,一起进步!共勉! ---- ...

  2. 非Unicode编码的软件如何在Windows系统上运行

    我们常常会遇到这样一种情况:点开某些日文软件(我不会说就是galgame( ╯□╰ ))会出现乱码或者直接无法运行. 出现乱码的原因很简单:编码与译码的方式不一致!!!!!!!!!!! 首先大家需要知 ...

  3. 使用JdbcTemplate 操作PostgreSQL，当where条件中有timestamp类型时，报错operator does not exist: timestamp w/out timezone

    今天遇到一个问题,找了还半天,Google一下,官网显示是一个bug. 思考一番肯定是类型出了问题. Controller: Service:转化时间戳 Dao: 一波转换搞定!

  4. 数据结构 栈&队列

    2-4 依次在初始为空的队列中插入元素a,b,c,d以后,紧接着做了两次删除操作,此时的队头元素是( ) 删除,移动头指针: 增加,移动尾指针: 删除a,b ,队头c 2-3 在一个链队列中,fron ...

  5. UMAIL安装教程

    UMAIL安装教程 一．UMAIL虚拟机的创建与安装 首先在VM中选择新建虚拟机 选择下一步 选择稍后安装操作系统 选择Linux系统 版本CentOS 7 64位 选择名称与安装位置 选择下一步 选 ...

  6. Apache 443端口占用解决方法

    当运行httpd.exe时,出现如下问题 原因是启动Apache会占用443端口,而443被其他程序占用了.我们只需将Apache默认端口443改掉就行.网上搜了一下,说是更改Apache24\con ...

  7. NOIP2017D2T3 列队—Treap

    NOIP2017列队 Description Sylvia 是一个热爱学习的女孩子.  前段时间,Sylvia 参加了学校的军训.众所周知,军训的时候需要站方阵. Sylvia所在的方阵中有n × m ...

  8. Java中的内存分配

    Java程序在运行时,需要在内存中分配空间,为了提高效率,就对空间进行了不同区域的划分,因为每一片区域否有特定的处理数据方式和内存管理方式. 1.栈存储局部变量 2.堆存储new出来的东西 3.方法区 ...

  9. 0428-css样式

    一.CSS样式表      引入的三种方式1.内联样式:标签内部     style2.内嵌样式:<head></head>标签内部(<style></sty ...

  10. JVM的Server与Client运行模式区别与切换

    概述 JVM有两种运行模式Server与Client.两种模式的区别在于,Client模式启动速度较快,Server模式启动较慢:但是启动进入稳定期长期运行之后Server模式的程序运行速度比Clie ...