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".
Related
In the svelte example app there are imports like this:
import './app.css'
import svelteLogo from './assets/svelte.svg'
I could not find an explanation on the official documentation.
I am guessing that this is a svelte and not a js feature?
Which files can you import? And how do they get imported, e.g. import './app.css' applies the stylesheet and import svelteLogo from './assets/svelte.svg' appears to save the path in svelteLogo.
I searched "Svelte Import Files other than JavaScript", "js import files" and searched on https://svelte.dev/docs.
It has nothing to do with Svelte or JS, it's something build tools provide.
Common types may be supported out of the box while others require plugins/loaders.
SvelteKit e.g. uses Vite but there are others like Webpack or Parcel.
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.
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/.
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.
I have a files structure issue that I am trying to fix when referencing components into other components as imports.
The current files setup I have looks like this...
I am working on the file called security_passphrase.vue and within that file I reference 2 files to import as I need to use them there.
import dropdown from '../components/vue_form/dropdown.vue'
import formbutton from '../components/vue_form/form_button.vue'
The compiler cannot find the modules I am trying to load.
Error: Cannot find module '../../components/vue_form/dropdown.vue' from 'C:\wamp64\www\merchant-backend-new\merchant-backend\resources\assets\js\components\vue_form\concertina_form'
Error: Cannot find module '../../components/vue_form/form_button.vue'
from
'C:\wamp64\www\merchant-backend-new\merchant-backend\resources\assets\js\components\vue_form\concertina_form'
I have tried different ways to make this work but no success. The files I am trying to import are outside of the folder where the file is I am working with.
/concertina_form/security_passphrase.vue /vue_form/form_button.vue
/vue_form/dropdown.vue
Help will be great :)
import dropdown from '../dropdown.vue'
import formbutton from '../form_button.vue'
Should be the correct way to import these files, using ../ goes down one directory which will take you from the concertina_form directory to the vue_form directory.