Develop Reference

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 to import a CSS file in a React Component on Electron

I have seen that it is used
import React from 'react';
import './cssName.css';
but it does not work for me, I am working on the electron app and add react as shown here
https://reactjs.org/docs/add-react-to-a-website.html

It is not working because you do not have a build process set up. You will need to setup webpack or something like that to be able to import css.
I suggest you read this article: https://flaviocopes.com/react-electron/.

Does React import the same package multiple times?

I have a short question:
In React we import the React Component for every component:
import React from 'react'
Does this mean if I have a screen that uses several subcomponents (which also import React each time), does the React package get imported several times?
So basically:
1 Screen with 4 subcomponents = 5 x React package loaded = 5 times the react memory used
or
1 Screen with 4 subcomponents= 1x React package loaded
Or does it only import the react package once and then access it when it's needed again?

Or does it only import the react package once and then access it when it's needed again?
Basically yes. Your build tool / bundler (i.e. webpack) will take the packages you've imported throughout the app and include them in your build. It will recognize that these are the same package and import it only once.

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.

Compiling and serving React components individually

We are using Laravel Mix to compile react components and serve them individually to the respective pages where they are needed - It's not a SPA.
I'm new to React, so excuse my ignorance. I'm trying to get my head around the current setup and find out if it's the proper way of having multiple components in the same page.
So the boilerplate below has been copied and pasted in every component, only changing the selector, e.g.:
'use strict'
import React from 'react'
import ReactDOM from 'react-dom'
import {Provider} from 'react-redux'
import {createStore, applyMiddleware, compose} from 'redux'
import ReduxPromise from 'redux-promise'
import App from './containers/App'
import reducers from './reducers'
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose
const enhancer = composeEnhancers(
applyMiddleware(ReduxPromise),
)
const newstore = createStore(reducers, enhancer)
ReactDOM.render(
<Provider store={newstore}>
<App />
</Provider>, document.querySelector('.component-foo')
)
Some components also differ slightly in how the store is created, e.g. redux devtools is not always present.
So, coming from Vue.js, that doesn't make much sense to me - in Vue.js you'd use a single file to import everything related to the framework and then load each component you need with a single line of code. But this React setup seems to be doing quite the opposite: loading a separate instance of React and Redux for every component in the page, as if I had multiple root/app components in Vue.js.
Is it right to assume React is being bundled and booted multiple times and would that be the proper way to do things?

You're almost certainly doing this wrong. Yes, its very likely you are bundling and booting React multiple times, but no that is not the proper way to do things. It seems you are trying to use the Vue paradigm to do this but with code copied from a React SPA which is why you are building this monstrosity.
May I suggest checking basic react+laravel tutorials before you proceed? simple google search showed this: https://code.tutsplus.com/tutorials/build-a-react-app-with-laravel-backend-part-2-react--cms-29443 and I'm sure there are many others.
Since you are new to react, avoid redux for now and just get familiar with putting up react with multiple components. only then add the redux state management IF YOU NEED IT.