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

语法入门

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

    字符串,数字,数组(里面存放普通类型数据),三元表达式,元素,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
  2. 要放对象的话,需要序列化,JSON.stringify(obj)

    react 复制代码
    function App() {
        let obj = {
            name:"jjs",
            age: 12
        }
        return (
        <>
          <div>
              <p>{JSON.stringify(obj)}</p>
          </div>
        </>
      )
    }
  3. 添加事件,使用驼峰命名,如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
  4. 在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>
        </>
      )
    }
  5. 绑定id和class,在react中class要使用className

    react 复制代码
    function App() {
        const id = "1"
        const cls = "test"
        return (
        <>
          <div>
              <button id={id} className={cls}>
                  点我一下
              </button>
          </div>
        </>
      )
    }
  6. 绑定多个class , 使用模板字符串的格式即可

    react 复制代码
    <button className={`${cls} ${id}`}>
                  点我一下
    </button>
  7. 绑定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>
  8. 添加html代码片段

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

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

  9. 循环遍历元素

    react 复制代码
    function App() {
        const arr = [1,2,3,4]
        return (
        <>
          <div>
              {arr.map(v => {
                  return <div key={v}>{v}</div>
              })}
          </div>
        </>
      )
    }
相关推荐
小牛itbull39 分钟前
ReactPress:重塑内容管理的未来
react.js·github·reactpress
秃头佛爷42 分钟前
Python学习大纲总结及注意事项
开发语言·python·学习
dayouziei3 小时前
java的类加载机制的学习
java·学习
逐·風4 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫4 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦5 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子5 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山6 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享6 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
dsywws6 小时前
Linux学习笔记之vim入门
linux·笔记·学习