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)