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>

</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