How React uses reference components relative to the root directory to explain detailed explanation

Preface

This article mainly introduces the relevant content about React's reference components relative to the root directory. It is shared for your reference and learning. I won't say much below, let's take a look at the detailed introduction together.

References like the following are often made to components you develop:

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 it is a common practice to use relative path references in this way, it is extremely painful to write when there are many components introduced in medium and large projects.

Of course, we can use theConfigure alias, configuring certain file directories to be fixedly introduced.

For example, in the example above, we can set the utils folder to a utils alias, and in the future, we can just introduce utils without writing a ../../../../.

The configuration settings are as follows:

const path = require('path');

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

After the above example has been rewritten, it should be 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';

Summarize

The above is the entire content of this article. I hope that the content of this article has certain reference value for everyone's study or work. If you have any questions, you can leave a message to communicate. Thank you for your support.