Code Better

切换日光/暗黑模式

环境搭建 ​

create-react-app快速搭建开发环境 ​

shell
npx create-react-app <project_name>

create-vite脚手架安装 ​

create-vite脚手架是基于vite工具实现的，脚手架为前端项目带来了非常多的便利

  • 快速启动web服务器，并支持自动刷新页面和代码热更新功能
  • 支持第三方模块的使用，并且让大部分文件都支持模块化操作
  • 把开发环境下的代码转换成浏览器能够识别的代码
  • 支持生产环境构建，项目优化等处理

安装 ​

shell
# vite需要Node.js版本 14.18+，16+
npm create vite@latest

# 1.设置项目名
? Project name: › react-vite-app

# 2.选择一个框架
? Select a framework: › - Use arrow-keys. Return to submit.
    Vanilla
    Vue
❯   React
    Preact
    Lit
    Svelte
    Solid
    Qwik
    Others

# 3.选择一下用ts还是js
# SWC：是一个可扩展的基于Rust的平台，用于下一代快速开发工具，SWC在单线程上比Babel快20倍，在四核上快70倍。
? Select a variant: › - Use arrow-keys. Return to submit.
    TypeScript
    TypeScript + SWC
    JavaScript
❯   JavaScript + SWC

# 4.到这里，一个react项目就创建好了
Scaffolding project in /Desktop/react-vite-app...
Done. Now run:
  cd react-vite-app
  npm install
  npm run dev

文件介绍 ​

├─ public 
│  └─ vite.svg
├─ src 
│  ├─ assets
│  │  └─ react.svg
│  ├─ App.css
│  ├─ App.jsx
│  ├─ index.css
│  └─ main.jsx
├─ .eslintrc.cjs
├─ .gitignore 
├─ index.html
├─ package-lock.json
├─ package.json
├─ README.md
└─ vite.config.js

main.js

js
// 项目的入口，从这里开始运行
// React必要的两个核心包
import React from 'react'
import ReactDOM from 'react-dom/client'
// 导入项目的根组件
import App from './App.jsx'

// 把App根组件渲染到id为root的dom节点上
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

react模块与react-dom模块分别起什么作用

react 和 react-dom 是 react 中非常重要的两个全局对象

  • react 模块
    • 实现 react 开发中的核心功能
    • 组件
  • react-dom 模块
    • 主要用于操作浏览器DOM
    • react-dom/client、react-dom/server

StrictMode严格模式

  1. 检查组件是否是纯函数

  2. 及早的发现useEffect中的错误

  3. 警告过时的API

ESLint配置 ​

ESLint是代码规范插件，create-vite脚手架已经内置了，可以直接执行下面的命令查看。

shell
npm run lint

设置开发中自动提示 ​

1.安装vite-plugin-eslint

shell
npm install vite-plugin-eslint

2.修改 vite.config.js文件

js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
import eslintPlugin from 'vite-plugin-eslint'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    eslintPlugin({
      include: ['src/*.jsx','src/**/*.jsx']
    })
  ],
})

Prettier配置 ​

Prettier是代码格式化插件

1.vscode插件：Prettier - Code formatter

2.根目录下创建配置文件：.prettierrc

©2024 Dancy Su