# react-basic-2206

**Repository Path**: connerljlx_admin/react-basic-2206

## Basic Information

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

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2023-02-08
- **Last Updated**: 2023-05-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# react 
[官网文档](reactjs.org)
用于构建用户界面的 JavaScript 库
特点：
  声明式  （数据驱动）
  组件化
  虚拟dom （升级成fiber）
  跨平台
# cra脚手架
安装
```js
npm i create-react-app -g
```
创建项目
```js
create-react-app 项目名
```
运行项目
```js
npm run start
```

# cra创建项目过程
react 核心语法包
react-dom 包 将react组件虚拟dom （比较） 渲染到 （mount)到index.html(类似vue createApp)
react-scripts // 隐藏 webpack配置文件

# 入口文件 是 src/index.js
```js
import ReactDOM from 'react-dom/client'
// ReactDOM创建 类似vue中 app 应用实例，将所有组件 创建 虚拟dom结构编译成真实dom 并 mount到index.html上
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<h1>Hello, world!</h1>);
```
# jsx
react和vue一样，组件的 模板，都是使用虚拟dom，直接写虚拟dom 过于繁琐，vue解决方案，使用单文件组件的 template 直接定义标签，vue自动编译template标签 为虚拟dom

react利用 jsx 来编写虚拟dom

## 什么是jsx
xml in js 
xml 自定义标签 一开始设计的 目的用于前后端传输数据，后来被 json格式取代

举例xml 传递学生数据
```xml
<student>
  <name>小明</name>
  <age>18</age>
</student>
```

jsx 可以在js中 直接写标签，react会自动 编译 标签，转换成虚拟dom对象

记住记住记住：
  react中标签，并不是真实 标签，他是对象对象对象（虚拟dom对象）

## jsx语法
+ 想要jsx中 写任意js 表达式语法，一定要加 {}
+ jsx中注释 也要写在  {} 写js注释
+ 任何一个 jsx 都必须 包裹 在 一个闭合标签中
+ 尤其jsx 标签 都最终编译成 对象，标签属性也是作为对象属性存在，会存在冲突
  表如class就和 js关键字冲突，react转义
  ```js
      <div className="box">111</div>
      <label htmlFor=""></label>
  ```