Environment set up

Go to create-react-app and run the following steps:

  1. Yarn global add [email protected]
  2. yarn create react-app money-react –template typescript
  3. cd money-react
  4. yarn start

Note: Running YARN start automatically opens the BROWSER. If you do not want to open the BROWSER automatically, run echo ‘BROWSER= None ‘>. Env and then yarn start.

CSS normalize

While CSS Normalize ensures that the default style of a page is similar across browsers, CSS reset allows all styles to be reset. The create-react-app document says: just write @import-normalize in the index.css file to ensure that the default style of the page is similar across browsers.

Support SCSS

Create-react-app

$ npm install node-sass --save
$ # or
$ yarn add node-sass
Copy the code

However, I prefer to use Dart-Sass for the following reasons:

Use dart-sass instead of Node-sass. React does not support dart-sass, but nPM6.9 has a package alias function yarn add --dev node-sass@npm: The [email protected] command can replace Node-sass with dart-sass and change all.css to.scssCopy the code

How to make CSS@import reference more convenient

SRC/XXX /yyy/SRC/XXX /yyy. SCSS js does not need @. Tsconfig. json add “baseUrl” :” SRC “, import ‘XXX /yyy. TSX’ to reference ‘SRC/XXX /yyy.tsx’

About the helper. SCSS

1. Create the SRC/helper. SCSS

  • Helper places variables, functions, common things
  • For example write $RED :#f00

2. Use the helper. SCSS

  • Add @import “helper” to index.scss or app. SCSS to reference it
  • And then you can write color:$red

styled-components

For the style styled components, CSS in JS is used instead of SCSS. The installation steps are as follows:

Yarn add styled-components yarn add -- dev@types /styled-components // Add typescript supportCopy the code

The usage method is as follows:

Const Button = styled. Button '// Write a Button color: red; ` <Button />Copy the code

React Router Implements navigation

Install the following tools according to the React Router documentation:

yarn add react-router-dom; yarn add --dev @types/react-router-dom; / / support the TypescriptCopy the code

Then according to the document, use CRM(copy,run,modify) learning method to modify the corresponding content, and get the result we want. Note: The Router has two modes. The history mode can only be used if there is a background server. Here we use hash mode. The page is divided into billing page, TAB page and statistics page, and finally a 404 page.

svg Symbols

In the project, Symbols of SVG were used as ICONS. Instead of importing SVG directly, I used a customized Webpack Config. The installation steps and usage methods are as follows:

Install svG-Sprite-loader and SVGo-loader, convert SVG to a Symbol YARN eject to webpack configuration (copy,run,modify)Copy the code

Join at Oneof:

     {
       test: /\.svg$/,
       use: [
             {loader: 'svg-sprite-loader', options: {}},
               {
                 loader: 'svgo-loader', options: {
                   plugins: [
                      {removeAttrs: {attrs: 'fill'}}
                    ]
                  }
                }
              ]
            },
Copy the code

Use as follows:

  <svg>
    <use xlinkHref={'#' + props.name}/>
  </svg>
Copy the code

other

Things but the principle of three: many times the use of the place can be removed as far as possible, refused to repeat. Treeshaking: When importing SVG as an image, this import is removed if SVG is not used and can be avoided using require.