【React】从零开始搭建 react 项目(初始化+路由)

创建 React 项目

创建项目的方式:create-react-app 项目名称

如果没有安装 react 脚手架,请先安装

shell 复制代码
npm isntall create-react-app -g

安装成功后,开始配置项目

配置项目的 icon 和标题

配置 jsconfig.json

目的:用于配置 JavaScript 或 TypeScript 项目的根目录和其他一些选项,以帮助编辑器(如 VS Code)更好地理解项目的结构和提供智能提示

更多可以查看【React 】react 创建项目配置 jsconfig.json 的作用

js 复制代码
{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "baseUrl": "./",
    "moduleResolution": "node",
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "jsx": "preserve",
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  }
}

配置 craco.config.js

CRACO(Create React App Configuration Override)是一个易于理解且强大的工具,它提供了一种简单的方法来覆盖和自定义 Create React App 的配置,而无需执行"eject"操作。这种方法让你能够保留 Create React App 提供的所有优势,同时还能根据需要修改配置。

目的:用于配置 webpack 和一些 react 插件的配置

shell 复制代码
npm i -D @craco/craco craco-less

安装 craco-less 主要是为了使用 less

js 复制代码
const path = require('path')
const CracoLessPlugin = require('craco-less');

const resolve = pathname => path.resolve(__dirname, pathname)

module.exports = {
  // less
  plugins: [
    {
      plugin: CracoLessPlugin
    },
  ],
  // webpack
  webpack: {
    alias: {
      "@": resolve("src"),
      "components": resolve("src/components"),
      "utils": resolve("src/utils")
    }
  }
}

接下来,你需要更新 package.json 中的 scripts 部分,将原本调用 react-scripts 的命令替换为使用 CRACO CLI

json 复制代码
"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test"
}

项目目录结构划分

清理 react 脚手架默认创建的文件,重新创建符合个人项目开发的文件夹结构(参考如下)

CSS 样式重置

安装 normalize.css

shell 复制代码
npm install normalize.css

导入

自己编写其他的样式重置 css

css 复制代码
body, button, dd, dl, dt, form, h1, h2, h3, h4, h5, h6, hr, input, li, ol, p, pre, td, textarea, th, ul {
  padding: 0;
  margin: 0;
}

a {
  text-decoration: none;
}


img {
  vertical-align: top;
}

ul, li {
  list-style: none;
}

Router 配置

shell 复制代码
npm install react-router-dom

src\router\index.js

js 复制代码
import React from "react"
import { Navigate } from "react-router-dom"

// 懒加载
const Home = React.lazy(() => import("@/views/home"))
const Entire = React.lazy(() => import("@/views/entire"))
const Detail = React.lazy(() => import("@/views/detail"))

const routes = [
  {
    path: "/",
    element: <Navigate to="/home"/>
  },
  {
    path: "/home",
    element: <Home/>
  },
  {
    path: "/entire",
    element: <Entire/>
  },
  {
    path: "/detail",
    element: <Detail/>
  }
]

export default routes

App.jsx

js 复制代码
import { memo } from 'react';
import routes from './router';
import { useRoutes } from 'react-router-dom';

// memo: 组件的渲染结果,只会在 props 改变时才会重新渲染
const App = memo(() => {
  return (
    <div className="app">
      <div className="header">header</div>
      <div className="page">{useRoutes(routes)}</div>
      <div className="footer">footer</div>
    </div>
  );
});

export default App;

index.js

js 复制代码
import React, { Suspense } from 'react' // Suspense 解决路由懒加载问题
import ReactDOM from 'react-dom/client'
import { HashRouter } from 'react-router-dom'

import App from '@/App'
import 'normalize.css'
import './assets/css/index.less'


const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
  <Suspense fallback='loading'>
    <HashRouter>
      <App />
    </HashRouter>
  </Suspense>,
)
相关推荐
萌萌哒草头将军1 天前
🚀🚀🚀 Oxc 恶意扩展警告;Rolldown 放弃 CJS 支持;Vite 发布两个漏洞补丁版本;Rslib v0.13 支持 ts-go
前端·javascript·vue.js
接着奏乐接着舞。1 天前
3D地球可视化教程 - 第1篇:基础地球渲染系统
前端·javascript·vue.js·3d·three.js
龙傲天6661 天前
Scala的面向对象和函数式编程特性 Idea环境搭建和输入输出
前端
蓝色海岛1 天前
element-ui表格嵌套表格,鼠标移入时样式错乱-问题调研及处理办法
前端
薄雾晚晴1 天前
Rspack 实战:用 SWC Loader 搞定 JS 兼容(支持 IE 11 + 现代浏览器,兼顾构建速度)
前端·vue.js
恋猫de小郭1 天前
Flutter 官方 LLM 动态 UI 库 flutter_genui 发布,让 App UI 自己生成 UI
android·前端·flutter
kymjs张涛1 天前
零一开源|前沿技术周刊 #15
前端·javascript·面试
reacx1 天前
# 第三章:状态管理架构设计 - 从 Zustand 到 React Query 的完整实践
前端
古夕1 天前
Vue3 + vue-query 的重复请求问题解决记录
前端·javascript·vue.js
不知名程序员第二部1 天前
前端-业务-架构
前端·javascript·代码规范