I'm quite new to react and am having some troubles with this basic problem.
From HomeLander.js - How can I import a Button, and a P? They are, as expected, not in the same scope. Is there a neat way to do this?
My directories are structured in this way:
Components/
Button/
index.js
P/
index.js
Containers/
HomeLander/
index.js
Index.js ("Main" JS file)
you can try this
import Button from '../../Components/Button'; (given Button component is default export)
import { Button } from '../../Components/Button'; (if Button component is not default export)
Same way with 'P'
Related
I have a large codebase where Material UI with it's JSS are being used.
jss/
a.js Default or named export `astyle`
b.js Default or named export `bstyle`
index.js - Re-exports the JSS
All other files import like import { astyle } from './jss'
ComponentA.jsx - contains `import { astyle } from './jss'`
ComponentB.jsx - contains `import { bstyle } from './jss'`
App.jsx - imports ComponentA and ComponentB
Updating a.js causes ComponentB to re-render as well, is there any way I can tell webpack to not reload the entire jss/index.js?
Components work fine
componets/
ComponentC.jsx - default or named export
ComponentD.jsx - default or named export
index.js - Re-exports the components
App.jsx - import { ComponentC, ComponentD } from './components'
Updating ComponentC will not re-render ComponentD or components/index.js
I'm looking for the least disruptive solution and would prefer not to import all the styles directly by file name getting rid of the jss/index.js
Here is the demo repo and is based on the example from the fast refresh repo here
Turns out simply upgrading to webpack 5 fixes it, you can view the updated repo at this branch
My project looks something like this
/src
/components
/Homepage
Homepage.js.
App.js
index.css
index.js
I want to import Homepage.js to App.js. I did
import About from './Components/./Homepage/Homepage'; but it doesn't work. Any ideas on how I should import it correctly
So if you would like to import Homepage.js to App.js, correct your import statement as below
import About from './components/Homepage/Homepage'
There is a small typo in your import statement which is failing. :)
I would suggest using VSCode, it helps a lot.
Make sure you have export default About in your Homepage.js, then you can use import About from './components/Homepage/Homepage'; in App.js
If you just use export About, then you can use import { About } from './components/Homepage/Homepage'; in App.js.
Make sure you exported the object or function.
Use the correct import path
I have many components in a components folder. How can I import
them in one line?
For example I have this:
import FormField from "./../components/FormField";
import MultiSelect from "./../components/MultiSelect";
but I want to import it like this:
import {MultiSelect, FormField} from "./../components";
which is not working.
To do like this:
import { MultiSelect, FormField } from "./../components";
In your components folder, create new file: index.js with
export { default as FormField } from './FormField';
export { default as MultiSelect} from './MultiSelect';
Just make index.js in components folder
export * from './FormField';
export * from './MultiSelect';
After this you can easily access.
import {MultiSelect,FormField} from "./../components";
Add index.js in components folder having:
export { default as FormField } from './FormField';
export { default as MultiSelect } from './MultiSelect';
Then in the file where you want to use these components, import them using:
import { MultiSelect,FormField } from "./../components";
There is already an answer for your question. But let me add my 5 cents:
First:
you may import like this: from "../components"; instead of from "./../components";
Second:
I have some experience with imports and I have found out that import {MultiSelect, FormField} from "./../components"; has a lot of pitfalls. You need to create index.js fiels. When you will search MultiSelect uses within your IDE you will always have index.js and that isn't useful. Also if you'll decide to move your file you will have to change 3 files instead of 1 (old index.js new index.js and file that used your MultiSelect).
Is it worth it? It's up too you of course! But now you know what problems you may have :)
I want to do this
in src/modules/layout/nav.js
...
export default NavBar;
in src/modules/layout/side.js
...
export default sideBar;
in src/modules/layout/index.js
import NavBar from './nav';
import sideBar from './side';
export { NavBar, sideBar };
in src/modules/index.js
import * from './layout';
The last bit does not work. According to the tutorial I would then be able to go to src/App.js and use the navBar as so:
import {navBar} from './modules';
But the fact that * does not work I can't do that. Is there any alternative without having to go like this
in src/modules/index.js
import * as All from './layout';
export All;
Then in App.js, go All.navBar. That feels ugly
Well, I have gone through what you have; I feel what you actually needed is to understand the reason for doing that. I am pretty sure what you want to achieve is to have your components imported from a single file rather than from the files where the components were exported.
You don't want to do this:
import NavBar from 'src/modules/layout/NavBar';
import SideBar from 'src/modules/layout/SideBar';
But what you want is to import all your components from a single file wherever you would want to use them.
So, if that is the case, you don't need to add more complexities. All you just need to do is:
// export the components like this
export default NavBar;
export default SideBar;
// Then, in your src/modules/layout/index.js file, import // the components you exported just the way you did it
import NavBar from './NavBar';
import SideBar from './SideBar';
export {
NavBar,
SideBar
}
// Hence, wherever you need both components, you can easily do this:
import { NavBar, SideBar } from '../index.js'
// From the above, you are just importing both components from the index.js file.
So, I believe that answers your question.
Just to add to Onyekachi Samuel's answer and to answer the all part of the title:
After creating the src/modules/layout/index.js file as he described, you can import all by:
import * as All from './layout'
And use the exported components:
<All.NavBar/> <All.SideBar/>
For instance:
// Folder structure:
// |-App.js
// |-Layout
// |-NavBar.js
// |-SideBar.js
// |-index.js
// App.js in the same location as Layout folder
import React from 'react';
import * as All from './layout'
export default function App(props) {
return (<div>
<All.NavBar/>
<All.SideBar/>
</div>)
}
Hope this might clarify it for some.
Im currently creating a UI library for my react native project.
The components are separated into its own files like: Button, TextBox, Panel etc etc
So when i want to use them I do:
import Button from '../UI/button';
import TextBox from '../UI/textBox';
But how could I impletement the following call instead? Not needing to do import statetments for each specific component.
import { Button,TextBox, SomeOtherComp } from '../UI/??';
This would save a lot of typing when I want to use multiple components...
Create a file called index.js
The purpose of this file is to simple expose all available components from your library
import Button from './button';
import TextBox from './textBox';
...
module.exports = {
Button,
TextBox,
...
};
In the code that consumes your UI library, you can now import the components like this:
import { Button, TextBox, SomeOtherComp } from '../UI';
When you import a folder name, the packages will look for an index.js file and import that.
It is possible to re-export modules directly without writing duplicate code for importing and exporting:
// UI.js
export { default as Button } from './button';
export { default as TextBox } from './textBox';
Usage:
import { Button, TextBox } from './UI';