react项目初始化 – 前端知识圈

优化import
使用styled-components
统一css
React-router
使用SVG图片

1.优化import

在tscinfig.json中添加,可以吧src当做根目录路直接import “app.tsx”

    "compilerOptions": {
        +  "baseUrl": "src",
    }

2. 使用styled-components

使用styled-components进行css

安装

    yarn add styled-components
    yarn add --dev @types/styled-components

使用

    import styled from 'styled-components'
    const Button = styled.button`
      color:red
    `
    const App = ()=>{
        return (
            <Button></Button>
        )
    }

3. 统一css

在scss或者css文件中添加

    @ihelpermport-normalize;

4. React-router

参考文档

设置404页面

    <Switch>
        <Route path="*">
            404,页面不存在
        </Route>
    </Switch>

设置默认显示页

    <Switch>
        <Redirect exact from="/" to="/money">
    </Switch>

5. 跨平台CSS中文字体解决方案

中文字体 css github

6. 使用SVG图片

如果在项目中使用SVG图片,需要借助svg-sprite-loader进行编译配置方法如下

显示react的配置文件

    yarn eject

安装svg-sprite-loader

    yarn add --dev svg-sprite-loader
    yarn add --dev svgo-loader

配置config/webpack.config.js

    oneOf:[
        {
          test: /\.svg$/,
          use: [
            { loader: 'svg-sprite-loader', options: {} },
            {loader:'svgo-loader',options:{}}
          ]
        }
    ]

svgo-loader:SVG优化 svg-transform-loader: 对SVG图片进行优化(不需要)

4.配置完成后需要重新运行项目

    yarn start

引入SVG图片

    require("../icons/test.svg")
    <svg fill="red" className="className">
        <use xlinkHref="#test(文件名)"/>
    <svg>

==如果使用import xx from “”引入会触发TreeShaking机制,react会自动删除==

发送评论编辑评论