学习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>
        </>
      )
    }
相关推荐
IT_陈寒17 分钟前
Python+AI实战:用LangChain构建智能问答系统的5个核心技巧
前端·人工智能·后端
凉、介25 分钟前
ARM 总线技术 —— AMBA 入门
arm开发·笔记·学习
袁煦丞31 分钟前
MoneyPrinterTurbo一键生成短视频:cpolar内网穿透实验室第644个成功挑战
前端·程序员·远程工作
代码小学僧33 分钟前
让 AI 真正帮你开发:前端 MCP 实用技巧分享
前端
日更嵌入式的打工仔37 分钟前
嵌入式入门:APP+BSP+HAL 三层分级架构浅析
笔记·单片机·嵌入式硬件·学习
晴殇i41 分钟前
前端鉴权新时代:告别 localStorage,拥抱更安全的 JWT 存储方案
前端·javascript·面试
Json____43 分钟前
使用node Express 框架框架开发一个前后端分离的二手交易平台项目。
java·前端·express
since �43 分钟前
前端转Java,从0到1学习教程
java·前端·学习
OliverH-yishuihan1 小时前
FPGA 入门 3 个月学习计划表
学习·fpga开发
小奋斗1 小时前
面试官:[1] == '1'和[1] == 1结果是什么?
前端·面试