编程是一门实践技术

React 是 Facebook 在 2013 年开源在 GitHub 上的 JavaScript 库。React 可以把用户界面抽象成一个个组件，如按钮组件 Button、对话框组件 Dialog、日期组件 Calendar，开发者通过组合这些组件， 最终得到功能丰富、可交互的页面。同时引入了 JSX 语法，使复用组件变得非常容易，也能保证组件结构清晰。有了组件这层抽象，React 把代码和真实渲染目标隔离开来，除了可以在浏览器端渲染到 DOM 来开发网页外，还能用于开发原生移动应用。

JSX and React 是相互独立的两种开发语言，它们经常一起使用，但也可以单独使用它们中的任意一个，JSX 是JavaScript 语言的扩展，而 React 则是一个 JavaScript 的库。

React开发必须掌握这些es6语法

1. **nvm**：需要最先安装，用于对node.js解释器进行管理，相当于node.js的版本管理器，因为React开发需要node.js的支持；2. **node.js**：安装好nvm后就需要安装node.js了，它可以理解为java的jdk；在React开发中可以理解为React的运行环境；3. **npm**：React开发需要依赖各种不同的三方库，npm就是用于下载不同的三方库用，可以理解为java开发中的maven； > - cnpm：功能同npm，因为npm的库包服务器在国外，下载速

在React中，V16版本之前有三种方式创建组件（~~`createClass()`~~ 被删除了)，之后只有两种方式创建组件。这两种方式的组件创建方式效果基本相同，但还是有一些区别,类创建方式

> 前面基本了解了组件的基本用法，在本节会实现一个更高级的例子。另外需要注意`本节代码是采用V15版本的createClass()、React.DOM和JSX实现的`，有时间的同学可以改成类实现的方式。html的世界中最复杂的UI控制就是表格了，原因是table它依赖本地环境来创建，不同的系统不同的浏览器对table的实现并不一样，也导致有些功能换了个浏览器不就好用了。

本节主要从底层原理上分析下React开发相关的内容和注意事项，本节会围绕使用展开，而非源码讲解。

本节先了解下用Function函数的方式创建React组件，有了上几节的铺垫，所以本节的代码示例部分无用的代码会被过滤掉以节省篇幅。

有些组件需要与外部系统同步。例如，你可能希望根据 React state 控制非 React 组件、设置服务器连接或在组件出现在屏幕上时发送分析日志。Effects 会在渲染后运行一些代码，以便可以将组件与 React 之外的某些系统同步。简单理解，就是需要操作外部非React元素，但React未渲染完时是不允许操作原生DOM的，所以需要一个类似渲染完成后的回调函数。其实也可以在root渲染完成后硬编码实现，但这样的话代码显的不工整了。

Sass(Syntactically Awesome Stylesheets)是一个 CSS 预处理器，是 CSS 扩展语言，可以帮助我们减少 CSS 重复的代码，节省开发时间：- Sass 引入合理的样式复用机制，可以节约很多时间来重复。- 支持变量和函数，利用代码简洁。>有两种文件后缀名，.sass和.sccs区别在于前者用缩

对于多页面应用而言，一个 URL 对应的就是一个 HTML 页面，**而对于单页面应用，一个 URL 对应的其实是一个组件的展示，可以通过 URL 来控制 UI 或者 HTML 的展示**，这就是Reate-route。React Router 包含了三个库：- react-router： 提供最基本的路由功能；- react-router-dom： 在浏览器中使用；- react-router-native： 在 react-native app开发时中使用，web开发时用不到；React 路由