React 01 目录结构、tsx 语法

REACT

参考资料
简介
安装
目录结构
- 为什么main.tsx的document.getElementById('root')!要加一个!
- public公共目录和assets静态资源有什么区别?
[tsx 语法](#tsx 语法)
- 讲解
- 使用

参考资料

BV1mcpPeMETt
https://message163.github.io/react-docs/react/basic/development.html

简介

React 是一个 JS 库

安装

目录结构

index.html：入口文件

package-lock.json 作用：锁版本号 + 缓存

package.json

javascript 复制代码

{
  "name": "demo1",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  可执行命令
  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^19.2.0",
    "react-dom": "^19.2.0"
  },
  开发依赖-开发环境的依赖-不会被打包
  "devDependencies": {
    "@eslint/js": "^9.39.1",
    "@types/node": "^24.10.1",
    "@types/react": "^19.2.5",
    "@types/react-dom": "^19.2.3",
    "@vitejs/plugin-react-swc": "^4.2.2",
    "eslint": "^9.39.1",
    "eslint-plugin-react-hooks": "^7.0.1",
    "eslint-plugin-react-refresh": "^0.4.24",
    "globals": "^16.5.0",
    "typescript": "~5.9.3",
    "typescript-eslint": "^8.46.4",
    "vite": "^7.2.4"
  }
}

为什么main.tsx的document.getElementById('root')!要加一个!

因为document.getElementById('root')返回可能为空，这时候就会报错。!是非空断言，告诉编辑器这个表达式不会为空。

public公共目录和assets静态资源有什么区别?

答：public目录的资源编译之后会存放到根目录，而静态资源assets是会随着项目一起打包的，public则不会被编译。

tsx 语法

讲解

jsx是什么？

答：jsx是js的语法扩展，允许在js中编写html代码。

例如：const fn = () => <div>哈哈哈</div>

使用

插值语句 jsx tsx 展示：字符串数字数组（普通类型）元素三元表达式API调用
插值语句如何支持对象？------序列化
事件如何添加？------驼峰 onClick。
如果需要传参使用高阶函数；如果不需要就直接丢给他函数体
如何支持泛型函数？不成功的原因是因为把<T>理解成了是一个元素<div>。------解决方案：纠正泛型<T, >

javascript 复制代码

function App() {
  const fn = () => 'test';
  const num = 3.1415926;
  const obj = {name: 1};
  const test1 = () => {
    console.log('test1');
  }

  const test2 = (params, e) => {
    console.log('test2', e);
  }

  const test3 = <T,>(params: T) => {
    console.log('test3');
  }

  return (
    <>
      <div>
        {'hahaha' /** 字符串用法 */}
        {123 /** 变量用法 */}
        {fn() /** 函数用法 */}
        {[1,2,3] /** 数组用法 --- 数组元素只能是普通类型*/}
        { true ? 'true' : 'false' /** 三元表达式用法 */}
        {num.toFixed(2) /** API 调用：表达式用法 */}
      </div>

      <div>
        {JSON.stringify(obj)}
      </div>

      <div onClick={test1}>点击我，普通函数没有传参</div>
      <div onClick={(e) => test2(123, e)}>点击我，传参函数，用高阶函数</div>
      <div onClick={() => test3('111')}>点击我，泛型函数</div>
    </>
  )
}

export default App

如何去绑定属性 id class 等等
class比较特殊 className
如何绑定多个class
绑定style（color：'blue'）
添加html代码片段 v-htmldangerouslySetInnerHTML

javascript 复制代码

function App() {
  const id1 = '123';
  const cls1 = 'test';
  const style1 = {color: 'blue', fontSize: '20px'};
  const htmlString = '<div style="color: GREEN; font-size: 15px;">666: 如何绑定 innerHTML</div>';

  return (
    <>
      <div id = {id1}>111: 如何绑定 id</div>
      <div className={cls1}>222: 如何绑定 class</div>

      <div className={`${cls1} aa bb cc`}>333: 如何绑定多个class</div>

      <div style={style1}>444: 如何绑定 style</div>
      <div style={{color: 'blue', fontSize: '20px'}}>555: 如何绑定 style</div>

      <div dangerouslySetInnerHTML={{__html: htmlString}}></div>
    </>
  )
}

如何去遍历数组------类似 V-for

javascript 复制代码

import './App.css'

function App() {
  const arr = [1, 2, 3, 4, 5];
  return (
    <>
      <div>
        {
          arr.map(item => {
            return <div key={item}>{item}</div>
          })
        }
      </div>
    </>
  )
}

export default App