React18快速入门教程

项目流程

开发流程

技术选型

创建项目

执行命令：

pnpm create vite

项目配置

• editorconfig：用于配置编辑器，实现使用不同的编辑器打开效果是相同的
• 包配置：主要用于配置国内源
• eslint配置：主要用于配置语法规则
• prettier：主要用于配置代码格式

使用Github管理项目

Github的项目开源地址如下：https://github.com/zhangdapeng520/zdpreact_antd_admin

使用pnpm创建React项目

在终端执行：

pnpm create vite

• 项目名：pc_admin
• 框架：React
• 语言：TypeScript

安装依赖：

pnpm i

使用webstorm打开并配置启动项，这个在之前vue的一些教程中经常讲到，就不赘述了。

浏览器访问：http://localhost:5173/

增加编辑器配置

.editorconfig

# 参考文档：https://editorconfig.org
# 根路径
root = true

# 对所有文件生效
[*]
# 文件的编码
charset = utf-8
# 使用空格缩进，默认是使用 tab
indent_style = space
# 缩进几个空格，默认是 4
indent_size = 2
# 结尾换行符
end_of_line = lf
# 在末尾追加一个空行
insert_final_newline = true
# 如果末尾有多余的空格，则自动去掉
trim_trailing_whitespace = true

整合prettier

安装：

pnpm add prettier -D

添加 .prettierrc.cjs:

module.exports = {
  // 每行最大字符数量，超过换行
  printWidth: 88,
  // 是否使用tab
  useTabs: false,
  // 缩进
  tabWidth: 2,
  // 去除结尾分号
  semi: false,
  // 使用单引号
  singleQuote: false,
  // 在jsx中使用单引号
  jsxSingleQuote: false,
  // 箭头函数如果只有一个参数，自动去掉括号
  arrowParens: "avoid",
  // 对象，数组括号与文字间空格
  bracketSpacing: true,
  // 尾随逗号
  trailingComma: "none"
}

webstorm配置prettier格式化：

eslint规则讲解

import js from "@eslint/js"
import globals from "globals"
import reactHooks from "eslint-plugin-react-hooks"
import reactRefresh from "eslint-plugin-react-refresh"
import tseslint from "typescript-eslint"

export default tseslint.config(
  { ignores: ["dist"] },
  {
    // 继承推荐的配置
    extends: [js.configs.recommended, ...tseslint.configs.recommended],
    // 在哪些文件中生效
    files: ["**/*.{ts,tsx}"],
    languageOptions: {
      ecmaVersion: 2020,
      globals: globals.browser
    },
    plugins: {
      "react-hooks": reactHooks,
      "react-refresh": reactRefresh
    },
    /**
     * 自定义的规则
     * off 或 0 ：关闭规则
     * warn 或 1：打开的规则作为警告，不影响代码执行
     * error 或 2：打开的规则作为错误，代码不能执行，界面报错
     * */
    rules: {
      ...reactHooks.configs.recommended.rules,
      "react-refresh/only-export-components": ["warn", { allowConstantExport: true }],
      "no-console": ["error", { allowConsole: false }], // 禁止使用console
      "no-unused-vars": ["error", { allowUnusedVars: false }], // 禁止定义未使用的变量
      "no-debugger": "error", // 禁止使用debugger
      "no-var": "error" // 禁止使用var，要求使用let或者const
    }
  }
)

vite配置

配置别名：

pnpm add @types/node -D

vite.config.js

import { defineConfig } from "vite"
import react from "@vitejs/plugin-react"
import path from "path"

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src")
    }
  },
  server: {
    open: true
  }
})

配置vite实现代理和跨域

import { defineConfig } from "vite"
import react from "@vitejs/plugin-react"
import path from "path"

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src") // 配置src路径别名
    }
  },
  server: {
    open: true, // 启动服务的时候自动打开浏览器
    host: "127.0.0.1", // 启动的主机
    port: 5173, // 端口号
    proxy: {
      "/api": {
        target: "http://127.0.0.1:8888", // 后端的接口地址
        changeOrigin: true, // 跨域
        rewrite: path => path.replace(/^\/api/, "") // 重写api路径
      }
    }
  }
})

vue和react的对比

什么是JSX？

在js里面写html的语法：

JSX渲染变量

function App() {
  const message = "你好，React18"
  return (
    <>
      <div>{message}</div>
    </>
  )
}

export default App

JSX 渲染节点

function App() {
  const message = <h1 style={{ color: "red" }}>你好，React18</h1>
  return (
    <>
      <div>{message}</div>
    </>
  )
}

export default App

JSX 实现条件渲染

假设登录用户是管理员，就打印你好管理员，否则打印你好普通用户。

function App() {
  const isAdmin = true
  return (
    <>
      <div>{isAdmin ? <span>你好管理员</span> : <span>你好普通用户</span>}</div>
    </>
  )
}

export default App

JSX 渲染数组

比如有一个用户列表，张三，李四王五，将这个用户列表中的每个用户的名字打印出来。

function App() {
  const users = ["张三", "李四", "王五"]
  return (
    <>
      <div>
        {users.map((v, k) => {
          return <h3 key={k}>{v}</h3>
        })}
      </div>
    </>
  )
}

export default App