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 | 20110126License: 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'

React从零开始搭建项目相关推荐

umi脚手架搭建的项目_还在从零开始搭建项目？手撸了款快速开发脚手架！
之前开源了一款项目骨架mall-tiny,完整继承了mall项目的整个技术栈.总感觉mall-tiny集成了太多中间件,过于复杂了.这次对其进行了简化和升级,使它成为了一款拥有完整权限管理功能的快速开 ...
React脚手架搭建项目
React提供了一个用于创建react项目的脚手架库:create-react-app 一.项目的搭建第一步: 全局安装 npm i -g create-react-app 第二步: 切换到准备创建 ...
在react里写原生js_从零开始使用react+antd搭建项目
之前的文章都是自己的学习日志,主要是防止自己遗忘之前遇到的坑.这次将从最基础的项目搭建开始讲起,做一个基于react和antd的后台管理系统.我会一步步进行下去,所以看完本文你哪怕不了解react,应 ...
如何使用React+Elementui搭建项目
基础准备工作由于React很多命令都是基于node.js才能运行,所以第一步要安装node. 1.安装Node.js 因为node.js更新很快,一般都推荐使用nvm来安装管理各个node.js版本 ...
采用React框架搭建项目
使用vue框架也做了很多项目,基本的需求业务逻辑都没可满足,可是依然对框架内部工作原理不是很熟悉,只是套用一些指令方法去应用,做开发越接近本质收入越大. 原生的一些写法可能已经很过时了,但是仍然要熟悉 ...
react 从零开始搭建开发环境
1.创建 package.json 项目 npm init 2.安装 webpack, 并且设置为项目依赖: npm install webpack --save-dev 当然你必须之前已经在 -g ...
还在从零开始搭建项目？手撸了款快速开发脚手架！
简介 mall-tiny是一款基于SpringBoot+MyBatis-Plus的快速开发脚手架,拥有完整的权限管理功能,可对接Vue前端,开箱即用. 项目演示 mall-tiny项目可无缝对接m ...
Dva + React + Mock 搭建项目（主要讲解DvaJs）
一.初始化dva 1.安装 dva-cli $ npm install dva-cli -g $ dva -v dva-cli version 0.9.1 2.创建新应用安装完 dva-cli 之后 ...
react脚手架搭建项目目录介绍
readme.md --项目介绍自定义一些项目信息以及简单使用 package.json --dependencies下管理生产环境所用的包及版本 ---devDependencies里得插件只用于 ...

React从零开始搭建项目

一、脚手架创建React项目

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

三、创建`App.js`

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

五、创建如下文件夹

六、引入antd样式

下载组件库

实现组件库的按需打包

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

修改package.json

自定义antd主题

七、引入路由

八、清除默认样式

React从零开始搭建项目相关推荐

最新文章

热门文章

React从零开始搭建项目

一、脚手架创建React项目

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

三、创建App.js

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

五、创建如下文件夹

六、引入antd样式

下载组件库

实现组件库的按需打包

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

修改package.json

自定义antd主题

七、引入路由

八、清除默认样式

React从零开始搭建项目相关推荐

最新文章

热门文章

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

三、创建`App.js`

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

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