Only render specific component in a big react project

Question

In my React project which the file structure like below:

| src --- index.js --- | first --- | --- first.jsx --- | second --- | --- second.jsx

When 'npm start' the React project it will start from the index.js and render the first.jsx and second. jsx. But How can I only show second.jsx Component.

Maybe this sounds very simple, however if you really in a big React project with billions of lines of code, I guess that is not easy.

Answer 1

Try dynamic import :

Before:

import { add } from './math';

console.log(add(16, 26));

After:

import("./math").then(math => {
  console.log(math.add(16, 26));
});

That way you can dynamically load only those files that are needed.