学习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>
        </>
      )
    }
相关推荐
玩电脑的辣条哥2 小时前
Python如何播放本地音乐并在web页面播放
开发语言·前端·python
ew452182 小时前
ElementUI表格表头自定义添加checkbox,点击选中样式不生效
前端·javascript·elementui
suibian52352 小时前
AI时代:前端开发的职业发展路径拓宽
前端·人工智能
Moon.92 小时前
el-table的hasChildren不生效?子级没数据还显示箭头号?树形数据无法展开和收缩
前端·vue.js·html
垚垚 Securify 前沿站2 小时前
深入了解 AppScan 工具的使用:筑牢 Web 应用安全防线
运维·前端·网络·安全·web安全·系统安全
CSDN_PBB3 小时前
[STM32 - 野火] - - - 固件库学习笔记 - - - 十五.设置FLASH的读写保护及解除
笔记·stm32·学习
工业甲酰苯胺5 小时前
Vue3 基础概念与环境搭建
前端·javascript·vue.js
mosquito_lover16 小时前
怎么把pyqt界面做的像web一样漂亮
前端·python·pyqt
鸡啄米的时光机6 小时前
vscode的一些实用操作
vscode·学习
Kai HVZ7 小时前
《深度学习》——调整学习率和保存使用最优模型
人工智能·深度学习·学习