React记账

maple1314
114 阅读2分钟

项目准备

  1. 使用淘宝镜像下载依赖
// yarn 方式
yarn config set registry https://registry.npm.taobao.org/

// npm方式
npm config set registry https://registry.npm.taobao.org/
  1. 在react项目中使用typescript
//全局安装脚手架
yarn global add create-react-app

//让项目使用typescript
create-react-app 项目名 --template typescript

tips:

// 由于使用的是typescript,需要安装定义文件
npm install -D @types/react-dom
// 使用的是react18

import './index.css';
import App from './App';
import { createRoot } from 'react-dom/client';
const root = createRoot(document.getElementById('root') as HTMLElement);
root.render(<App />);
  1. 运行项目
cd 项目根目录
npm start

5.项目的其它配置

设置浏览器不自动打开

  • 项目根目录下创建.env文件
  • 在文件中输入BROWSER=none

使用dart-sass

  1. node-sass 下载很慢
  2. 本地编译很慢

如何使用dart-sass?

本地安装dart-sass:

npm install node-sass@npm:dart-sass`

react 使用绝对路径

针对css,如项目src下有个css文件夹，文件夹中包含一个index.scss,引用路径可以写成@import "css/index.scss"; ,vue中使用的是@

tips注意如果是js,需要配置,链接如下：create-react-app.dev/docs/import…

style-components的使用

注意结尾记得加上分号！！！！！

安装yarn add styled-components、安装好后，在引入时，出现定义文件不存在，需要安装定义文件yarn add --save-dev @types/styled-components 使用,具体用法见官网：github.com/styled-comp…

import styled from 'styled-components';
const Button = styled.button`
  color: grey;
  padding:5px 10px;
`;

使用安全字体

font-family: -apple-system, "Noto Sans", "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Source Han Sans SC", "Source Han Sans CN", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;

svg-sprite-loader的使用

下载好svg图片，在使用svg的组件中导入，文件声明出错,在src目录下svg.d.ts，文件中输入：

declare module "*.svg" {
  const src: string;
  export default src;
}

安装并显示React配置

yarn add svg-sprite-loader -D
//让react配置显示
yarn eject

配置webpack.config.js

// module==>oneOF
{
  test: /.svg$/,
  use: [
    { loader: 'svg-sprite-loader', options: {} },
    'svgo-loader'
  ]
}

tips:注意重启哦！！！！

//tree sharking不会被引入进来，不使用这种方式
import x from "../icons/chart.svg"
console.log(x)   //有个id

//通过require的方式引入，tree-sharking不适用于require
require("../icons/chart.svg")

使用

<svg>
    <!--与x.id相同，文件名对应-->
    <use xlinkHref="#chart" />
</svg>

<!--设置颜色-->
<svg  fill="red"></svg>

对组件进行封装

<svg>
    <!--与x.id相同，文件名对应-->
    <use xlinkHref="#chart" />
</svg>

需求：上面组件中重复使用,我想声明一个组件只需传递name，通过props接收这个id

icon组件

type Props = {
  name: string;  //声明类型
};
require("../icons/chart.svg");
require("../icons/money.svg");
require("../icons/tags.svg");
export default function Icon(props: Props) {
  console.log(props);
  return (
    <svg className="icon">
      <use xlinkHref={props.name} />
    </svg>
  );
}

使用

<Icon name="#tags" />

优化require,我希望对icon组件下进行读写

const importAll = (requireContext: __WebpackModuleApi.RequireContext) =>
  requireContext.keys().forEach(requireContext);
try {
  importAll(require.context("../assets/icons", true, /\.svg$/));
} catch (error) {
  console.log(error);
}

但是编辑器提示有错误 只需安装

yarn add --dev @types/webpack-env

webpack修改svg的fill属性

options: {
    plugins: [
           {
               name: "removeAttrs",
               params: {
                    attrs: "fill"
               }
          }
   ]
}

        ## React中的`onChange`与HTML中的change差异
        html中的change是在鼠标离开input框中触发事件
        react中的onChange是value发生变化时触发事件
avatar
文章
阅读
粉丝