react脚手架
1、脚手架安装
第一步,全局安装:npm i -g create-react-app
第二步,切换到想创项目的目录,使用命令:create-react-app react_wmq
第三步,进入项目文件夹:cd hello-react
第四步,启动项目:npm start
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
爬虫规则文件
4、index.js
插件: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) |
评论
匿名评论
隐私政策
你无需删除空行,直接评论以获取最佳展示效果