react是facebook开发的，（vue-尤雨溪。angular-谷歌-收购的）facebook在构建instagram网站的时候遇见两个问题：
于是facebook起初调研过市场上已存的mvc框架，比如angularjs，发现都不太满意，于是就推陈出新，开发了react框架，并在2013年五月份开源，国内2016年才开始首先在杭州使用。
声明式设计 −React采用声明范式，可以轻松描述应用（自动dom操作）
高效 −React通过对DOM的模拟(虚拟dom)，最大限度地减少与DOM的交互
灵活 −React可以与已知的库或框架很好地配合，比如（jquery库）
JSX − JSX 是 JavaScript 语法的扩展
组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中
单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单
React Fiber 是 16.+ 版本
React速度很快：它并不直接对DOM进行操作，引入了一个叫做虚拟DOM的概念，安插在javascript逻辑和实际的DOM之间，性能好。最大限度减少DOM交互。
跨浏览器兼容：虚拟DOM帮助我们解决了跨浏览器问题，它为我们提供了标准化的API，甚至在IE8中都是没问题的。
一切都是component：代码更加模块化，重用代码更容易，可维护性高。这样当某个或某些组件出现问题是，可以方便地进行隔离。每个组件都可以进行独立的开发和测试，并且它们可以引入其它组件。这等同于提高了代码的可维护性。
单向数据流：Flux是一个用于在JavaScript应用中创建单向数据层的架构，它随着React视图库的开发而被Facebook概念化。减少了重复代码，这也是它为什么比传统数据绑定更简单。
同构、纯粹的javascript：因为搜索引擎的爬虫程序依赖的是服务端响应而不是JavaScript的执行，预渲染你的应用有助于搜索引擎优化。
兼容性好：比如使用RequireJS来加载和打包，而Browserify和Webpack适用于构建大型应用。它们使得那些艰难的任务不再让人望而生畏。
React 只是一个视图库，而不是一个完整的框架。
对于 Web 开发初学者来说，有一个学习曲线。
将 React 集成到传统的 MVC 框架中需要一些额外的配置。
代码复杂性随着内联模板和 JSX 的增加而增加。
如果有太多的小组件可能增加项目的庞大和复杂。
性能高效
双向数据绑定
学习难度低，上手简单。
官方：Creat-react-app
1.安装node.js(推荐使用LTS版本)
2.安装cnpm 淘宝镜像: https://npm.taobao.org/
命令：npm install -g cnpm --registry=https://registry.npm.taobao.org
2.node命令行行执行以下命令
create-react-app my-app
cd my-app
npm start
安装完成
工程目录如下：
图标文件，网页标题左上角的小图标
项目首页的HTML模板
manifest.json 是配合PWA 使用的文件。
整个程序的入口文件，也就是整个项目从index.js 里面开始逐行执行
为用户在本地创建一个service worker 来缓存资源到本地，提升应用的访问速度
自动化的测试文件
标题->标题组件搜索->搜索组件->input组件和button组件
前端组件化优势：维护方便另一种方式：调用render方法，可以将react元素渲染到真实的dom中。index.js
import React from 'react';
//函数无状态组件
function App() {
return (
<div>
Helllo world
</div>
);
}
export default App;
import React ,{
Component }from ‘react’;
/*
import { Component } from ‘react’;
//等价于
import React from ‘react’
const Component = React.Component
*/
//ES6类方法 组件
class App extends Component {
render() {
return (
<div>
Helllo world
</div>
);
}
}
export default App;
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App'; //自动补全js后缀
import * as serviceWorker from './serviceWorker';
ReactDOM.render(
<React.StrictMode>
<App /> //JSX 语法
</React.StrictMode>,
document.getElementById(‘root’)
);
//将我们APP中的节点，挂载到id=root的节点下面
serviceWorker.unregister();
注：使用JSX语法 需要引入 import React from 'react';
React 使用 JSX 来替代常规的 JavaScript。JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。我们不需要一定使用 JSX，但它有以下优点：
JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
它是类型安全的，在编译过程中就能发现错误。
使用 JSX 编写模板更加简单快速。
在上节认识了组件，原来我们在html中写标签，但是在React中，我们直接将标签写在了.js文件中，就是说在React中，书写html标签这种方法，称之为JSX语法。此外，我们除了可以使用html定义的标签，我们也可以使用自己定义的标签，如下面定义的APP标签。
【注】JSX中组件开头，必须以大写字母开头。
因此我们可以区分：
import React ,{ Component }from 'react';
//ES6类方法 组件
class App extends React.Component {
render() {
return (
<div>
Helllo world
</div>
);
}
}
export default App;
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App'; //自动补全js后缀
import * as serviceWorker from './serviceWorker';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById(‘root’)
);
serviceWorker.unregister();
注：下面大部分的代码从todolist摘取（第三章）
我们可以在 JSX 中使用 JavaScript 表达式。表达式写在花括号 {} 中。实例如下：
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App'; //自动补全js后缀
import * as serviceWorker from './serviceWorker';
ReactDOM.render(
<div>
<h1>{
1+1 }</h1>
</div>,
document.getElementById(‘root’)
);
serviceWorker.unregister();
render 返回的元素，必须包含在一个大的元素之中
//错误写法
render () {
return (
<div>第一个</div>
<div>第二个</div>
)
}
//正确写法
render () {
return (
<div>
<div>第一个</div>
<div>第二个</div>
</div>
)
}
可以引入Fragment占位符代替
import React, { Component, Fragment } from 'react'; //主要要引入该元素
class TodoList extends Component {
render() {
return (
<Fragment>
<div><input/><button>提交</button></div>
<ul>
<li>学英语</li>
<li>learn English</li>
</ul>
</Fragment>
)
}
}
export default TodoList;
使用{/注释/} 在vscode中 使用快捷键 CTRL + / 来进行快速注释
alt + shitf + A 群体注释
render() {
return (
<Fragment>
<div>
{/* 这是一个注释 */}
<input
value={this.state.inputValue}
onChange={this.handleInputChange.bind(this)} //在这里加this
/>
<button onClick={this.handleBtnClick.bind(this)}>提交</button>
</div>
<ul>
{
this.state.list.map((item, index) => {
return <li
key={ index }
onClick={this.hanleItemDelete.bind(this, index)}
>
{ item }
</li> // 用index做key值不好
})
}
</ul>
</Fragment>
)
}
我们创建一个style.css
.input {
border: 1px solid red; //我们在给input框增加一个样式
}
注意引用的时候：为了防止class当成类，在JSX中，class的属性，使用 className。
如下className=‘input’
render() {
return (
<Fragment>
<div>
{/* 这是一个注释 */}
<input
className='input' //使用class
value={this.state.inputValue}
onChange={this.handleInputChange.bind(this)} //在这里加this
/>
<button onClick={this.handleBtnClick.bind(this)}>提交</button>
</div>
<ul>
{
this.state.list.map((item, index) => {
return <li
key={ index }
onClick={this.hanleItemDelete.bind(this, index)}
>
{ item }
</li> // 用index做key值不好
})
}
</ul>
</Fragment>
)
如果我们不进行设置，它会自动转义
当我们想要设置显示为样式的时候，我们要在li标签中增加一条属性
dangerouslySetInnerHTML = {{__html: item}}
这样就不会进行转义了
<ul>
{
this.state.list.map((item, index) => {
return <li
key={ index }
onClick={this.hanleItemDelete.bind(this, index)}
dangerouslySetInnerHTML = {{__html: item}}
>
</li> // 用index做key值不好
})
}
</ul>
在lable标签中，使用for进行一个扩大选择范围。
在React中，为了防止与for循环的关键字 for重合，使用 htmlFor=“insertArea”
<label htmlFor="insertArea">输入内容：</label>
<input
id="insertArea"
className='input' //使用class
value={this.state.inputValue}
onChange={this.handleInputChange.bind(this)} //在这里加this
/>