directory

  • Use create-React app
  • CSS reset
  • Configuration SCSS
  • Configuration styled – component
  • Add bottom navigation with React Router
  • The introduction of SVG lcon

Create a project

Globally install the target version of create-react-app

Yarn global add [email protected]Copy the code

Create the project Morney and write it in typescript

create-react-app morney --template typescript
Copy the code

The next operation is

CD morney // Run yarn start (the browser will open automatically)Copy the code

If you don’t like auto open

// If you don't like automatic, run echo 'BROWSER= None '>. Env // Then run yarn startCopy the code

There may be a change here that is ignored when the code is submitted

git rm -rf --cached .idea
git rm -rf --cached .vscode
Copy the code

Add the ignore file to.gitignore

If using WebStorm, add /.idea to.gitignore. If using VSCode, add /.vscode to.gitignoreCopy the code

This completes the project creation

File Directory Description

Remove unnecessary code from index. HTML in public

CSS Configuration

To normalize a CSS, simply write the following sentence at the top of the index.css file

@import-normalize;
Copy the code

If this has a warning just ignore it

CSS Normalize and CSS reset

CSS Normalize makes the default styles basically the same

CSS reset removes all the basic styles

The problem of node – sass

  1. The network download is slow
  2. Local compilation is slow

Install Dart-sass (React only supports Node-sass)

// Change node-sass to dart-sass yarn add node-sass@npm:dart-sass yarn add --dev node-sass@npm:[email protected]Copy the code

Here’s the technical problem

I want the React app to support Sass

Node-sass is required, which has two disadvantages: slow loading and slow local compilation

I wanted to use Dart-sass instead of Node-sass

React only supports it

Node-sass does not support Dart-sass

Into my efforts to search and research

I noticed that NPM 6.9 supports a new feature called Package Alias

NPM install node-sass@npm: Dart-sass

At last I achieved my goal

Configuring the REFERENCE problem of the CSS

@import 'XXX /aaa. SCSS' // The compiler will report an errorCopy the code

In Webstorm, right-click SRC and select as resource root

Configure THE JS reference problem

Add it to tsconfig.json in the appropriate place

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]}Copy the code

Create helper. SCSS to access variables, functions, and other common things

CSS in JS

Install styled – components

Yarn add [email protected]Copy the code

Supports typeScript installation

Yarn add - dev @ types/[email protected]Copy the code

Use the React the router

Document page

Yarn add react-router-dom // Supports typescript yarn add -- dev@types /react-router-domCopy the code

Create the tags Money Statistics 404 routing pages

By default, the money page is displayed

The Router has two modes: History and Hash

If you don’t have a backend server, you have to Hash

If you have a background server, configure all paths to the home page to use History

Global font

Use bold fonts in fonts.css

Copy the code inside

Creating the Nav Component

Mobile phone navigation bar is generally located under the screen, try not to use fixed positioning, so there will be a lot of bugs. We can take the Flex layout.

Be careful not to write out the height for all CSS constructs. Use padding and line-height as much as possible to spread out the height.

Using SVG Symbols

The advantages of SVG are high guarantee and lossless

Find the required SVG diagram in ali’s official icon library and download it.

Put it in the project ICONS folder

The introduction of SVG – Sprite – loader

In React, the config folder should be removed first

Yarn eject // Click y to download it automaticallyCopy the code

After the execution

Install and configure svG-Sprite-loader

How it works: When we introduce SVG we will first go to SVG-loader and then to SVG-Sprite-loader and generate a label.

He writes all of the SVG to a tag inside the head tag.

yarn add --dev svg-sprite-loader
Copy the code

Put the configuration SVG-Sprite-loader code into webpack.config.js

Catalog sample

Then go inside and put the code in the place shown below; Module inside the rules code block

{test: /\. SVG $/, use: [{loader: 'svg-sprite-loader', options: {}}, 'svG-transform-loader ', // 'svgo-loader', //Copy the code

* * installed svgo – loader * *

yarn add --dev svgo-loader
Copy the code

This is used to optimize SVG

Svg-transform-loader (not used here)

yarn add --dev svg-transform-loader
Copy the code

Use to add and modify attributes for SVG images

JS into SVG

Now let’s import and print it out

import  x from 'icons/money.svg'

console.log(x);
Copy the code

Discovery introduces an object

This is all configured, but there is a drawback that every time an SVG is introduced it has to be printed before it is used on the page, which we will address later.

The problem is TreeShaking, which falls off the dependency tree if you don’t use the imported files

The problems mentioned above can be solved by the following methods

require('icons/money.svg');
Copy the code

The reason is that TreeShaking does not apply to require. Remember the semicolon (;) Have to add

Let’s try it out where we need quotes

< li > < SVG > / / # money is the name of the file < use xlinkHref = "# money" / > < / SVG > < Link to = "/ tags" > TAB < / Link > < / li >Copy the code

This will be perfectly displayed on the page

This introduction allows us to modify the color and size of the object.

Require the entire ICONS folder

It’s not very efficient to require a single file all the time, so we could try requiring the whole ICONS folder

ImportAll = (requireContext: __WebpackModuleApi.RequireContext) => requireContext.keys().forEach(requireContext); ImportAll (require.context(' ICONS ', true, /\.svg$/)); } catch (error) {console.log(error); }Copy the code

Some dependencies need to be installed here

yarn  add --dev @types/webpack-env
Copy the code

The __WebpackModuleApi error is then resolved.

Delete the color that comes with SVG

{
   loader: 'svgo-loader', options: {
        plugins: [
            {removeAttrs: {attrs: 'fill'}}
        ]
    }
}

Copy the code

Note This modification is only applicable to [email protected]. An error message will be displayed if the svGo-loader @3.0 is installed.