React Project Summary

This is the 11th day of my participation in Gwen Challenge

Expose the React configuration file

npm run eject
Copy the code

Commit the changed code with Git if something goes wrong

There was an error starting the project after installing babel-import-plugin

Install dependency yarn add@babel /plugin-proposal-decorators –dev

According to the need to introduce

• Install Babel – import – the plugin

• Find the Babel addition in package.json

 "babel": {
    "presets": [
      "react-app"]."plugins": [["@babel/plugin-proposal-decorators",
        {
          "legacy": true}], ["import",
        {
          "libraryName": "antd"."libraryDirectory": "es"."style": "css"}}]].Copy the code

import { Button } from 'antd'
Copy the code

According to the need to pack

• Download the dependent

npm install react-app-rewired customize-cra -D
Copy the code

• In the root directory (not the SRC folder)config-overrides.js

const { override, fixBabelImports } = require('customize-cra')

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd'.libraryDirectory: 'es'.style: 'css',}))Copy the code

Fetch cross-domain problem

Configure package.json Configure proxy properties

"proxy": "https://xxxx.com"
Copy the code

Configuration setupProxy. Js

• Create a new file setupproxy.js,

Configure the webPackDevServer. js file in the config directory

proxy: {
  '/api': {
    target: 'http://xxx.com'.// Background service address and port number
    ws: true./ / websoket service
    changeOrigin: true.// Whether to cross domains
    pathRewrite: { '^/api': '/api'}}}Copy the code

React uses less

• In webpack.config.js, find a place to work with CSS and add a similar structure

{
    test: lessRegex,
    exclude: lessModuleRegex,
    use: getStyleLoaders(
        {
            importLoaders: 2,
            sourceMap: isEnvProduction && shouldUseSourceMap,
        },
        'less-loader'
    ),
    // Don't consider CSS imports dead code even if the
    // containing package claims to have no side effects.
    // Remove this when webpack adds a warning or an error for this.
    // See https://github.com/webpack/webpack/issues/6571
    sideEffects: true,},// Adds support for CSS Modules, but using SASS
// using the extension .module.scss or .module.sass
{
    test: lessModuleRegex,
    use: getStyleLoaders(
        {
            importLoaders: 2,
            sourceMap: isEnvProduction && shouldUseSourceMap,
            modules: true,
            getLocalIdent: getCSSModuleLocalIdent,
        },
        'less-loader'
    ),
},
Copy the code

Route lazy loading

npm install react-loadable
Copy the code

import Loadable from 'react-loadable'
import Loading from '@/component/Loading' // The component that is displayed when loading

 {
    text: 'about'.roles: ['custome'.'admin'].path: '/about'.component: Loadable({
      loader: () = > import('@/pages/about'),
      loading: Loading,
    }),
  },
Copy the code

BrowserRouter route redirect problem

Ensure that only one BrowserRouter component wraps the route, nesting the route will jump but the page will not update

• There is already a layer of routers on the outside, and adding another layer will cause problems

Non-routed components access routing objects

Programmatic navigation: props.history.push(‘/home’)

• Only in a routing component can you get a routing object directly, so what are routing components and non-routing components

  • Routing component: Definition<Route>Is the file corresponding to the specified Component
  • Non-routed components: various local components, sidebars, drop-down menus, etc

• How can a routing object be used in a non-routing component?

  import { withRouter } from 'react-router-dom'
  
  const sideBar =(props) = >{
      // You can access props. History.return. }export default withRouter(sideBar)
  Copy the code