什么是 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. poj 3904（莫比乌斯反演）

    POJ 3904 题意: 从n个数中选择4个数使他们的GCD = 1,求总共有多少种方法 Sample Input 4 2 3 4 5 4 2 4 6 8 7 2 3 4 5 7 6 8 Sample ...

  2. poj2449 （第k条最短路）

    题意:求n个点中,a到b的第k条最短路 思路: 用最短路求出估价函数的h,再在搜索过程中记录g,利用A*求出 最开始想到的便是A*和最短路,但是脑子抽了,居然一个一个去求- -,TL了后才发现可以倒着 ...

  3. Selenium之unittest测试框架详谈及实操

    申明:本文是基于python3.x及selenium3.x. unittest,也可以称为PyUnit,可以用来创建全面的测试套件,可以用于单元自动化测试(模块).功能自动化测试(UI)等等. 官方文 ...

  4. vsftpd详解(ubuntu)

    安装 apt-get instll vsftpd 配置vsftp vim vsftpd.conf listen=YES listen_port= anonymous_enable=NO local_e ...

  5. js去掉最后一个字符

    console.log(("0,1,2,3,4,5,".slice(0,-1)))

  6. Spring boot集成swagger2

    一.Swagger2是什么? Swagger 是一款RESTFUL接口的文档在线自动生成+功能测试功能软件. Swagger 是一个规范和完整的框架,用于生成.描述.调用和可视化 RESTful 风格 ...

  7. WPF ListBox 获取listBoxItem

    1.已知item的DataContext,获取ListBoxItem 1)ItemContainerGenerator.ContainerFromItem var selectedItem = Doc ...

  8. 混合式应用开发之Cordova+vue(1)

    一.Cordova创建应用 cordova create oneApp Cordova创建应用出错 Cordova安装时不能使用cnpm 应该使用npm,cnpm虽然快但是后期出的错绝对比这省下来的时 ...

  9. MySQL数据库常用操作入门

    一.MySQL MySQL是一个关系型数据库管理系统,由瑞典MySQL AB公司开发,目前属于Oracle旗下产品.在WEB应用方面,MySQL是最好的RDBMS应用软件.MySQL体积小.速度快.总 ...

  10. 安装redis，搭建环境

    这里以redis-4.0.9为例   我自己为了好方便管理自己的软件包,就在/usr/local/目录下创建了一个software目录   mkdir  /usr/local/software cd  ...