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}], // 配置less
  webpack: {
    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跟组件下创建一级路由的出口

javascript 复制代码
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接受数据的类型校验;

XML 复制代码
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)

第三步 组件的完整写法:

XML 复制代码
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)
相关推荐
群联云防护小杜2 分钟前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
汉得数字平台20 分钟前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控
花海如潮淹27 分钟前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux
_丿丨丨_5 小时前
XSS(跨站脚本攻击)
前端·网络·xss
天天进步20155 小时前
前端安全指南:防御XSS与CSRF攻击
前端·安全·xss
拾光拾趣录8 小时前
括号生成算法
前端·算法
拾光拾趣录9 小时前
requestIdleCallback:让你的网页如丝般顺滑
前端·性能优化
前端 贾公子9 小时前
vue-cli 模式下安装 uni-ui
前端·javascript·windows
拾光拾趣录9 小时前
链表合并:双指针与递归
前端·javascript·算法
@大迁世界9 小时前
前端:优秀架构的坟墓
前端·架构