【React】极客园--01.项目前置准备

项目搭建

基于CRA创建项目

CRA是一个底层基于webpack快速创建React项目的脚手架工具

# 使用npx创建项目
npx create-react-app react-jike# 进入到项
cd react-jike# 启动项目
npm start

在这里插入图片描述

调整项目目录结构

-src-apis           项目接口函数-assets         项目资源文件,比如,图片等-components     通用组件-pages          页面组件-store          集中状态管理-utils          工具,比如,token、axios 的封装等-App.js         根组件-index.css      全局样式-index.js       项目入口

src/index.js

import React from 'react'
import ReactDOM from 'react-dom/client'
import './index.scss'
import './App.js'ReactDOM.createRoot(document.getElementById('root')).render(<React.StrictMode><App/></React.StrictMode>
)

src/App.js

const App = () => {return <div>this is app</div>
}export default App

使用scss预处理器

SASS 是一种预编译的 CSS,支持一些比较高级的语法,可以提高编写样式的效率,CRA接入scss非常简单只需要我们装一个sass工具

实现步骤

  1. 安装解析 sass 的包:npm i sass -D
  2. 创建全局样式文件:index.scss
body {margin: 0;div {color: blue;}
}

组件库antd使用

我们的项目是一个传统的PC管理后台,有现成的组件库可以使用,帮助我们提升开发效率,其中使用最广的就是antD

Ant Design of React - Ant Design
实现步骤

  1. 安装 antd 组件库:npm i antd
  2. 导入 Button 组件
  3. 在 Login 页面渲染 Button 组件进行测试

测试Button
pages/Login/index.jsx

import { Button } from 'antd'const Login = () => {return <div>this is login<Button type='primary'>test</Button></div>
}
export default Login

在这里插入图片描述

配置基础路由

单页应用需要对应的路由支持,我们使用 react-router-dom 最新版本

实现步骤

  1. 安装路由包 npm i react-router-dom
  2. 准备 LayoutLogin俩个基础组件
  3. 配置路由

代码实现
pages/Layout/index.js

const Layout = () => {return <div>this is layout</div>
}
export default Layout

pages/Login/index.js

const Login = () => {return <div>this is login</div>
}
export default Login

router/index.js

import { createBrowserRouter } from 'react-router-dom'import Login from '../pages/Login'
import Layout from '../pages/Layout'const router = createBrowserRouter([{path: '/',element: <Layout />,},{path: '/login',element: <Login />,},
])export default router

index.js

import React from 'react'
import ReactDOM from 'react-dom/client'
import './index.scss'
import router from './router'
import { RouterProvider } from 'react-router-dom'ReactDOM.createRoot(document.getElementById('root')).render(<RouterProvider router={router} />
)

配置别名路径

项目背景:在业务开发过程中文件夹的嵌套层级可能会比较深,通过传统的路径选择会比较麻烦也容易出错,设置路径别名可以简化这个过程

路径编译配置

  1. 安装 craco 工具包
  2. 增加 craco.config.js 配置文件
  3. 修改 scripts 命令
  4. 测试是否生效
npm i @craco/craco -D
const path = require('path')module.exports = {// webpack 配置webpack: {// 配置别名alias: {// 约定:使用 @ 表示 src 文件所在路径'@': path.resolve(__dirname, 'src')}}
}
"scripts": {"start": "craco start","build": "craco build","test": "craco test","eject": "react-scripts eject"
}
import { createBrowserRouter } from 'react-router-dom'import Login from '@/pages/Login'
import Layout from '@/pages/Layout'const router = createBrowserRouter([{path: '/',element: <Layout />,},{path: '/login',element: <Login />,},
])export default router

VsCode提示配置

实现步骤

  1. 在项目根目录创建 jsconfig.json 配置文件
  2. 在配置文件中添加以下配置

代码实现

{"compilerOptions": {"baseUrl": "./","paths": {"@/*": ["src/*"]}}
}

:::warning
说明:VSCode会自动读取jsconfig.json 中的配置,让vscode知道@就是src目录
:::

使用gitee管理项目

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/29660.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

CSS【实战】抽屉动画

效果预览 技术要点 实现思路 元素固定布局&#xff08;fixed&#xff09;在窗口最右侧外部js 定时器改变元素的 right 属性&#xff0c;控制元素移入&#xff0c;移出 过渡动画 transition transition: 过渡的属性 过渡的持续时间 过渡时间函数 延迟时间此处改变的是 right …

笔记-前端

URL 输入到渲染的过程 域名解析&#xff0c;找到服务地址 构建 TCP 连接&#xff0c;若有 https&#xff0c;则多一层 TLS 握手&#xff0c; 特殊响应码处理 301 302 解析文档 构建 dom 树和 csscom 生成渲染树&#xff1a;从DOM树的根节点开始遍历每个可见节点&#xff0c;对于…

shell脚本之函数

一、1.函数&#xff1a;将命令序列按照固定的表达格式写在一起 2.函数作用&#xff1a;可以重复使用的命令序列&#xff0c;大的工程分割成若干个小块&#xff0c;依次执行&#xff0c;提高代码的可读性。 3.函数的两种格式 4.return作用&#xff1a;只能写在函数内部&#xff…

12306全球最大票务系统与Gemfire介绍

全球最大票务系统 自2019年12月12日发售春运首日车票&#xff0c;截至2020年1月9日&#xff0c;12306全渠道共发售车票4.12亿张&#xff0c;日均售票能力达到了2000万张&#xff0c;平均一年售出30亿张火车票&#xff0c;也就是说12306已经发展成全球交易量最大的实时票务系统…

26 红黑树

目录 1.概念 2.性质 3.节点定义 4.结构 5.插入 6.验证 7.删除 8.红黑树和avl树比较 9.应用 概念 是一种二叉搜索树&#xff0c;但在每个节点上增加一个存储位表示节点的颜色&#xff0c;可以是red或black。通过对任何一条从根到叶子的路径上各个节点着色方式的限制&#xff…

reverse-android-实战喜马拉雅-ollvm

资料 1. apk: com.ximalaya.ting.android.apk. 2020年8月 可以使用 2. 抓包分析 java层分析 so层分析 登录的算法so是在 liblogin_encrypt.so中。 32位的&#xff0c; 用 IDA打开&#xff0c;查看 静态的导出函数。 打开 一个 首先看到 IDA VIEW 是一个横向 比较多的分支&am…

2-9 基于matlab的传递矩阵计算轴的模态

基于matlab的传递矩阵计算轴的模态&#xff0c;包括模态频率和模态振型&#xff0c;可设置轴的结构参数。程序已调通&#xff0c;可直接运行。 2-9 传递矩阵计算轴的模态 模态频率 - 小红书 (xiaohongshu.com)

python-jupyter notebook安装教程

&#x1f308;所属专栏&#xff1a;【python】✨作者主页&#xff1a; Mr.Zwq✔️个人简介&#xff1a;一个正在努力学技术的Python领域创作者&#xff0c;擅长爬虫&#xff0c;逆向&#xff0c;全栈方向&#xff0c;专注基础和实战分享&#xff0c;欢迎咨询&#xff01; 您的…

Jmeter 逻辑控制之IF条件控制器

&#x1f345; 视频学习&#xff1a;文末有免费的配套视频可观看 &#x1f345; 点击文末小卡片 &#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 测试环境 JMeter-5.4.1 循环控制器介绍 添加While Controller 右键线程组->添加->逻辑…

批量生产千万级数据 推送到kafka代码

1、批量规则生成代码 1、随机IP生成代码 2、指定时间范围内随机日期生成代码 3、随机中文名生成代码。 package com.wfg.flink.connector.utils;import java.time.LocalDate; import java.time.LocalDateTime; import java.time.LocalTime; import java.util.ArrayList; impo…

个人关于Vue2组成的见解

前言 Vue.js 是一个用于构建用户界面的渐进式框架&#xff0c;它从核心逐渐扩展&#xff0c;提供了一套丰富的功能来构建复杂的单页应用。Vue 2 是该框架的第二个主要版本&#xff0c;引入了许多改进和新特性。 组成部分及解析 模板&#xff08;Template&#xff09; 模板是…

简易计算器需求报告

1. &#xff08;简易计算器&#xff09; 需求说明书 文件编号&#xff1a;2022[1] [木柚2] 06[3] [木柚4] 01[5] [木柚6] 完成日期&#xff1a;2024年 06月18日 编制&#xff1a; 易正阳 日期&#xff1a;2024年6月18日 审核&#xff1a;张正 日期&#xff1a;2024年6月18…

Vue微前端架构与Qiankun实践理论指南

title: Vue微前端架构与Qiankun实践理论指南 date: 2024/6/15 updated: 2024/6/15 author: cmdragon excerpt: 这篇文章介绍了微前端架构概念&#xff0c;聚焦于如何在Vue.js项目中应用Qiankun框架实现模块化和组件化&#xff0c;以达到高效开发和维护的目的。讨论了Qiankun…

有哪些技术可代替docker?

Docker是用于创建和管理容器化应用程序的流行平台&#xff0c;但市场上也存在多种Docker的替代方案。 前言 国内使用Docker的困难现象&#xff0c;无疑是一个值得深入剖析和批判的问题。Docker作为一种容器化技术&#xff0c;以其轻量级、可移植性和高效性在全球范围内得到了广…

软件测试面试题:性能测试关注哪些指标?

问题 在工作中&#xff0c;使用JMeter做压力测试时&#xff0c;需要关注其中的哪些指标&#xff1f; 性能测试关注哪些指标&#xff1f; 考察点 面试官想了解&#xff1a; 是否用过 JMeter 指标进行分析 技术点 涉及的技术点&#xff1a; JMeter 结果分析 回答 性能指…

gitblit git pycharm 新建版本库及push备忘

在终端l中输入ssh,如果有消息弹出说明安装成功。 // 在任意路径打开GIT BASH,执行以下命令,期间所有询问可以直接Enter跳过 ssh-keygen -t rsa -C "注册Gitlab的邮箱" “”之内可以任何文字,备注提示作用。 设置用户名和邮箱 已经设置的可以检查一下。 #设置用…

SpringBoot配置第三方专业缓存框架j2cache

j2cache的使用 这不是一个缓存 这是一个缓存框架 J2Cache, 也称为Java Cache或JSR-107&#xff0c;是一个用于缓存管理的标准API&#xff0c;它允许开发者在Java应用程序中实现分布式、基于内存的缓存。J2Cache主要通过javax.cache.Cache接口提供功能&#xff0c;用于存储和…

RoaringBitMap处理海量数据内存diff

一、背景 假设mysql库中有一张近千万的客户信息表(未分表)&#xff0c;其中有客户性别&#xff0c;等级(10个等级)&#xff0c;参与某某活动等字段 1、如果要通过等级性别其他条件(离散度也低)筛选出客户&#xff0c;如何处理查询&#xff1f; 2、参与活动是记录活动ID&#…

了解Nest.js

一直做前端开发&#xff0c;都会有成为全栈工程师的想法&#xff0c;而 Nest 就是一个很好的途径&#xff0c;它是 Node 最流行的企业级开发框架&#xff0c;提供了 IOC、AOP、微服务等架构特性。接下来就让我们一起来学习Nest.js Nest.js官网地址 一&#xff0c;了解Nest Cli …

充电学习—6、电量计FuelGauge

电量计功能&#xff1a; 检测电池 计量电量 电量计首要工作&#xff1a; 计算电池的剩余容量、充满时容量、电量百分比 电量百分比 剩余容量 / 充满时容量 * 100% SOC RM / FCC * 100% 典型的一个电池包框架&#xff1a; 包含电芯、电量计IC、保护IC、充放电MOSFET、保险丝…