# 原生JavaScript,dom
1. 原生JavaScript操作DOM繁琐效率低
2. 使用JavaScript直接操作DOM,浏览器会进行大量的重绘重排.
3. 没有组件化编码方案,代码复用率低
# React的特点
用于构建用户界面的javaScript库,操作DOM呈现页面
## 声明式
相对命令式.
## *组件式
## 学习一次随处使用
开发web应用
开发移动端原生应用,react-native
VR开发react360
浏览器安装React Developer Tool
#### 模块
1. 理解:向外提供特定功能的js程序,一般就是一个js文件
2. 为什么要拆成模块:随着业务逻辑增加,代码越来越多且复杂
3. 作用:复用js,简化js编写,提高js运行效率
#### 组件
1. 理解:用来实现局部功能效果的代码和资源的集合(html,css,js,image等等)
2. 为什么:一个界面的功能更复杂
3. 作用:复用编码,简化项目编码,提高运行效率.
# 使用
npm升级
```shell
npm install -g npm@9.2.0
npm i create-create-app -g
```
## 创建项目
```shell
npx create-react-app my-app
```
```shell
npm i react react-dom
```
## 引入 react和react-dom两个js文件
## 创建React元素
React.createElement('元素名称,标签h,p',属性,子节点,子节点,子节点...)
## 渲染react元素到页面中
ReactDOM.render(要渲染的元素,渲染挂载点)
```html
```
# React脚手架的使用
```shell
npx create-react-app my-app
npm start
```
引入改成导入
```
// es6中模块语法
import React from 'react'
import ReactDOM from 'react-dom'
```
```html
import React from 'react';
import ReactDOM from 'react-dom';
const title = React.createElement('p',{title:"我是段落",id:"p1"},'hello xian',React.createElement('span',null,'hello hua'))
ReactDOM.render(title,document.getElementById('root'))
```