学习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>
        </>
      )
    }
相关推荐
cnsxjean37 分钟前
SpringBoot集成Minio实现上传凭证、分片上传、秒传和断点续传
java·前端·spring boot·分布式·后端·中间件·架构
Mephisto.java42 分钟前
【大数据学习 | Spark-Core】详解Spark的Shuffle阶段
大数据·学习·spark
南宫生1 小时前
力扣-位运算-3【算法学习day.43】
学习·算法·leetcode
xnuscd1 小时前
Milvus概念
数据库·学习·mysql
ZL_5671 小时前
uniapp中使用uni-forms实现表单管理,验证表单
前端·javascript·uni-app
沉浮yu大海1 小时前
Vue.js 组件开发:构建可重用且高效的 UI 块
前端·vue.js·ui
代码欢乐豆1 小时前
软件工程第13章小测
服务器·前端·数据库·软件工程
神秘的土鸡2 小时前
基于预测反馈的情感分析情境学习
学习
莘薪2 小时前
JQuery -- 第九课
前端·javascript·jquery
好青崧2 小时前
CSS 样式入门:属性全知晓
前端·css·tensorflow