学习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>
        </>
      )
    }
相关推荐
Luis Li 的猫猫2 小时前
深度学习中的知识蒸馏
人工智能·经验分享·深度学习·学习·算法
Smile_Gently2 小时前
前端:最简单封装nmp插件(组件)过程。
前端·javascript·vue.js·elementui·vue
鹿鸣悠悠4 小时前
第二月:学习 NumPy、Pandas 和 Matplotlib 是数据分析和科学计算的基础
学习·numpy·pandas
Java能学吗5 小时前
2.17学习总结
数据结构·学习
靡不有初1116 小时前
CCF-CSP第31次认证第二题——坐标变换(其二)【NA!前缀和思想的细节,输出为0的常见原因】
c++·学习·ccfcsp
luckycoke8 小时前
小程序立体轮播
前端·css·小程序
一 乐8 小时前
高校体育场管理系统系统|体育场管理系统小程序设计与实现(源码+数据库+文档)
前端·javascript·数据库·spring boot·高校体育馆系统
懒羊羊我小弟8 小时前
常用Webpack Loader汇总介绍
前端·webpack·node.js
祈澈菇凉9 小时前
ES6模块的异步加载是如何实现的?
前端·javascript·es6
我爱学习_zwj9 小时前
4.从零开始学会Vue--{{组件通信}}
前端·javascript·vue.js·笔记·前端框架