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,// 是否使用tabuseTabs: 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 = truereturn (<><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