react 项目结构配置

@1 项目整体目录结构的搭建 如下图:


@2 重置css样式: normalize.css   reset.less ;
        第一步 安装 npm i normalize.css   入口文件index.tsx导入:import ‘noremalize.css’
        第二步 创建自己的css样式:在assets文件夹中创建css文件夹,文件中创建
        index.less,
// 导入公共样式和重置样式
@import url('./common.less');
@import url('./reset.less');

   common.less  

a{color: red;}

  reset.less

a {text-decoration: none;
}

 在index.tsx 入口文件中导入 src/assets/css/index.lees文件

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from '@/App'
import '@/assets/css/index.less' //导入自己的样式
const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
root.render(<React.StrictMode><App /></React.StrictMode>
)

     第三步: 安装less插件  npm install craco-less@2.1.0-alpha.0;
     在craco.config.js文件中进行配置:

const path = require('path')
const cracolessplugin = require('craco-less') // 导入less
const resolve = (dir) => path.resolve(__dirname, dir)
module.exports = {plugins:[{plugin:cracolessplugin}], // 配置lesswebpack: {alias: {'@': resolve('src')}}
}
@3 配置路由:
   第一步 安装依赖 npm install react-router-dom;
   第二步 router文件下创建index.tsx文件,基本路由的配置
import React from 'react'
import {RouteObject} from 'react-router-dom'  // 用来规范routes的类型
import Discover from '@/views/discover' // 引入组件
const routes:RouteObject[] = [  // 规范RouteObject[]的类型{path:'/discover',element:<Discover/>}
]
export default routes

   第三步 在项目index.tsx入口文件中 导入 import {HashRouter} from 'react-ruter-dom' 
   包裹<App></App>根组件

import React from 'react'
import ReactDOM from 'react-dom/client'
import {HashRouter} from 'react-router-dom'
import App from '@/App'
const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
root.render(// hash模式的路由 用来包裹app组件<HashRouter><App></App></HashRouter>
)

第四步: 在App.tsx跟组件下创建一级路由的出口

import React from 'react'
import {useRoutes} from 'react-router-dom' // 创建一级路由出口
import routes from './router' // 导入的路由规则
function App() {const obj = {name: 'zs',age: 12}return <div><a href="javascript:;">我是啊</a><br /><div>{/* 路由的出口 */}{useRoutes(routes)}</div></div>
}export default App
   @4 组件的规范写法:
        第一步: ts约束组件通过props接受数据的类型校验;
import React from "react";
/*第一种  解决props 接受参数类型检验的问题,定义好接受的参数
interface IProps {name:string,age:number,height:string,
}
const Download = (props:IProps)=>{return (<div>download组件</div>)
}
*//* 第二种 props配置校验的思路
interface IProps {name:string,age:number,height:string,
}
const Download:React.FunctionComponent<IProps> = ()=>{return (<div>download组件</div>)
}
*//* 第三种 props配置校验的思路 带children的属性
interface IProps {children?:any,name:string,age:number,height:string,
}
const Download:React.FC<IProps> = ()=>{return (<div>download组件</div>)
}
*/// 解决children属性 可能是标签  可能是存文本标签的问题
import type {ReactNode} from 'react'
interface IProps {children?:ReactNode,name:string,age:number,height:string,
}
const Download:React.FC<IProps> = (props)=>{return (<><div>download组件</div><span>{props.name}</span><span>{props.age}</span></>)
}
export default  Download

  第二步 使用memo 用来包裹导出的组件,当组件数据不变,组件不会被更新,提高性能。
    import  {memo}  from 'react';
    export default memo(Download)

  第三步 组件的完整写法:

import React ,{memo} from 'react'
import type {FC,ReactNode} from 'react'// 定义接口类型
interface IProps {children?:ReactNode,name:string,age:number,height:string,
}
const Component:React.FC<IProps> = (props)=>{return <div>用户名:<span>{props.name}<span>年龄:<span>{props.age}</span>        </div>}// 也可以写成
const Component:FC<IProps> = (props)=>{}export default memo(Component)

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

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

相关文章

常用冷凝器的传热系数与单位换热面积推荐数据

制冷剂 氨 立式壳管式 700~800 传热系数W/m2℃ 3000~4000 单位面积热负荷W/m2 &#xff08;1&#xff09;温升2~3℃ &#xff08;2&#xff09;传热温差4~6℃ &#xff08;3&#xff09;单位面积冷水耗量1~1.7m3/m2h &#xff08;4&#xff09;光钢管 &#xff08;5&#xf…

【设计模式-03】Strategy策略模式及应用场景

一、简要描述 Java 官方文档 Overview (Java SE 18 & JDK 18)module indexhttps://docs.oracle.com/en/java/javase/18/docs/api/index.html Java中使用到的策略模式 Comparator、comparable Comparator (Java SE 18 & JDK 18)declaration: module: java.base, pa…

JAVA进化史: JDK14特性及说明

JDK 14于2020年3月发布。这个版本引入了一些新特性和改进&#xff0c;以下是其中一些主要特性 JEP 361: 进一步改进了switch表达式 进一步改进了switch表达式&#xff0c;引入了新的用法和语法。 // 使用标准的switch表达式 int day 3; String dayType switch (day) {case…

js(JavaScript)数据结构之散列表(Hash)

什么是数据结构&#xff1f; 下面是维基百科的解释&#xff1a; 数据结构是计算机存储、组织数据的方式。数据结构意味着接口或封装&#xff1a;一个数据结构可被视为两个函数之间的接口&#xff0c;或者是由数据类型联合组成的存储内容的访问方法封装。 我们每天的编码中都会…

web学习笔记(十五)

目录 1.Date对象 1.1日期对象的概念 1.2Date()方法的使用 1.3Date()常用方法汇总 1.4例题&#xff1a;用函数编写一个倒计时 2.函数 2.1函数的概念 2.2函数的使用 2.3函数的参数 2.4函数的声明 2.5函数的返回值 2.6异步函数 3特殊函数类型 3.1匿名函数 3.2箭头函数…

前端开发中需要注意的CSS命名规则以及书写顺序

1、CSS的命名——BEM规则&#xff1a; CSS命名一般是用 BEM 规则命名的。它背后的想法是将用户界面划分为独立的块。 BEM的意思就是B模块(block)、E元素(element)、M修饰符(modifier)&#xff0c; 即&#xff1a;[block]__[element]--[modifier]。 模块和子元素之间用两个下划…

SPARK--cache(缓存)和checkpoint检查点机制

SPARK–cache(缓存)和checkpoint检查点机制 rdd的特性 缓存和checkpoint 作用都是进行容错rdd在计算是会有多个依赖&#xff0c;为了避免计算错误是从头开始计算&#xff0c;可以将中间* 依赖rdd进行缓存或checkpoint缓存或checkpoint也叫作rdd的持久化一般对某个计算特别复杂的…

[Flutter] extends、implements、mixin和 abstract、extension的使用介绍说明

类创建&#xff1a;abstract&#xff08;抽象类&#xff09;、extension&#xff08;扩展&#xff09; 1.abstract&#xff08;抽象类&#xff09; dart 抽象类主要用于定义标准&#xff0c;子类可以继承抽象类&#xff0c;也可以实现抽象类接口。抽象类通过abstract 关键字来…

一端进,两端出(队列)C++

*给定一个输入受限的双端队列&#xff08;即一个端点允许插入和删除&#xff0c;另一个端点只允许删除的双端队列&#xff09;和一个长度为 N 的插入序列。插入序列中的元素两两不同。你需要将插入序列中的元素按顺序依次插入到给定队列中。 在插入过程中和插入完成后的任意时…

【软件测试】学习笔记-静态测试方法

这篇文章详细讨论人工静态测试方法和自动静态测试方法&#xff0c;来帮你理解研发流程上是如何保证代码质量的&#xff0c;以及如何搭建自己的自动静态代码扫描方案&#xff0c;并且应用到项目的日常开发工作中去。 人工静态方法本质上属于流程上的实践&#xff0c;实际能够发…

QEMU源码全解析 —— PCI设备模拟(7)

接前一篇文章&#xff1a; 上一回讲解了pci_edu_realize函数中的pci_register_bar函数&#xff0c;本回开始对于edu设备的MMIO读写函数进行解析。 操作系统与PCI设备交互的主要方式是PIO和MMIO。MMIO虽然是一段内存&#xff0c;但是其没有EPT映射&#xff0c;在虚拟机访问设备…

Smallpdf扫描、转换、压缩、编辑、签名PDF

【应用名称】&#xff1a;Smallpdf: 扫描、转换、压缩、编辑、签名PDF 【适用平台】&#xff1a;#Android 【软件标签】&#xff1a;#Smallpdf 【应用版本】&#xff1a;1.71.0 【应用大小】&#xff1a;150MB 【软件说明】&#xff1a;通过 Smallpdf&#xff0c;您可以&…

数据结构 模拟实现二叉树(孩子表示法)

目录 一、二叉树的简单概念 &#xff08;1&#xff09;关于树的一些概念 &#xff08;2&#xff09;二叉树的一些概念及性质 定义二叉树的代码&#xff1a; 二、二叉树的方法实现 &#xff08;1&#xff09;createTree &#xff08;2&#xff09;preOrder &#xff08;…

资源三号03星-立体测绘卫星星座

资源三号03星作为我国民用高分辨率立体测图卫星资源三号系列的第三颗卫星&#xff0c;在资源三号02星技术状态的基础上进行了继承和适当优化&#xff0c;设计寿命由资源三号02星的5年延长至8年&#xff0c;星上搭载了三线阵立体测绘相机、多光谱相机和业务化应用的激光测高仪&a…

【模型评估 07】过拟合与欠拟合

在模型评估与调整的过程中&#xff0c;我们往往会遇到“过拟合”或“欠拟合”的情况。如何有效地识别“过拟合”和“欠拟合”现象&#xff0c;并有针对性地进行模型调整&#xff0c;是不断改进机器学习模型的关键。特别是在实际项目中&#xff0c;采用多种方法、从多个角度降低…

C#使用CryptoStream类加密和解密字符串

目录 一、CrytoStream的加密方法 二、CrytoStream的解密方法 三、实例 1.源码Form1.cs 2.类库Encrypt.cs 3.生成效果 在使用CryptoStream前要先引用命名空间using System.Security.Cryptography。 一、CrytoStream的加密方法 记住&#xff0c;不能再使用DESCryptoServi…

DrGraph原理示教 - OpenCV 4 功能 - 边界填充

今天简单来看一下OpenCV中的边界填充 param src Source image. param dst Destination image of the same type as src and the size Size(src.colsleftright, src.rowstopbottom) . param top the top pixels param bottom the bottom pixels param left the left pixels par…

Photoshop 2024 (PS2024) v25 直装版 支持win/mac版

Photoshop 2024 提供了多种创意工具&#xff0c;如画笔、铅笔、涂鸦和渐变等&#xff0c;用户可以通过这些工具来创建独特和令人印象深刻的设计效果。增强的云同步&#xff1a;通过 Adobe Creative Cloud&#xff0c;用户可以方便地将他们的工作从一个设备无缝同步到另一个设备…

docker关闭所有容器的命令

关闭所有容器的命令是docker stop $(docker ps -aq)&#xff0c;其中&#xff1a; 使用docker ps -a命令列出所有的容器&#xff1b; 实现方法1&#xff1a;使用docker ps -a命令获取所有容器的ID&#xff0c;然后使用docker stop命令逐个停止容器。 实现方法2&#xff1a;使用…

STM32L051使用HAL库操作实例(14)- ADC采集电压

目录 一、前言 二、ADC外设简要说明 三、STM32CubeMX配置&#xff08;本文使用的STM32CubeMX版本为6.1.2&#xff09; 1.MCU选型 2.时钟使能 3.外部时钟配置 4.串口配置 5.ADC引脚配置 6.配置STM32CubeMX生成工程文件 7.点击GENERATE CODE生成工程文件 四、工程源码 …