学习react一，环境搭建，底子语法

react开发环境搭建

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

1. 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
  
  1. import './App.css'
  3. function App() {
  4.     let number = 90
  5.     return (
  6.     <>
  7.       <div>
  8.           <p>{"字符串"}</p>
  9.           <p>{123}</p>
  10.           <p>{true ? "yes" : "no"}</p>
  11.           <p>{[1,2,3]}</p>
  12.           <p>{number}</p>
  13.       </div>
  14.     </>
  15.   )
  16. }
  18. export default App

  复制代码
• 要放对象的话，需要序列化,JSON.stringify(obj)
  
  1. function App() {
  2.     let obj = {
  3.         name:"jjs",
  4.         age: 12
  5.     }
  6.     return (
  7.     <>
  8.       <div>
  9.           <p>{JSON.stringify(obj)}</p>
  10.       </div>
  11.     </>
  12.   )
  13. }

  复制代码
• 添加事件，使用驼峰命名，如onClick={fn},如果需要传参，使用高价函数，所谓高阶函数，就是一个函数自实验，返回这个实验事件的函数，目标就是为了传参
  
  1. import './App.css'
  3. function App() {
  4.     function fn(param,e) {
  5.         console.log(param,e.target)
  6.     }
  7.     return (
  8.     <>
  9.       <div>
  10.           <button onClick={(e) => fn(123,e)}>
  11.               点我一下
  12.           </button>
  13.       </div>
  14.     </>
  15.   )
  16. }
  18. export default App

  复制代码
• 在tsx要支持泛型， 如许写会被理解为一个元素，因为
         这是如许写的。所以要在后面加上，用来区分   
  
  1. function App() {
  2.     function fn<T,>(param:T,e) {
  3.         console.log(param,e.target)
  4.     }
  5.     return (
  6.     <>
  7.       <div>
  8.           <button onClick={(e) => fn(123,e)}>
  9.               点我一下
  10.           </button>
  11.       </div>
  12.     </>
  13.   )
  14. }

  复制代码
• 绑定id和class，在react中class要使用className
  
  1. function App() {
  2.     const id = "1"
  3.     const cls = "test"
  4.     return (
  5.     <>
  6.       <div>
  7.           <button id={id} className={cls}>
  8.               点我一下
  9.           </button>
  10.       </div>
  11.     </>
  12.   )
  13. }

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

  复制代码
• 绑定style ，style = {color: ‘red’}
  
  1. function App() {
  2.     const style = {
  3.         color: "red",
  4.         backgroundColor: "#baf",
  5.         margin: "10px",
  6.         border: "none"
  7.     }
  8.     return (
  9.     <>
  10.       <div>
  11.           <button style={style}>
  12.               点我一下
  13.           </button>
  14.       </div>
  15.     </>
  16.   )
  17. }
  18. // 也可以直接
  19. <button style={
  20.         {
  21.         color: "red",
  22.         backgroundColor: "#baf",
  23.         margin: "10px",
  24.         border: "none"
  25.     }
  26.     }>
  27.               点我一下
  28. </button>

  复制代码
• 添加html代码片断
  
  1. function App() {
  2.     const html = `
  3.     <section>
  4.         <p>我是内容</p>
  5.     </section>`
  6.     return (
  7.     <>
  8.       <div>
  9.           <button dangerouslySetInnerHTML={{__html: html}}></button>
  10.       </div>
  11.     </>
  12.   )
  13. }

  复制代码
  注意，dangerouslySetInnerHTML标记的标签内部不能有内容
  
• 循环遍历元素
  
  1. function App() {
  2.     const arr = [1,2,3,4]
  3.     return (
  4.     <>
  5.       <div>
  6.           {arr.map(v => {
  7.               return <div key={v}>{v}</div>
  8.           })}
  9.       </div>
  10.     </>
  11.   )
  12. }

  复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。