学习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 = 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
   
   

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>
       </>
     )
   }