• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

134
Views
How JavaScript import works when a folder path is given?

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
about 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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.

about 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error