# react-2301

**Repository Path**: connerljlx_admin/react-2301

## Basic Information

- **Project Name**: react-2301
- **Description**: 2301班react基础
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-06-13
- **Last Updated**: 2023-06-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# react
facebook 开源  用于构建用于界面  js 库
特点：
  声明式 开发 数据驱动 （不是mvvm）
  组件化开发
  跨平台  （react-native） 开发 移动端 c/s应用

# create-react-app
+ 安装
```js
npm i create-react-app
```
+ 启动项目
合适目录打开 cmd
```js
create-react-app 项目名 （不要出现大写）
```

# react   18.x版本  路由 6.x
老项目  react class组件 结合 react-router5.x  类比（vue2选项式api+vue-router3.x）

函数式组件 + react-hook + react-router6.x 做 函数式开发


# react启动 安装三个包
react   核心语法包
react-dom 将react 组件树 渲染真实dom 挂载 index.html上 root上 类比 vue app全局应用实例
react-scripts  webpack 配置

# 入口  src/index.js
```js
import React from 'react';
import ReactDOM from 'react-dom/client';

// 创建 dom 根实例 相当于 vue的 app
const root = ReactDOM.createRoot(document.getElementById('root'));
// 渲染 组件虚拟dom树状结构 变成真实dom 挂载到 #root上
root.render(
    <h1>你好世界</h1>
);
```

# react 数据驱动 需要虚拟dom  （fiber算法）
数据驱动框架 视图 一定需要是虚拟dom,这样才可以在更新时进行比较
问题？
  虚拟dom结构 写法 过于繁琐，程序员 直接写虚拟dom，语法 过于繁琐，为了方便程序员开发，框架都提供 简单方式 写组件视图，自动编译虚拟dom  比如vue用的  单文件组件 template 中定义 标签 自动编译成虚拟dom
  react使用jsx
# jsx

xml in js 

理解为自定义标签 以前用于 前后端传输数据  现在 java或安卓项目配置 
```xml
<student>
  <name>小明</name>
  <age>18</age>
  <gender>男</gender>
</student>
```

react jsx 用于 定义虚拟dom，react 允许开发者 在 js中 直接写标签（html标签，自定义组件标签）， react会自动调用 React.createElement 将 写 jsx标签 编译虚拟dom对象

洗脑洗脑洗脑：
  react jsx不是标签不是标签不是 标签 是对象对象对象


# vscode开启js中 emmet提示

# jsx基础语法
+ 所有jsx 必须包裹在一个闭合标签中
+ jsx默认 内容按照字符串解析， 想要jsx中使用 js语法 定义 模板 {}  模板中只能定义表达式
  jsx {} 中 js环境，模板内容  必须是js 表达式
+ 标签属性 也是用模板
```js
<button id={id}>按钮</button>
```
+ 某些属性 和js关键字冲突   做属性映射 比如 className -> class htmlFor -> for属性
```js
<div className="container">11</div>
<label htmlFor="xxx"></label>
```
+ 展开对象 给 jsx 标签 批量添加属性
```js
const data = {
  a: 10,
  b: 20
}
<div {...data}>box</div>
```
+ jsx中写注释  
```js
{/* 这是注释 */}
```

# react 组件 
+ 函数式组件
+ class组件