一、React介绍

1.React起源与发展

React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套。做出来以后，发现这套东西很好用，就在2013年5月开源了。

2.React的特性

声明式设计---React采用声明范式，可以轻松描述应用。
高效---React通过对DOM的模拟(虚拟dom)，最大限度地减少与DOM的交互。
灵活---React可以与已知的库或框架很好地配合。
JSX---JSX是JavaScript语法的扩展。
组件---通过React构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
单向响应的数据流–--React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。

3.虚拟DOM

传统dom更新:
    真实页面对应一个DOM树。在传统页面的开发模式中，每次需要更新页面时，都要手动操作DOM来进行更新

虚拟dom:
    DOM操作非常昂贵。我们都知道在前端开发中，性能消耗最大的就是DOM操作，而且这部分代码会
    让整体项目的代码变得难以维护。React把真实DOM树转换成JavaScript对象树，也就是VirtualDOM

二、create-react-app

全局安装create-react-app

npm install -g create-react-app

创建一个项目

create-react-app your-app 注意命名方式 

Creating a new React app in /dir/your-app. 
Installing packages. This might take a couple of minutes. 安装过程较慢， 
Installing react, react-dom, and react-scripts...

如果不想全局安装，可以直接使用npx

 npx create-react-app myapp 也可以实现相同的效果

这个过程实际上会安装三个东西

react: react的顶级库
react-dom: 因为react有很多的运行环境，比如app端的react-native, 我们要在web上运行就使用 react-dom
react-scripts: 包含运行和打包react应用程序的所有脚本及配置成功后直接 npm start 即可

三、编写第一个react应用程序

react开发需要引入多个依赖文件：react.js、react-dom.js，分别又有开发版本和生产版本，create-react-app里已经帮我们把这些东西都安装好了。把通过CRA创建的工程目录下的src目录清空，然后在里面重新创建一个index.js.

// 从 react 的包当中引入了 React。只要你要写 React.js 组件就必须引入React,因为react里有一种语法叫JSX，稍后会讲到JSX，要写JSX，就必须引入React 
import React from 'react' 
// ReactDOM 可以帮助我们把 React 组件渲染到页面上去，没有其它的作用了。它是从 react-dom 中引入的，而不是从 react 引入。 
import ReactDOM from 'react-dom'
// ReactDOM里有一个render方法，功能就是把组件渲染并且构造 DOM 树，然后插入到页面上某个特定的元素上 
ReactDOM.render( 
// 这里就比较奇怪了，它并不是一个字符串，看起来像是纯 HTML 代码写在 JavaScript 代码里面。语法错误吗？这并不是合法的 JavaScript 代码, “在 JavaScript 写的标签的”语法叫 JSX-JavaScript XML。

<h1>欢迎进入React的世界</h1>
 // 渲染到哪里 
,document.getElementById('root')
)

初识 React框架