一、 react脚手架


项目的整体技术架构为:  react + webpack + es6 + eslint
参考网址 ：https://zhuanlan.zhihu.com/p/299208218##  一  react脚手架安装项目1.  npm i -g create-react-app      // 全局安装create-react-app库，用来创建react脚手架项目的库，查看是否安装可以通过create-react-app  -v 或者 npm root -a  得到一个路径，通过路径查看全局安装了什么包2.  create-react-app  hello-react  // 通过creat-react-app 安装脚手架 ，"hello-react"为项目名称，可以自己定义3.  cd hello-react    // 进入项目文件夹4.  npm start    // 启动项目
## 二  脚手架 下载下来的文件结构public ---- 静态资源文件夹favicon.icon ------ 网站页签图标index.html -------- 主页面logo192.png ------- logo图logo512.png ------- logo图manifest.json ----- 应用加壳的配置文件robots.txt -------- 爬虫协议文件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库的支持)
## 三 脚手架删除多余的文件public ---- 静态资源文件夹index.html -------- 主页面src ---- 源码文件夹components -------- 存放组件的文件夹App.js --------- App组件index.js ------- 入口文件package.json ------- 项目的配置信息，安装包信息 package-lock.json ------- 通过npm isntall 安装package.json里所有包，并将包及它的所有依赖项保存进package-lock.jsonyarn.lock ------  通过yarn install安装package.json里所有包，并将包及它的所有依赖项保存进yarn.lock，有此文件会锁住包的版本 【需要注意一点，如果通过yarn add 来安装包，你之后通过package.json文件安装所有包的时候请使用 yarn install 】## 四 配置antd按需映入,主题自定义，配置装饰器1.  安装基本依赖：antd : 蚂蚁金服UI库，@craco/craco ：通过此插件修改webpack，@babel/plugin-proposal-decorators ：配置装饰器的库，babel-plugin-import :按需引入的库craco-less ：自定义主题需要用到类似 less-loader 提供的 less 变量覆盖功能，我们可以引入 craco-less 来帮助加载 less 样式和修改变量安装命令：yarn add antd @craco/craco craco-less @babel/plugin-proposal-decorators babel-plugin-import 2.修改 package.json 中的 scripts{"scripts":{"start": "set PORT=5000 && craco start FAST_REFRESH=true","build": "set GENERATE_SOURCEMAP=false && craco build","analyzer": "env NODE_ENV=production BUILD_ANALYZER=true yarn start","test": "craco test"}}2.1)  修改 package.json 中的package.json -> eslintConfig ->rules ->//配置 eslint 去掉 no-unused-vars 报错{// "no-": "off",//"no-debugger":"off",//"no-console": "off",//"no-empty":"off","no-unused-vars":"off" }3.  在项目根目录(src同级)创建一个 craco.config.js 用于修改默认配置4.  craco.config.js中的配置const CracoLessPlugin = require('craco-less');module.exports = {babel: {plugins: [['import', { libraryName: 'antd', style: true }],  //按需引入['@babel/plugin-proposal-decorators', { legacy: true }]  // 装饰器配置]},plugins: [{plugin: CracoLessPlugin,options: {// 此处根据 less-loader 版本的不同会有不同的配置，详见 less-loader 官方文档lessLoaderOptions: {lessOptions: {//modifyVars: { '@primary-color': '#23442232' },   // 更改主题颜色javascriptEnabled: true}}}}]};

二、 react-router-dom

## 一、路由的基本使用1.明确好界面中的导航区、展示区2.导航区的a标签改为Link标签<Link to="/xxxxx">Demo</Link>3.展示区写Route标签进行路径的匹配<Route path='/xxxx' component={Demo}/>4.<App>的最外侧包裹了一个<BrowserRouter>或<HashRouter>## 二、路由组件与一般组件1.写法不同：一般组件：<Demo/>路由组件：<Route path="/demo" component={Demo}/>2.存放位置不同：一般组件：components路由组件：pages3.接收到的props不同：一般组件：写组件标签时传递了什么，就能收到什么路由组件：接收到三个固定的属性history:go: ƒ go(n)goBack: ƒ goBack()goForward: ƒ goForward()push: ƒ push(path, state)replace: ƒ replace(path, state)location:pathname: "/about"search: ""state: undefinedmatch:params: {}path: "/about"url: "/about"## 三、NavLink与封装NavLink1.NavLink可以实现路由链接的高亮，通过activeClassName指定样式名2.<NavLink to='/xx/xx'>Home</NavLink> 相当于 <NavLink to='/xx/xx' children={'Home'}/>## 四、Switch的使用1.通常情况下，path和component是一一对应的关系。2.Switch可以提高路由匹配效率(单一匹配)。## 五、解决多级路径刷新页面样式丢失的问题1.public/index.html 中 引入样式时不写 ./ 写 / （常用）2.public/index.html 中 引入样式时不写 ./ 写 %PUBLIC_URL% （常用）3.使用HashRouter## 六、路由的严格匹配与模糊匹配1.默认使用的是模糊匹配（简单记：【输入的路径】必须包含要【匹配的路径】，且顺序要一致）2.开启严格匹配：<Route exact={true} path="/about" component={About}/>3.严格匹配不要随便开启，需要再开，有些时候开启会导致无法继续匹配二级路由## 七、Redirect的使用  1.一般写在所有路由注册的最下方，当所有路由都无法匹配时，跳转到Redirect指定的路                由2.具体编码：<Switch><Route path="/about" component={About}/><Route path="/home" component={Home}/><Redirect to="/about"/></Switch>## 八、嵌套路由1.注册子路由时要写上父路由的path值2.路由的匹配是按照注册路由的顺序进行的## 九、向路由组件传递参数1.params参数路由链接(携带参数)：<Link to='/demo/test/tom/18'}>详情</Link>注册路由(声明接收)：<Route path="/demo/test/:name/:age" component={Test}/>接收参数：this.props.match.params2.search参数路由链接(携带参数)：<Link to='/demo/test?name=tom&age=18'}>详情</Link>注册路由(无需声明，正常注册即可)：<Route path="/demo/test" component={Test}/>接收参数：this.props.location.search备注：获取到的search是urlencoded编码字符串，需要借助querystring解析3.state参数路由链接(携带参数)：<Link to={{pathname:'/demo/test',state:{name:'tom',age:18}}}>详情</Link>注册路由(无需声明，正常注册即可)：<Route path="/demo/test" component={Test}/>接收参数：this.props.location.state备注：刷新也可以保留住参数## 十、编程式路由导航借助this.prosp.history对象上的API对操作路由跳转、前进、后退-this.props.history.push()-this.props.history.replace()-this.props.history.goBack()-this.props.history.goForward()-this.props.history.go()## 十一、BrowserRouter与HashRouter的区别1.底层原理不一样：BrowserRouter使用的是H5的history API，不兼容IE9及以下版本。HashRouter使用的是URL的哈希值。2.path表现形式不一样BrowserRouter的路径中没有#,例如：localhost:3000/demo/testHashRouter的路径包含#,例如：localhost:3000/#/demo/test3.刷新后对路由state参数的影响(1).BrowserRouter没有任何影响，因为state保存在history对象中。(2).HashRouter刷新后会导致路由state参数的丢失！！！4.备注：HashRouter可以用于解决一些路径错误相关的问题。
## 十二、withRouter的使用1. 是一般组件装换成路由组件，withRouter是一个函数2. 使用:import {withRouter} from 'react-router-dom'   export default withRouter(<一般组件名称>)3. 包装之后的组件里会有同路由组件一样多了很多路由专属的API可用(this.props)

    // 路由使用得基本结构  to,path和component是一一对应的关系<BrowserRouter> // 路由器的两种表现形式 BrowserRouter 和 HashRouter<ul><li><NavLink to='/about/tom'>tom</NavLink></li><li><NavLink to='/about/bill'>bill</NavLink></li><li><NavLink to='/about/alex'>alex</NavLink></li></ul><div><Switch> // Switch可以提高路由匹配效率,匹配到路由就不会继续匹配下去<Route exact path='/about/tom' component={Tom} />  //exact 精准匹配路由<Route path='/about/bill' component={Bill} /><Route path='/about/alex' component={Alex} /></Switch></div></BrowserRouter>## 路由传参有三种方法1.params参数路由链接(携带参数)：<Link to='/demo/test/tom/18'}>详情</Link>注册路由(声明接收)：<Route path="/demo/test/:name/:age"                 component={Test}/>接收参数：this.props.match.params2.search参数路由链接(携带参数)：<Link to='/demo/test?name=tom&age=18'}>详情</Link>注册路由(无需声明，正常注册即可)：<Route path="/demo/test" component={Test}/>接收参数：this.props.location.search备注：获取到的search是urlencoded编码字符串，需要借助querystring解析3.state参数路由链接(携带参数)：<Link to={{pathname:'/demo/test',state:{name:'tom',age:18}}}>详情</Link>注册路由(无需声明，正常注册即可)：<Route path="/demo/test" component={Test}/>接收参数：this.props.location.state备注：刷新也可以保留住参数(只的是BrowserRouter路由)

三、redux

// 安装 redux , react-redux yarn add redux  react-redux  // 默认是安装在生产环境(-S)yarn add redux-thunk    //  中间件 允许异步action，就是指action的值为函数redux主要由三部分组成：store，reducer，actionstore是一个对象，它有四个主要的方法(dispatch,subscribe,getState,replaceReducer)reducer1.  创建一个store,应用中所有的 state 都以一个对象树的形式储存在一个单一的 store 中,store可以通过createStore()方法创建，接受三个参数，经过combineReducers合并的reducer和                            state的初始状态以及改变dispatch的中间件，后两个参数并不是必须的。store的主要作用是将action和                reducer联系起来并改变stateimport { createStore, combineReducers } from "redux"import aboutReducer from "../reducers/aboutReducer" // reducers 处理简单逻辑返回的是一个函数import homeReducer from "../reducers/homeReducer"  // reducers 处理简单逻辑返回的是一个函数const allReducers = combineReducers({aboutData: aboutReducer,homeData: homeReducer})export default createStore(allReducers)2.  容器组件需要包裹UI组件,UI组件和容器组件通过react-redux中的connect()相互连接，UI组件可以直接通过this.props直接获取数据, connect()接受两个参数并且还是函数,第一个函数(mapStateToProps)返回的是一个对象,对象中的key就作为传递给UI组件props的key,value就作为传递给UI组件props的value,该函数用于传递状态第二个函数(mapDispatchToProps)函数返回的是一个对象,返回的对象中的key就作为传递给UI组件props的key,value就作为传递给UI组件props的value,该函数用于传递操作状态的方法connect(state => {return { modal: state }},dispatch => ({jia: number => dispatch({ type: 'jia', data: number })}))(About) // About是UI组3. React-Redux 提供<Provider/>组件，能够使整个app访问到Redux store中的数据ReactDOM.render(<Provider store={store}><App/></Provider>,document.getElementById('root'))##总结   1. 创建一个store.js文件, 引入reducers, 例子 :// store.js 该文件专门用于暴露一个store对象，整个应用只有一个store对象//引入createStore，专门用于创建redux中最为核心的store对象import {createStore,applyMiddleware} from 'redux' //引入redux-thunk，用于支持异步actionimport thunk from 'redux-thunk'//暴露store export default createStore(reducer,applyMiddleware(thunk))2. 在入口文件引入 store.js, // index.jsimport React from 'react'import ReactDOM from 'react-dom'import App from './App'import store from './redux/store'import {Provider} from 'react-redux'ReactDOM.render(/* 此处需要用Provider包裹App，目的是让App所有的后代容器组件都能接收到store */<Provider store={store}><App/></Provider>,document.getElementById('root'))3. 在UI组件中,此时UI组件命名为Homeimport React, { Component } from 'react'//引入connect用于连接UI组件与reduximport {connect} from 'react-redux'//定义UI组件class Home extends Component { render(){return <div> ..... </div>}} //使用connect()()创建并暴露一个Count的容器组件export default connect(state => ({count:state.count,personCount:state.persons.length}),{increment,decrement,incrementAsync})(Home)

四、Hooks

(1). Hook是React 16.8.0版本增加的新特性/新语法
(2). 可以让你在函数组件中使用 state 以及其他的 React 特性

三个常用的Hook : State Hook 、Effect Hook 、Ref Hook## State Hook(1). State Hook让函数组件也可以有state状态, 并进行状态数据的读写操作
(2). 语法: const [xxx, setXxx] = React.useState(initValue)
(3). useState()说明:参数: 第一次初始化指定的值在内部作缓存返回值: 包含2个元素的数组, 第1个为内部当前状态值, 第2个为更新状态值的函数
(4). setXxx()2种写法:setXxx(newValue): 参数为非函数值, 直接指定新的状态值, 内部用其覆盖原来的状态值setXxx(value => newValue): 参数为函数, 接收原本的状态值, 返回新的状态值, 内部用其覆盖原来的状态值const  [count,setCount] = React.useState(init) count : 初始变量setCount :更新变量 写法1：setCount(count+1)写法2 ： setCount(count => count+1)init : 初始值## Effect Hook(1). Effect Hook 可以让你在函数组件中执行副作用操作(用于模拟类组件中的生命周期钩子)
(2). React中的副作用操作:发ajax请求数据获取设置订阅 / 启动定时器手动更改真实DOM
(3). 语法和说明: useEffect(() => { // 在此可以执行任何带副作用操作return () => { // 在组件卸载前执行// 在此做一些收尾工作, 比如清除定时器/取消订阅等}}, [stateValue]) // 如果指定的是[], 回调函数只会在第一次render()后执行(4). 可以把 useEffect Hook 看做如下三个函数的组合componentDidMount()componentDidUpdate()componentWillUnmount()React.useEffect(()=>{})   // 相当于类组件中 componentDidMount , componentWillUpdateReact.useEffect(()=>{},[])  // 相当于 componentDidMount React.useEffect(()=>{},[Name])  // 当setName的时候，会触发 React.useEffect(()=>{ return ()=>{} },[Name])  // 返回函数的函数相当于componentWillUnmount## Ref  Hook(1). Ref Hook可以在函数组件中存储/查找组件内的标签或任意其它数据
(2). 语法: const refContainer = useRef()
(3). 作用:保存标签对象,功能与React.createRef()一样例子：
function Demo(){const myRef = React.useRef()function show(){alert(myRef.current.value)}return (<div><input type="text" ref={myRef}/><button onClick={show}>点我提示数据</button><div>)
}

使用create-react-app创建react脚手架相关推荐

react快速开始(二)-使用脚手架Create React App创建react应用
文章目录 react快速开始(二)-Create React App入门什么是Create React App 快速开始使用IDE webstrom创建react项目 create react a ...
如何将React App转换为React Native
I have been working on a lot of mobile projects lately - including Cordova, PhoneGap, React Native, ...
React vscode 创建 react 项目流程【超详细】
文章目录一.安装node 二.配置淘宝镜像三.配置 vscode(win10) 四.全局安装脚手架五.创建项目编写第一个 react 程序教程一.安装node 请在官网下载安装:https: ...
create react app创建的项目运行test的时候不能解析webpack的alisa配置的问题
使用babel插件npm install babel-plugin-module-resolver,并在.babelrc文件中加入如下: {"plugins": [["m ...
Create React App从使用到Docker部署
一.介绍 Create React App 是 React 脚手架,它帮我们可以快速生成项目的工程化结构,脚手架让项目从搭建到开发再到部署,整个流程变得快速和便捷. 二.安装 Create React ...
【翻译】基于 Create React App路由4.0的异步组件加载（Code Splitting）
基于 Create React App路由4.0的异步组件加载本文章是一个额外的篇章,它可以在你的React app中,帮助加快初始的加载组件时间.当然这个操作不是完全必要的,但如果你好奇的话,请随 ...
如何使用Create React App DevOps自动化工作中所有无聊的部分
by James Y Rauhut 詹姆士·鲁豪(James Y Rauhut) 如何使用Create React App DevOps自动化工作中所有无聊的部分 (How I automate al ...
如何创建React项目
前言构建React项目的几种方式: create-react-app 脚手架快速搭建 react 项目(推荐) yeoman 脚手架搭建 react 项目 webpack 一步一步构建 react ...
tailwind css_什么是Tailwind CSS，如何将其添加到我的网站或React App中？
tailwind css CSS is a technology that can be your best or worst friend. While it's incredibly flexib ...
react项目_如何从零开始创建React项目（三种方式）
在开发React项目前最关键的当然是项目的创建,现在的前端工程化使得前端项目的创建也变得越来越复杂,在这里介绍三种从零开始创建React项目的方式,分别是在浏览器中直接引入.使用官方脚手架create ...

使用create-react-app创建react脚手架

一、 react脚手架

二、 react-router-dom

三、redux

四、Hooks

使用create-react-app创建react脚手架相关推荐

最新文章

热门文章