React 和 vue的区别以及React的环境搭建，运行
# React
## React 和 vue
- React 和 vue 同属MVVM框架
- M:model
- V:VIEW
- VIEWMODEL
- React 全部是在js中定义的，不象vue将文件拆分为3部分。
- react 不存在模板的说法
## 虚拟DOM
- 概念
- DOM是浏览器提高的API数量相对固定，扩展比较难
- 虚拟DOM：用js对象表现出DOM的内容以及层级系，可以自定义api,通过特定的方式渲染到页面中。
- 原理
- 按需更新，重新渲染
- diff算法
- 逐层对比新旧dom树，所有节点对比完毕后，就能定位到变化的部分了，将变化部分的组件移除，替换新的组建。
- 在每个DOM节点上都会生成一个key，这个key将dom节点与虚拟dom关联
## react 框架搭建
- 安装nodejs
- npm install -g create-react-app
- create-react-app react_demo1
- 项目名称不能大写
- 终端 运行 npm run start 运行项目
## JSX基础
- 它是符合XML规范的js语法，即开闭标签 ** 必须** 完整
- jsx内部运行时，先把html代码转换为Js对象，组成虚拟dom
- jsx所有元素只能由一个根基节点
### 渲染标签
注意1：在html中要使用className代替class
注意2：无论在数组还是在变量中去赋值dom,都不需要加引号
注意3：只有有数组，就要用到Key
##组件
注意1：react是一个组件级的框架，所有的组件或路由都是组件的形式存在的，只要注意组件的首字母不能小写，若小写就会被认为是普通的html,有响应式组件，非响应式组件；
----------demo---------
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
//var mydiv=React.createElement('div',{calss:'my-div',id:'mydiv'},'hello denny')
//var msg="text "
//var mydiv2=<div>{msg}</div>
function MyComponent() {
return <div>my name is denny</div>
}
ReactDOM.render(
// <React.StrictMode>
// <App />
// </React.StrictMode>,
//mydiv,
//mydiv2,
<React.StrictMode>
<MyComponent />
</React.StrictMode>,
document.getElementById('root')
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
---------------run react---------------------------------------------
1 cmd (project path)
2 cnpm i
3. vscode npm run start
