Following on from the previous article, let’s see how to configure the React subsystem. React subsystem:

Create-react-app: create-react-app: create-react-app: create-react-app: create-react-app: create-react-app: create-react-app

npm install -g create-react-app
Copy the code

Initialization project:

npx create-react-app reactapp
Copy the code

Create-react-app creates a remote repository with README and gitignore initialized, so do not check create README and gitignore.

Git add. Git commit -m "push new files" git remote add originCopy the code

In this way, we pushed the new scaffold project to the remote warehouse. Now we can modify some files in the subsystem.

1. Add public-path.js to the SRC directory to modify the publicPath at runtime. (Note: publicPath at runtime is different from publicPath at build time) :

// src/public-path.js

if (window.__POWERED_BY_QIANKUN__) {
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}
Copy the code

Add an entry file called index.js for the subsystem. In the index.js file, we need to import the public-path file and define the render method, which is called in the exported mount hook, for the base to render the subsystem. In the Render method, to prevent root ID #root from colliding with other DOM objects, you need to limit the lookup to containers in the props parameter. And the render operation when accessing the subsystem alone is ensured through the if judgment. The bootstrap(), mount() and unmount() functions were defined as the hook functions that the Qiankun framework required to export in the subsystem entry file:

// src/index.js

import './public-path';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

function render(props) {
  const { container } = props;
  ReactDOM.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>,
     container ? container.querySelector('#root') : document.querySelector('#root')); }if(! window.__POWERED_BY_QIANKUN__) { render({}); }export async function bootstrap() {
  console.log('[react16] react app bootstraped');
}

export async function mount(props) {
  console.log('[react16] props from main framework', props);
  render(props);
}

export async function unmount(props) {
  const { container } = props;
  ReactDOM.unmountComponentAtNode(container ? container.querySelector('#root') : document.querySelector('#root'));
}
Copy the code

3. Modify webPack configuration, install plugin @rescripts/cli to allow WebPack-Server to cross domains in debug environment:

npm i -D @rescripts/cli
Copy the code

.rescriptsrc.js is added to the root directory:

// .rescriptsrc.js

const { name } = require('./package');

module.exports = {
  webpack: (config) => {
    config.output.library = `${name}-[name]`;
    config.output.libraryTarget = 'umd';
    config.output.jsonpFunction = `webpackJsonp_${name}`;
    config.output.globalObject = 'window';

    return config;
  },

  devServer: (_) => {
    const config = _;

    config.headers = {
      'Access-Control-Allow-Origin': The '*'}; config.historyApiFallback =true;
    config.hot = false;
    config.watchContentBase = false;
    config.liveReload = false;

    returnconfig; }};Copy the code

Modify the package. The json:

-   "start": "react-scripts start",
+   "start": "rescripts start",
-   "build": "react-scripts build",
+   "build": "rescripts build",
-   "test": "react-scripts test",
+   "test": "rescripts test",
-   "eject": "react-scripts eject"
Copy the code

The React subsystem needs to start services on port 3000 to match the configuration of the base system.

PORT=3000
Copy the code

The React subsystem page is displayed in the subsection of the react subsystem by default if you access the address of the main system introduced in the previous article.

In the next article, we’ll cover file modifications to the VUE subsystem.

More exciting articles please pay attention to: