什么是 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. SpringCloud学习之Hystrix

    一.为什么要有断路器 在分布式系统当中,服务之间调用关系会随着业务的发展而变的复杂,一个服务可能依赖多个服务,服务之间层层依赖也是家常便饭的事情,如果一个服务的瘫痪很有可能导致整个系统的崩溃.比如说, ...

  2. Centos下出现read-only file system 的解决办法

    Centos下出现这种情况说明磁盘只能读不能写,出现这种情况一般是因为不正常的关机或者硬盘损坏导致磁盘挂载出现问题. 本萌新也遇到了这个问题,尝试了各种命令都不行,最后用了mount -o remou ...

  3. 用solidity语言开发代币智能合约

    智能合约开发是以太坊编程的核心之一,而代币是区块链应用的关键环节,下面我们来用solidity语言开发一个代币合约的实例,希望对大家有帮助. 以太坊的应用被称为去中心化应用(DApp),DApp的开发 ...

  4. Oracle VM VirtualBox虚拟机内Linux系统硬盘扩容步骤(CentOS6.5)

    1.首先获取要扩容的虚拟机的 UUID VBoxManage 改命令在C:\Program Files\Oracle\VirtualBox目录内,可先添加该目录到环境变量.C:\Users\yzkj- ...

  5. SpringMVC mock测试详解

    @RunWith(SpringRunner.class) @SpringBootTest(classes = WebmanagerApplication.class) //配置事务的回滚,对数据库的增 ...

  6. 基于PHP的快递查询免费开放平台案例-快宝开放平台

    快递查询是快递业务中极其重要的业务,免费的快递查询开放平台:快宝开放平台. 快宝开放平台:http://open.kuaidihelp.com/home,已经对接100多家快递公司,实现快递物流信息实 ...

  7. React 系列教程 1：实现 Animate.css 官网效果

    前言 这是 React 系列教程的第一篇,我们将用 React 实现 Animate.css 官网的效果.对于 Animate.css 官网效果是一个非常简单的例子,原代码使用 jQuery 编写,就 ...

  8. POJ 3050 Hopscotch DFS

    The cows play the child's game of hopscotch in a non-traditional way. Instead of a linear set of num ...

  9. Node.js TTY

    稳定性: 2 - 不稳定 tty 模块包含 tty.ReadStream 和 tty.WriteStream 类.多数情况下,你不必直接使用这个模块. 当 node 检测到自己正运行于 TTY 上下文 ...

  10. PHP 完整表单实例

    PHP - 在表单中确保输入值 在用户点击提交按钮后,为确保字段值是否输入正确,我们在HTML的input元素中插添加PHP脚本, 各字段名为: name, email, 和 website. 在评论 ...