第三方工具

yarn 和 npm的命令对比表格
  1. 1. vscode 安装es7插件: ES7 React/Redux/React-Native/JS snippets
  2. 2. 项目依赖: npm install --save prop-types(让props具有数据类型约束。js是弱语言,没有数据类型的概念)
  4. 1. 数据请求:
  5. cnpm i axios -S
  7. 2. cnpm i json-server -g(Mac需要前面加sudo) - mock数据的工具(构建前端Mock)-模拟api
  8.     使用方法:<div>在根目录下建一个mock文件夹,里面放的都是json文件,新开控制台,cd到mock,执行json-server your-data.json --port 4000 --watch --host 192.168.0.103。
  9.         就会得到一个假的api(
  10.         默认端口是3000,若冲突,则--port(简写-p)修改;
  11.         -w,实时监控,修改json数据不用重启
  12.         --host默认是localhost,这里是指定host)<b>json文件的格式一定要正确</b>使用说明地址:https://gitee.com/rh_hg/json-server?from=gitee_search</div> 
  13.     *帮你自动解决跨域问题;
  14.     *其中同一个api,不同方式请求,执行不同的事情-Restful风格:https://blog.csdn.net/zalan01408980/article/details/84146249
  16. 3. cnpm i swiper-S 轮播图插件   myswiper(实例名).update()方法用于更新
  18. 4. cnpm i pubsub-js -S
  19. 非父子组件传值
  20. 发布/触发:PubSub.publish("事件名","数据");
  21. 订阅/监听:PubSub.subscribe("事件名",(msg,data)=>{
  22.     //msg是事件名,data是传过来的参数
  23. })
  25. <sass/scss> node-sass这个包不好装-不要着急
  26. 5. cnpm i node-sass sass-loader -S 或 yarn add node-sass sass-loader
  28. 6. 矢量图标库,先去下载,放在public。再在index.html中引入iconfont.css。一般在span标签写className就可以啦

7.背景粒子 react-particles.js两个网址

8.react中使用css

8.cnpm i redux react-redux -S - 详情见redux.md

10.ui库之按需加载

ant design mobile (mobile)
ant design (pc) yarn add antd
全局引入
index.js
import ‘antd/dist/antd.css’;
在组件里引入组件就可以使用了，例如组件里使用button
import { Button } from ‘antd’;
xxx

一、使用 react-scripts-rewired 和 customize-cra 来自定义 create-react-app 的 webpack 配置。

  1. 代码
  1. 按需加载
  2.     1)    yarn add react-app-rewired customize-cra
  3. react-app-rewired   不用弹射就可以配置webpack
  4. customize-cra  自定义脚手架环境
  5.     2) package.json
  6. ....
  7. "scripts": {
  8.   "start": "react-app-rewired start",
  9.   "build": "react-app-rewired build",
  10.   "test": "react-app-rewired test",
  11.   "eject": "react-scripts eject"
  12.  },
  13. ...

项目的根目录建立一个配置文件 config-overrides.js

  1. // less less-loader
  2. // yarn add babel-plugin-import
  3. // @babel/plugin-proposal-decorators
  4. const { override, fixBabelImports, addLessLoader, addWebpackAlias, addDecoratorsLegacy  } = require('customize-cra');
  5. const { resolve } = require('path');
  7. module.exports = override(
  8.   // 按需加载
  9.   fixBabelImports('import', {
  10.     libraryName: 'antd',
  11.     libraryDirectory: 'es',
  12.     style: true
  13.   }),
  14.   // less覆盖主题: 不需要全局导入样式`import 'antd/dist/antd.css';`
  15.   addLessLoader({
  16.     // 写法一: 5.0.0
  17.     javascriptEnabled: true,
  18.     modifyVars: {
  19.       '@primary-color': '#1DA57A'
  20.     },
  22.     // 写法二: less-loader 版本为 6.0.0 以上
  23.     // lessOptions: {
  24.     //   javascriptEnabled: true,
  25.     //   modifyVars: {
  26.     //     '@primary-color': '#1DA57A'
  27.     //   }
  28.     // }
  29.   }),
  30.   // 别名
  31.   addWebpackAlias({
  32.     '@': resolve('src')
  33.   }),
  34.   // 装饰器
  35.   addDecoratorsLegacy(),
  36. );

  1. 安装依赖次序
    1） antd
    2）react-app-rewired customize-cra
    3） babel-plugin-import
    4）less less-loader 如果需要更改主题
    5） @babel/plugin-proposal-decorators 是为了用装饰器

  2. 配置代理 src/setupProxy.jshttp-proxy-middleware ```javascript const { createProxyMiddleware } = require(‘http-proxy-middleware’)

module.exports = function (app) { // 接口网址: https://cnodejs.org/api app.use(‘/cnode’, createProxyMiddleware({ target: ‘https://cnodejs.org/api/v1‘, changeOrigin: true, pathRewrite: { “^/cnode”: “/“ } }) ); }

  2. <a name="GXrui"></a>
  3. #### 二、[craco](https://github.com/gsoft-inc/craco) （一个对 create-react-app 进行自定义配置的社区解决方案）
  4. [github-craco](https://github.com/gsoft-inc/craco)<br />[使用readme](https://github.com/gsoft-inc/craco/blob/master/packages/craco/README.md#custom-location-for-cracoconfigjs)
  5. ```javascript
  6. $ yarn add @craco/craco
  7. $ yarn add craco-less
  9. /* package.json */
  10. "scripts": {
  11. -   "start": "react-scripts start",
  12. -   "build": "react-scripts build",
  13. -   "test": "react-scripts test",
  14. +   "start": "craco start",
  15. +   "build": "craco build",
  16. +   "test": "craco test",
  17. }
  19. /* 根目录下：craco.config.js */
  20. module.exports = {
  21.   // ...
  22. };
  24. // 自定义主题： App.css改为less并引入antd的less
  25.   /* src/App.js */
  26. - import './App.css';
  27. + import './App.less';
  28.   /* src/App.less */
  29. - @import '~antd/dist/antd.css';
  30. + @import '~antd/dist/antd.less';
  31.   const CracoLessPlugin = require('craco-less');
  32. // 添加插件
  33. module.exports = {
  34.   plugins: [
  35.     {
  36.       plugin: CracoLessPlugin,
  37.       options: {
  38.         lessLoaderOptions: {
  39.           // 利用了 less-loader 的 modifyVars 来进行主题配置. [配置主题文档](https://ant-design.gitee.io/docs/react/customize-theme-cn)
  40.           modifyVars: { '@primary-color': '#1DA57A' },
  41.           javascriptEnabled: true,
  42.         },
  43.       },
  44.     },
  45.   ],
  46. };

1584456129225

代理(服务器之间是没有跨域的)

1.正向代理(Forward agent)-开发环境-(react采用webpack-dev-server)
  1. 通过代理服务器去访问,类似于梯子访问谷歌![](https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3892108125,900014847&fm=26&gp=0.jpg#align=left&display=inline&height=293&margin=%5Bobject%20Object%5D&originHeight=293&originWidth=594&status=done&style=none&width=594)

2.反向代理(reverse proxy)-上线环境-(nginx代理)
  1. 这个服务器没有,去向别的服务器请求![](https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=4070354397,1810838386&fm=26&gp=0.jpg#align=left&display=inline&height=300&margin=%5Bobject%20Object%5D&originHeight=300&originWidth=518&status=done&style=none&width=518)

3.配置文件的路径

项目目录下\node_modules\react-scripts\config\webpackDevServer.config.js

或者弹射显示隐藏文件在根目录(yarn eject)

4.配置

进入这个文件,找到proxy这个属性,对其进行修改

  1. 1.正向代理
  2. //中国天气网(城市码101200901-宜昌)
  3. //api http://www.weather.com.cn/data/cityinfo/101200901.html
  4. axios.get("/weather/data/cityinfo/101200901.html").then(res=>{})
  5. proxy:{
  6.     "/weather":{
  7.         target:"http://www.weather.com.cn",
  8.         changeOrigin:true,
  9.         "pathRewrite":{
  10.             "^/weather":"/"
  11.         }
  12.     },
  13. },
  15. 2.反向代理
  16. nginx写代理

更改端口(port)

脚手架(webpack)自带的服务器是webpack-dev-server

项目目录下\node_modules\react-scripts\scripts\start.js

改端口 const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 5000;

这样更改,一旦重新下载node_modules则失效。最靠谱的办法是弹射,但是弹射有几率失败

注意: 弹射不能撤销

查看package.json发现脚本是react-scripts执行的,去node_modules/react-scripts修改配置文件没有意义,因为node_modules不能改,改了重新建辉丢失配置。所以弹射来了↓↓↓
yarn eject 弹射隐藏文件显示在根目录(弹出来藏不回去,不可撤销); 弹射过程中(会下插件帮助弹射)若出错,则直接删去node_modules,再反向安装依赖,若启动项目成功,则说明弹射成功!

eslint

  1. eslint no-restricted-globals
    // eslint-disable-next-line
    下面这句js 就不用eslint进行语法检查了。
    react cli eslint 配置
    https://www.codercto.com/a/13256.html
  2. Fragment 空标记 相当于 <></>

网站:

  1. Chrome插件扩展国内下载网
  2. 关键词挖掘工具，长尾关键词挖掘，网站关键词查询 - 5118站长工具

cnpm i react-loadable redux-thunk redux-saga classnames styled-components immutable -S

cnpm i react-markdown -S