什么是 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; 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' % (dhif dh != h else open(os.path.join( ipp'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插件“ ReactDeveloperTools ”方便进行调试，安装完成审查元素的时候可以看到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>
"../build/react-dom.js""../build/browser.min.js"    </head>
    <body>
        <div id="example"></div>
type="text/babel"            ReactDOM.render(
                <h1>Hello                document.getElementById('example')
            );
        </script>
    </body>
</html>