Develop Reference

Creating File Template in Intellij with importing files relativly

I'm trying to build a file template for a react component for my team at work.
I have built the file template according to what Intellij offers, but I get stuck in one thing:
How can I import files into my file template, but without knowing where I am regarding the root folder?
We do use absolute imports so I do use it inside my component file, but it doesn't work in my test file and I have something that calls AppMock that mocks the behavior of our app, and I can't import absolute on it.
Any solutions will be welcomed, thanks
I tried to look for import files relatively in my file template but I couldn't find anything that matches to my problem
Here is an example of what I talk about:
import { render, screen } from '#testing-library/react';
import user from '#testing-library/user-event';
import React from 'react';
import { $NAME } from './${NAME}';
import { noop } from 'lodash'
import { AppMock } from '../../../../../../config/jest/testHelpers/AppMock';
As you can see, the imports are external libraries, except AppMock because we don't work with absolute imports in test files, and because of that I didn't find a way to create a file template for test file.

Importing many components

as you can see below my app.js file , because the website im coding contains numerous components, the importing part of the files is overwhelmingly has many lines , as a newbie to Reactjs i wanna ask if there is a more better and professional way to import all the components using less code. thanks
import Navbar from "./components/navbar/Navbar";
import Home from "./pages/Home";
import Socials from "./pages/Socials";
import ToolsServices from "./pages/ToolsServices";
import Marketplace from "./pages/Marketplace";
import NotFound from "./pages/NotFound";
import Locations from "./pages/Locations";
import CryptoIndex from "./pages/CryptoIndex";
import AllContextProviders from "./store/AllContextProviders";

Its pretty common to have multiple imports in this way. Generally in teams i've worked with we try to keen it in alphabetical order and also separate imports from node-modules to imports from src files.

Actually, I think that is common. I don't know what IDE you're using and WebStorm, the IDE I'm using, allows programmers to fold these "import lines".

How is this import working without any relative path?

This is the directory I'm working in:
Now, Auth.js is importing a component from components like this:
import AuthNavbar from "components/Navbars/AuthNavbar.js";
Should'nt it be
import AuthNavbar from "../components/Navbars/AuthNavbar.js";
How is that import even working?

This might be working because your webpack configuration most likely has an alias.

Importing class by class or the whole module, which one is the best?

I'm developing a ReactJS application, and I can import classes from a library in two ways. The first is using one import clause and specifying the classes I want in brackets:
import { makeStyles, CssBaseline, Box } from '#material-ui/core';
The second one is specifying each class in a different import clause:
import makeStyles from '#material-ui/core/makeStyles';
import CssBaseline from '#material-ui/core/CssBaseline';
import Box from '#material-ui/core/Box';
What's the difference between these two methods? Which one is best?

Straight from the docs:
For convenience, Material-UI exposes its full API on the top-level
material-ui import. If you're using ES6 modules and a bundler that
supports tree-shaking (webpack >= 2.x, parcel with a flag) you can
safely use named imports and expect only a minimal set of Material-UI
components in your bundle:
import { Button, TextField } from '#material-ui/core';
Be aware that tree-shaking is an optimization that is usually only
applied to production bundles. Development bundles will contain the
full library which can lead to slower startup times. This is
especially noticeable if you import from #material-ui/icons.
You can use path imports to avoid pulling in unused modules.
// 🚀 Fast
import Button from '#material-ui/core/Button';
https://material-ui.com/guides/minimizing-bundle-size/

In terms of functional difference, the two do exactly the same thing: they load in a specific component. However, the first method is more readable, concise, and (in my opinion) is more professional-looking.
If you have multiple components in a single file it's best practise to load components using the bracketed method. The second method you specified is best only used when you have a default component to export (i.e. you have export default component_name = ...) somewhere in the file.
It also stops you from having to specify a long list of file paths - especially useful if you're working on a bigger project and have hundreds of components!

The difference is the way the modules are imported:
In your first case :
import { makeStyles, CssBaseline, Box } from '#material-ui/core';
you're importing named imports from the material-ui/core package.
While in the second:
import makeStyles from '#material-ui/core/makeStyles';
import CssBaseline from '#material-ui/core/CssBaseline';
import Box from '#material-ui/core/Box';
you import default imports from individual packages.
Generally the only difference you might encounter is in the build process,
with individual packages you might avoid incorporating stuff you don't need,
but you could also risk duplicating some common assets between modules.
In your specific case, if you use a bundler with treeshaking capabilities(create-react-app should have webpack configured this way by default) and material-ui, it shouldn't make any difference.

how does import statement work in react without specifying the path information in import statement as module imports cannot have a bare path

A lot of examples use the syntax import React, { Component } from 'react'; to import React class which should be a default export in a module exported from a file with name react. However it is a rule that import statements need to have a path information like ./react in it and cannot be bare. Is webpack or some other library being used to make this work ?