Detailed explanation of React's use of referencing component instances relative to the root directory

This article mainly introduces to you the relevant information on how to use React to reference components relative to the root directory. The article introduces it in great detail through sample code. It has certain reference learning value for everyone's study or work. Friends who need it Let's learn with the editor below, I hope it can help everyone.

In the components developed by myself, I often make references such as the following:

import genFetchEntryListArgs from '../../../utils/table/genFetchEntryListArgs';
import { parseQuery, stringifyQuery } from '../../../utils/query';
import mapMyToProps from '../../../utils/connect/mapMyToProps';
import genPagination from '../../../utils/table/pagination';
import handleConfirm from '../../../utils/handleConfirm';
import getBaseQuery from '../../../utils/getBaseQuery';
import setSortQuery from '../../../utils/setSortQuery';
import handleError from '../../../utils/handleError';
import injectProto from '../../../utils/injectProto';
import injectApi from '../../../utils/injectApi';
import querySchema from './querySchema';
import genColumns from './genColumns';

Although using relative path references in this way is It is a relatively common approach, but in medium and large projects, when a lot of components are introduced, it is extremely painful to write.

Of course, we can configure certain file directories as fixed imports by using resolve.alias in webpack to configure aliases.

For example, in the above example, we can set the utils folder as a utils alias. In the future, we can only import utils without writing a bunch of ../../../.

The configuration settings are as follows:

const path = require('path');

module.exports = {
 ...
 resolve: {
  alias: {
   'utils': path.resolve(__dirname, '../src/utils'),
  }
 },
 ...
};

After the top example has been rewritten, it should look like this:

import genFetchEntryListArgs from '../../../utils/table/genFetchEntryListArgs';
import { parseQuery, stringifyQuery } from 'utils/query';
import mapMyToProps from 'utils/connect/mapMyToProps';
import genPagination from 'utils/table/pagination';
import handleConfirm from 'utils/handleConfirm';
import getBaseQuery from 'utils/getBaseQuery';
import setSortQuery from 'utils/setSortQuery';
import handleError from 'utils/handleError';
import injectProto from 'utils/injectProto';
import injectApi from 'utils/injectApi';
import querySchema from './querySchema';
import genColumns from './genColumns';

Related recommendations:

php Several methods to obtain the physical path of the website root directory (recommended) Tips

The above is the detailed content of Detailed explanation of React's use of referencing component instances relative to the root directory. For more information, please follow other related articles on the PHP Chinese website!