React Project

1. npx create-react-app project
2. cd project
3. yarn eject
4. yarn build
5. delete whole node_modules
6. yarn start
Copy the code

Create a React project Issue

The use of NPM

/ / check the NPM source configuration $NPM config ls / / modify NPM source address is the official source $NPM config set will NPM registry / / https://registry.npmjs.org/ Source address modification for taobao source (used to install use slow NPM) $NPM config set registry https://registry.npm.taobao.org/ / / login command $NPM login command $/ / logged on $NPM publish // Delete package $NPM publish -force // Install package -g Global install $NPM Install -gCopy the code

The use of the yarn

  • concept

Like NPM, it is the front-end package manager

  • The characteristics of

1. Faster 2. Safer 3

  • Yarn installation: use the yarn official website
NPM install yarn -g // Upgrade yarn -g // Version check yarn --version yarn -v yarn Taobao source installation, Respectively, copy and paste the following lines of code can be run into the black window yarn yarn config set registry https://registry.npm.taobao.org - g config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass - g yarn common commands: installation of yarn NPM install - g yarn after the success of the installation, check the version number: Yarn --version Create folder yarn MD YARN Go to the yarn folder CD YARN initialization project yarn init // The same as NPM init. After the following information is entered, the package.json file yarn configuration items are generated: Yarn config list // Display all configuration items yarn config get <key> // Display a configuration item yarn config delete <key> // Delete a configuration item yarn config set <key> < value > [| -- - g global] / / set the configuration items The installation package: Yarn install // Install all packages in package.json. Lock YARN install --flat // Install a single version of a package YARN install --force // Force to re-download all packages YARN install --production Lock yarn install --pure-lockfile // Do not generate yarn.lock Add package (updates package.json and yarn.lock) : Yarn add [package] // Add a dependency package to the current project, which is automatically updated to package.json and yarn.lock. Yarn add [package]@[version] // Install the specified version, which is the main version. Yarn add [package]@[tag] // Install a tag (such as beta,next, or latest). Yarn add --dev/ -d // add to devDependencies yarn add --peer/ -p // add to peerDependencies yarn add --optional/ -o // Add to OptionalDependencies // Latest version in the main version of the default installation package. You can specify the version using the following commands: yarn add --exact/ -e // Exact version of the installation package. For example, yarn add [email protected] accepts version 1.9.1, but yarn add [email protected] --exact accepts only the latest version in the minor version of the 1.2.3 yarn add --tilde/ -t/installation package. For example, yarn add [email protected] --tilde accepts 1.2.9 but does not accept 1.3.0. Yarn publish Remove a package yarn remove <packageName> : Remove a package, Package. json and yarn.lock are automatically updated to update a script that depends on YARN upgrade to update packages to the latest version based on the specification scope. Yarn Run is used to execute scripts defined under the scripts property in package.json Display information about a package yarn Info <packageName> Can be used to view the latest version information about a module. Cache YARN Cache YARN Cache list # Lists each package that has been cached. Yarn cache DIR # Returns the global cache location Yarn cache cleanCopy the code

The react in the import

import defaultcomponent,{a,b,c... } from 'XXX' eg: import React,{Component} from 'react'; Import a defaultcomponent for export from the 'react' file and name it react and a non-default Component for Component import defaultcomponent form 'XXX' import the defaultcomponent from the 'XXX' file. Import {a as B} from 'XXX' import {a as B} from 'XXX' import a component from 'XXX' Import * as a from 'XXX' imports all components in the XXX file and names them as a, calling specific components as a.b, A.C... The default components are not includedCopy the code

Script Manually imports components

<script src="/node_modules/react/umd/react.development.js">
Copy the code

Scaffolding use

npm install -g create-react-app
yarn add -g create-react-app
create-react-app react-demo
Copy the code

React Hooks

Function components have no scope

  • UseState: similar to state in the state component

  • UseEffect: Lifecycle of state-like components

Routing Hooks

  • useParams
  • useHistory

Let and const

  • Let: Similar to var, but scoped only inside the current code block
  • Const: Declares a read-only constant whose value cannot be modified once declared. But if you’re modifying an object, the object itself can change, and the address of the pointer is immutable
let array = [] array.push('bao'); Array = ['lee']; // An error was reported because the pointer was changedCopy the code

alias

An alias is simply an alias. A command is long and can be reduced by using an alias alias. Eg:

g=git
ga='git add'
Copy the code