Even after seeing sample React code online, I still couldn't understand the import
method.
In my entry point of "index.tsx", there is the following import statement; however, I can't find "App" or "ThemeProvider" in ./components
import { App, ThemeProvider } from './components';
But instead of this, when I see "components/index.ts" it says:
export * from './common';
export * from './pages';
export * from './layout';
Is there some logic behind this?? How/where is this import path defined? Does "components/index.ts" have some special way of working?
Here are my directory structures:
├── components
│ ├── common
│ ├── index.ts
│ ├── layout
│ └── pages
├── constants
│ ├── external-links.ts
│ ├── faq-entries.ts
│ ├── index.ts
│ └── page-size.ts
├── index.css
├── index.tsx
├── logo.svg
├── react-app-env.d.ts
├── setupProxy.js
└── types
├── faq.ts
├── index.ts
└── page.ts
When you do a
import { App, ThemeProvider } from './components';
and since you are not specifying a file, the resolver
looks automatically for a index.js
or index.ts
inside the folder (here in your case components).
Then this code :
export * from './common';
export * from './pages';
export * from './layout';
is exporting all your export
form the listed files.