Solving the Can't Use Three Dots to Import in ReactJS Problem

Описание: Discover how to properly import components in ReactJS when navigating file structures. Learn about using relative paths effectively!
---
This video is based on the question https://stackoverflow.com/q/73105775/ asked by the user 'Zombani' ( https://stackoverflow.com/u/17580837/ ) and on the answer https://stackoverflow.com/a/73105884/ provided by the user 'mustafa-hsz' ( https://stackoverflow.com/u/8845116/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Can't use three dots to import in Reactjs?

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Understanding Importing Components in ReactJS

When working with ReactJS, one common task developers encounter is importing components from various files and folders. Understanding how to properly structure these imports is crucial for maintaining a clean and efficient codebase. However, many developers, especially those newer to the framework, often stumble upon the issue of using multiple dots in paths to navigate through their project directories.

The Import Dilemma

Imagine you're trying to import a component from a directory that isn't directly adjacent to your current file. You might think to use three dots (...) in the import statement, such as:

[[See Video to Reveal this Text or Code Snippet]]

However, this approach leads to confusion and errors since ... is not a valid way to reference parent directories within file paths in JavaScript. So how do you actually navigate to further directories in your file structure?

The Solution: Using Double Dots

The key to solving the issue lies in understanding that you should use two dots (..) twice to go up two levels in your directory structure. Here’s how to do it correctly:

Step-by-Step Instructions

Navigate Up from Your Current Directory:
If you are in a folder and want to reference a file that is not immediately adjacent, you’ll need to use the relative path accurately. Each pair of dots (..) represents moving one level up in the hierarchy.

Constructing the Path:
If you want to import a component as follows:

[[See Video to Reveal this Text or Code Snippet]]

Here, .. moves up one level, and by using it twice (../../), you move up two levels. From there, you can navigate down into anotherComponent to reach component.js.

Example Context

Let’s put this into context with an example. Assuming your project structure is as follows:

[[See Video to Reveal this Text or Code Snippet]]

In this case, to import component.js from YourComponent.js, you would write:

[[See Video to Reveal this Text or Code Snippet]]

Conclusion

While it might seem a bit tricky at first, navigating file paths in ReactJS is straightforward once you get the hang of it. Always remember:

Use .. to move up one directory level.

Combine .. as needed to navigate to the required directory.

By following these guidelines, you can efficiently structure your imports and maintain clarity in your code. No need for three dots; two will do the trick perfectly!

For any additional tips or questions on ReactJS or coding practices, feel free to reach out or leave a comment below!