react项目搭建步骤

创建项目

create-react-app 项目名字

参考项目结构图，搭建项目各个文件夹

一，初始化全部的css

使用 reset .css

git地址 https://github.com/search?q=reset.css

我们使用npm或者yarn下载

npm install --save normalize.css
yarn add normalize.css

然后 在项目中全局导入即可，index.js中引入

二，配置项目文件路径的别名

方便获取其他位置的文件和引用他们

第一步。我们使用一个包 来控制 使用yarn 安装它

​ 提示；react中动态绑定class 使用className包来管理 地址 https://www.jianshu.com/p/8b573482dd12

yarn add @craco/craco

第二步。安装后，我们需要去修改一下package.json配置文件

	"start": "craco start",
    "build": "craco build",
    "test": "craco test",

将原来的配置修改成上面那三个即可

第三步。我们在项目的根目录创建一个 craco.config.js 配置文件 添加如下代码

// 这里使用的是node 里面自带的一个包 可以用来管理文件路径
const path = require("path");

// 这里定义了一个函数 （使用的是箭头函数） 可以传入一个参数
// 返回值 就是当前路径加上你传入的那个路径文件名 我们将获取到的当前路径和你定义好的文件名 进行一个拼接并返回
// 注意 __dirname  表示的就是当前路径 该变量获取到的就是当前路径
const resolve = dir => path.resolve(__dirname, dir);
// 下面那个对象 左边健名就是 别名    右边值就是 别名对应的路径 
module.exports = {
   
  webpack: {
   
    alias: {
   
      "@": resolve("src"),
      "components": resolve("src/components")
    }
  }
}

效果如下图

三，开发页面的头部 和 尾部

基本结构效果

开发中一个组件 一个文件夹管理

通过上面，基本了解 然后我们开始配置路由

react-router 地址 https://react-router.docschina.org/web/guides/philosophy

第一步，安装它

​ 安装react-router-dom 它会自动安装react-router的所有依赖

yarn add react-router-dom

第二步 安装它

​ 安装react-router-config 统一配置路由 统一管理路由 这样路由就可以模块化管理

yarn add react-router-config

第三步，在router文件夹新建一个index.js文件 配置路由 结构如下

第四步，首先，我们来先了解一下App文件中的导入其他包的顺序 如下图

​ 然后我们在去App.js中导入我们要使用的router 如下

import React, {
    memo } from 'react'
import {
    renderRoutes } from "react-router-config";
//renderRoutes是个函数 我们通过他来渲染我们的routes路由对象
import routes from "./router"

import JZAppHeader from '@/components