preparation

onecreate-react-app

Create a new folder and drag it into Webstorm to open the console

Yarn global add [email protected]// Download version 3.4.1 create-react-app --version// Check whether create-react-app. --template is successfully installed Typescript // Create a new project with typescript. Yarn Start // Compile the current code and automatically open the browserCopy the code

To prevent automatically opening the BROWSER each time, you need to create a new file in your project.env and write BROWSER= None to it

Add /.idea to.gitignore (added by vscode user /.vscode). If you still see.idea in git status, run git rm -r — cached.idea

CSS normalize VS CSS Reset

@import-normalize; /* bring in normalize.css styles */

/* rest of app styles */
Copy the code

Support SCSS

It is recommended to use dart-sass instead of Node-sass

Yarn add - dev node - sass @ NPM: [email protected]Copy the code

Then change all.css to.scSS

Interview: Encounter the most difficult technical questions

If you want the React app to support Sass, you need Nod-sass, but it has two disadvantages:

  • Slow download
  • Slow local compilation

So I wanted to replace Nod-sass with Dart-sass. However, React only supports Nod-Sass but not Dart-Sass. After research, I found that React only supports Nod-Sass

  • NPM 6.9 supports a new feature called the Package Alias
  • Yarn add node-sass@npm: DART-Sass can be used

Finally achieve the goal

Import and JS import optimization

How to make css@import references easier

React can use @import ‘XXX /yyy’ to introduce SRC/XXX /yyy.scss

If an error is reported, do the following:

Jsconfig. json or tsconfig.json file, then you can directly import the SRC/XXX /yyy. TSX with ‘XXX /yyy. TSX’

{

"compilerOptions": {

"baseUrl": "src"

},

"include": ["src"]

}
Copy the code

helper.scss

Create a SRC/helper. SCSS

  • The helper holds common objects such as variables and functions, such as$ red:F00;

Use helper. SCSS

  • Write in index.scss or app.scss@import"helper"You can refer to
  • Then you can use itcolor:$red; 了

This project uses CSS-in-JS scheme

The installation

Yarn add Styled -components //JS Source yarn add -- dev@types/Styled -components //TS Type declaration fileCopy the code

Installing a plug-in

Example code:

//./components/Button.tsx import styled from "styled-components"; const Box = styled.div` border: 1px solid grey; min-width: 300px; min-height: 300px; margin: 20px; Box-shadow: 0 0 3px rgba(0, 0, 0, 0.5); `; export default Box; // Define a Button with a style, without classCopy the code
//./components/Box.tsx
import styled from "styled-components";

const Button = styled.button`
  color: white;
  border: none;
  background: burlywood;
  &:hover{
    background: cadetblue;
  }
`;

export default Button
Copy the code
//App.tsx
import React from 'react';
import './App.scss';
import Button from "./components/Button";
import Box from "./components/Box";



function App() {
    return (
        <Box>
            <Button>Hello</Button>
        </Box>
    );
}

export default App;
Copy the code

You can modularize the above code into a button. TSX file, and then export default Button by referring to import Button from ‘Components/Button’; Is used in the file

Vi. Configuration summary

The official start of the

Delete the test code and the corresponding import statement

The deleted file is as shown in the figure below:

React Router First experience

Yarn add react-router-dom//JS Yarn add -- dev@types /react-router-dom//TS Type declaration fileCopy the code

Go to the CRM 1st Example: Basic Routing document

Use Flex layout to locate the navigation bar

const Wrapper = styled.div`
  height: 100vh;
  display: flex;
  flex-direction: column;
`;

const Main = styled.div`
  flex-grow: 1;
  overflow: auto;
`;
Copy the code

Four. The main code at this stage

//App.tsx import React from 'react'; import { HashRouter as Router, Switch, Route, Link, Redirect } from "react-router-dom"; import styled from "styled-components"; import Nav from "./components/Nav"; const Wrapper = styled.div` height: 100vh; display: flex; flex-direction: column; `; const Main = styled.div` flex-grow: 1; overflow: auto; `; function App() { return ( <Router> <Wrapper> <Main> <Switch> <Route path="/tags"> <Tags/> </Route> <Route path="/money"> <Money/> </Route> <Route path="/statistics"> < statistics /> </Route> <Redirect exact from={"/"} to={"/ Money "}/>// Default Route <Route path="*"> <Nomatch/> </Route> </Switch> </Main> <Nav/> </Wrapper> </Router> ); } function Nomatch() {return <div> page does not exist </div>; } function Statistics() {return <h2> Statistics page </h2>; } function Tags() {return <h2> Tags </h2>; } function Money() {return <h2> billing page </h2>; } export default App;Copy the code
//index.scss @import-normalize; @import "helper"; * { margin: 0; padding: 0; } * { box-sizing: border-box } *::before { box-sizing: border-box } *::after { box-sizing: border-box } ul, ol { list-style: none; } a { text-decoration: none; color: inherit; } body{ font-family:$font-hei; font-size: 16px; The line - height: 1.2; }Copy the code
//helper.scss
$font-hei: -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;
Copy the code
//Nav.tsx import styled from "styled-components"; import {Link} from "react-router-dom"; import React from "react"; const NavWrapper = styled.nav` line-height: 24px; Box-shadow: 0 0 3px rgba(0, 0, 0, 0.25); > ul { display: flex; > li {width: 33.333333333%; text-align: center; padding: 16px; }} `; Const Nav () = = > {return (< NavWrapper > < ul > < li > < Link to = "/ tags" > TAB < / Link > < / li > < li > < Link to = "/ money" > account page < / Link > </li> <Link to="/statistics"> </Link> </li> </ul> </NavWrapper>)} export default Nav;Copy the code