公司网站实名制,成都房产信息网官网查询系统,网络设计专业工资,排名优化课程相信很多React初学者第一次搭建自己的项目#xff0c;搭建时会无从下手#xff0c;本篇适合快速实现功能#xff0c;熟悉React项目搭建流程。 目录
一、创建项目react-item
二、调整项目目录结构
三、使用scss预处理器
四、组件库Ant Design
五、配置基础路由
六、配置… 相信很多React初学者第一次搭建自己的项目搭建时会无从下手本篇适合快速实现功能熟悉React项目搭建流程。 目录
一、创建项目react-item
二、调整项目目录结构
三、使用scss预处理器
四、组件库Ant Design
五、配置基础路由
六、配置别名路径 一、创建项目react-item npm create vite react-item 二、调整项目目录结构
-src-apis 项目接口函数-assets 项目资源文件比如图片等-components 通用组件-pages 页面组件-store 集中状态管理-utils 工具比如token、axios 的封装等-App.js 根组件-index.css 全局样式-index.js 项目入口
三、使用scss预处理器
SASS是一种预编译的 CSS支持一些比较高级的语法可以提高编写样式的效率CRA接入scss非常简单只需要我们装一个sass工具
1. 安装解析 sass 的包
npm i sass -D
2. 创建全局样式文件index.scss
四、组件库Ant Design
Ant Design简称 Antd是一个企业级的 UI 设计语言和 React 组件库由 Ant Financial蚂蚁金服团队开发和维护。它旨在为开发者提供一套设计精美、功能完善的前端组件
官方网站
Ant Design of React - Ant Design
1. 安装 antd 组件库
npm i antd
2. 在App.jsx中导入 Button 组件测试
import { Button } from antd
import ./App.cssfunction App() {return (Button typeprimary按钮/Button/)
}export default App成功 五、配置基础路由
1. 安装路由包
npm i react-router-dom
2. 准备 Home和 About俩个基础组件
一级路由
// src/pages/Home.jsx
import { Outlet, Link } from react-router-dom;const Home () {return (divnavulliLink to/home/section1侧边栏1/Link/liliLink to/home/section2侧边栏2/Link/li/ul/nav{/* 渲染嵌套路由的内容 */}Outlet //div);
}export default Home;// src/pages/About.jsx
const About () {return (divh2关于/h2/div);
}export default About;二级路由 Section1和Section2
// src/pages/Section1.jsx
const Section1 () {return (divh3Section 1 Content/h3pThis is the content of Section 1./p/div);
}export default Section1;
// src/pages/Section2.jsx
const Section2 () {return (divh3Section 2 Content/h3pThis is the content of Section 2./p/div);
}export default Section2;3. 配置路由
App.jsx
// src/App.jsx
import { BrowserRouter as Router, Route, Routes, Link } from react-router-dom;
import Home from ./pages/Home;
import About from ./pages/About;
import Section1 from ./pages/Section1;
import Section2 from ./pages/Section2;const App () {return (Routerdiv{/* 主导航栏 */}navul classNametabliLink to/home首页/Link/liliLink to/about关于/Link/li/ul/nav{/* 路由配置 */}RoutesRoute pathhome element{Home /}{/* 二级路由配置 */}Route pathsection1 element{Section1 /} /Route pathsection2 element{Section2 /} //RouteRoute pathabout element{About /} //Routes/div/Router);
}export default App;BrowserRouter用于包裹整个应用程序开启前端路由的功能。在这里使用了别名 Router目的是让路由能够通过 URL 来导航页面而不刷新整个页面。Route定义路由规则指定 URL 路径和对应的组件。Routes包裹所有的 Route用于配置和管理路由规则。Link用于创建应用程序内的导航链接通过点击链接来进行页面导航。Router 是 React Router 的核心组件负责包裹整个应用程序管理页面的路由逻辑。Outlet /用来渲染嵌套路由的内容。在 Home 组件中当访问 /home/section1 或 /home/section2 时这部分内容会被渲染到 Outlet / 所在的位置。
六、配置别名路径
1. 安装craco工具包
Create React App 是一个非常流行的工具用于快速构建 React 应用。它提供了一些开箱即用的配置如 Webpack、Babel、ESLint、Prettier 等。然而这些配置默认是隐藏的用户无法直接修改它们。如果你需要自定义 Webpack 或其他工具的配置就需要执行 eject 操作。
问题eject 的缺点
执行 eject 后所有的配置文件都会暴露出来并且变得可以修改但这也意味着你需要管理和维护这些文件增加了复杂度。一旦 eject就无法恢复也无法享受 Create React App 后续版本的自动更新和修复。
解决方案CRACO
CRACO 提供了一种无需执行 eject 即可自定义配置的方法它通过修改 CRA 的默认配置来满足你的需求同时保持 CRA 的内部配置自动管理。
npm i craco/craco -D
2. 根目录增加 craco.config.js 配置文件
const path require(path)module.exports {// webpack 配置webpack: {// 配置别名alias: {// 约定使用 表示 src 文件所在路径: path.resolve(__dirname, src)}}
}
3. 修改 scripts 命令
这个配置保留了 craco 作为主要的开发工具来启动、构建和测试项目并且通过 eject 保留了传统的暴露配置的方式允许开发者在需要时完全控制项目的配置。
在package.json中
scripts: {start: craco start,build: craco build,test: craco test,eject: react-scripts eject
}
4. 测试是否生效
import Login from /pages/Login
import Layout from /pages/Layout
