学习react一，环境搭建，基础语法

react开发环境搭建

选择一个目录，然后运行以下命令：

javascript 复制代码

npm init vite

执行完成之后会让你输入项目名称例如 demo-01
接下来会让你选择一个框架这时候选择 react
然后选择 TypeScript + SWC 如果你不会ts就选择js

目录介绍

public 公共目录
src
- assets 静态资源
- App.css 根组件样式
- App.tsx 根组件
- index.css 全局css文件
- main.tsx 全局tsx文件
- vite-env.d.ts 声明文件
.eslintrc.cjs eslint配置文件
.gitignore git忽略文件
index.html 入口文件index.html
package.json 项目依赖模块文件
tsconfig.json ts配置文件
tsconfig.node.json vite-ts配置文件
vite.config.ts vite配置文件

语法入门

插值语句，使用{} 可以放在里面的数据类型有：

字符串，数字，数组（里面存放普通类型数据），三元表达式，元素，api

react 复制代码

import './App.css'

function App() {
    let number = 90
    return (
    <>
      <div>
          <p>{"字符串"}</p>
          <p>{123}</p>
          <p>{true ? "yes" : "no"}</p>
          <p>{[1,2,3]}</p>
          <p>{number}</p>
      </div>
    </>
  )
}

export default App

要放对象的话，需要序列化,JSON.stringify(obj)

react 复制代码

function App() {
    let obj = {
        name:"jjs",
        age: 12
    }
    return (
    <>
      <div>
          <p>{JSON.stringify(obj)}</p>
      </div>
    </>
  )
}

添加事件，使用驼峰命名，如onClick={fn},如果需要传参，使用高价函数，所谓高阶函数，就是一个函数自执行，返回这个执行事件的函数，目的就是为了传参

react 复制代码

import './App.css'

function App() {
    function fn(param,e) {
        console.log(param,e.target)
    }
    return (
    <>
      <div>
          <button onClick={(e) => fn(123,e)}>
              点我一下
          </button>
      </div>
    </>
  )
}

export default App

在tsx要支持泛型，这样写会被理解为一个元素，因为

这是这样写的。所以要在后面加上，用来区分

react 复制代码

function App() {
    function fn<T,>(param:T,e) {
        console.log(param,e.target)
    }
    return (
    <>
      <div>
          <button onClick={(e) => fn(123,e)}>
              点我一下
          </button>
      </div>
    </>
  )
}

绑定id和class，在react中class要使用className

react 复制代码

function App() {
    const id = "1"
    const cls = "test"
    return (
    <>
      <div>
          <button id={id} className={cls}>
              点我一下
          </button>
      </div>
    </>
  )
}

绑定多个class , 使用模板字符串的格式即可
react 复制代码
```
<button className={`${cls} ${id}`}>
              点我一下
</button>
```

绑定style ，style = {color: 'red'}

react 复制代码

function App() {
    const style = {
        color: "red",
        backgroundColor: "#baf",
        margin: "10px",
        border: "none"
    }
    return (
    <>
      <div>
          <button style={style}>
              点我一下
          </button>
      </div>
    </>
  )
}
// 也可以直接
<button style={
        {
        color: "red",
        backgroundColor: "#baf",
        margin: "10px",
        border: "none"
    }
    }>
              点我一下
</button>

添加html代码片段

react 复制代码

function App() {
    const html = `
    <section>
        <p>我是内容</p>
    </section>`
    return (
    <>
      <div>
          <button dangerouslySetInnerHTML={{__html: html}}></button>
      </div>
    </>
  )
}

注意，dangerouslySetInnerHTML标记的标签内部不能有内容

循环遍历元素

react 复制代码

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