React从零开始搭建项目

一、脚手架创建React项目

二、 删除src目录下的所有文件

三、创建App.js

import React, {Component} from "react";

/* 应用的根组件 */
export default class App extends Component {
    render() {
        return <div>App</div>
    }
}

四、创建index.js作为入口文件

如下写法是React18的写法

// 入口js
import React from "react";
import { createRoot } from 'react-dom/client';

import App from './App'

createRoot(document.getElementById('root')).render(<App/>)

效果图：

五、创建如下文件夹

目录名	说明
api	ajax相关
assets	公共资源
components	非路由组件
config	配置
pages	路由组件
utils	工具模块

六、引入antd样式

下载组件库

npm i antd

实现组件库的按需打包

下载依赖（实现不打包未引入的组件，默认打包所有组件）

npm i react-app-rewired customize-cra babel-plugin-import

定义加载配置的js模块：config-overrides.js

const { override, fixBabelImports } = require('customize-cra')

module.exports = override(
    // 针对antd实现按需打包：根据import进行打包（使用babel-plugin-import）
    fixBabelImports('import', {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: 'css' // 自动打包相关的样式
    })
)

修改package.json

  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  },

自定义antd主题

需求：antd的主题颜色从Blue变为Green
下载工具包

npm i less less-loader

修改config-overrides.js

const { override, fixBabelImports, addLessLoader } = require('customize-cra')

module.exports = override(
    // 针对antd实现按需打包：根据import进行打包（使用babel-plugin-import）
    fixBabelImports('import', {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: true,
    }),
    addLessLoader({
        javascriptEnabled: true,
        modifyVars: {'@primary-color': '#1DA57A'}
    })
)

七、引入路由

下载依赖

 npm i react-router-dom

新建/pages/admin/admin.jsx

import React, { Component } from "react";

export default class Admin extends Component{
    render() {
        return (
            <div>admin</div>
        )
    }
}

新建/pages/login/login.jsx

import React, { Component } from "react";

export default class Login extends Component {
    render() {
        return (
            <div>login</div>
        )
    }
}

修改App.js

import React, { Component } from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";

import Login from './pages/login/login'
import Admin from './pages/admin/admin'
/*
* 应用的根组件
*/
export default class App extends Component {
    render() {
        return (
            <BrowserRouter>
                <Routes>
                    <Route path='/login' element={<Login />}></Route>
                    <Route path='/' element={<Admin />}></Route>
                </Routes>
            </BrowserRouter>
        )
    }
}

八、清除默认样式

/src/assets/css/reset.css

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

然后在app.js里引入

import './assets/css/reset.css'