1、脚手架安装

第一步,全局安装:npm i -g create-react-app

第二步,切换到想创项目的目录,使用命令:create-react-app react_wmq

第三步,进入项目文件夹:cd hello-react

第四步,启动项目:npm start

202110201634722907199144

2、react脚手架项目结构

(1)public ---- 静态资源文件夹

favicon.icon ------ 网站页签图标

index.html ------主页面

logo192.png ------- logo图

logo512.png ------- logo图

manifest.json ----- 应用加壳的配置文件

robots.txt -------- 爬虫协议文件

(2)src ---- 源码文件夹

App.css -------- App组件的样式

App.js---------App组件

App.test.js ---- 用于给App做测试

index.css ------ 样式

index.js------入口文件

logo.svg ------- logo图

reportWebVitals.js— 页面性能分析文件(需要web-vitals库的支持)

setupTests.js---- 组件单元测试的文件(需要jest-dom库的支持)

3、index.html

202110201634722917158466

爬虫规则文件

202110201634722926160353

4、index.js

202110201634722933177904

插件:ES7 React/Redux/GraphQL/React-Native snippets

快捷键

column1 column2
imr→ import React from ‘react’
imrd→ import ReactDOM from ‘react-dom’
imrc→ import React, { Component } from ‘react’
imrcp→ import React, { Component } from ‘react’ & import PropTypes from ‘prop-types’
imrpc→ import React, { PureComponent } from ‘react’
imrpcp→ import React, { PureComponent } from ‘react’ & import PropTypes from ‘prop-types’
imrm→ import React, { memo } from ‘react’
imrmp→ import React, { memo } from ‘react’ & import PropTypes from ‘prop-types’
impt→ import PropTypes from ‘prop-types’
imrr→ import { BrowserRouter as Router, Route, NavLink} from ‘react-router-dom’
imbr→ import { BrowserRouter as Router} from ‘react-router-dom’
imbrc→ import { Route, Switch, NavLink, Link } from react-router-dom’
imbrr→ import { Route } from ‘react-router-dom’
imbrs→ import { Switch } from ‘react-router-dom’
imbrl→ import { Link } from ‘react-router-dom’
imbrnl→ import { NavLink } from ‘react-router-dom’
imrs→ import React, { useState } from ‘react’
imrse→ import React, { useState, useEffect } from ‘react’
redux→ import { connect } from ‘react-redux’
rconst→ constructor(props) with this.state
rconc→ constructor(props, context) with this.state
est→ this.state =
cwm→ componentWillMount = () => { } DEPRECATED!!!
cdm→ componentDidMount = () =>
cwr→ componentWillReceiveProps = (nextProps) => { } DEPRECATED!!!
scu→ shouldComponentUpdate = (nextProps, nextState) =>
cwup→ componentWillUpdate = (nextProps, nextState) => { } DEPRECATED!!!
cdup→ componentDidUpdate = (prevProps, prevState) =>
cwun→ componentWillUnmount = () =>
gdsfp→ static getDerivedStateFromProps(nextProps, prevState)
gsbu→ getSnapshotBeforeUpdate = (prevProps, prevState) =>
ren→ render()
sst→ this.setState({ })
ssf→ this.setState((state, props) => return { })
props→ this.props.propName
state→ this.state.stateName
rcontext→ const ${1:contextName} = React.createContext()
cref→ this.${1:refName}Ref = React.createRef()
fref→ const ref = React.createRef()
bnd→ this.methodName = this.methodName.bind(this)