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

react开发环境搭建

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

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配置文件

语法入门

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

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

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

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

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

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

   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

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

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

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

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

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

6. 绑定多个class , 使用模板字符串的格式即可

   <button className={`${cls} ${id}`}>点我一下
   </button>
   

7. 绑定style ，style = {color: ‘red’}

   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>
   

8. 添加html代码片段

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

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

9. 循环遍历元素

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