Simplify React Components Import - reactjs

I try to simplify my Components import, from:
import Component1 from './components/Component1'
import Component2 from './components/Component2'
To something like that:
import {Component1, Component2} from './components/'
I have tried to create an index.js file into components directory (following this post import modules from files in directory):
export * from 'Component1';
export * from 'Component2';
But I still have a "Module not found" error.
Any clue ?
Thanks,
Orb

You need to add a dot to indicate it is a local file, not an npm-published module. Change your exports line like so
export * from './Component1';
UPD
To resolve next issue with named import you need to give a name to default export from Component1.js file
export Component1 from './Component1';
Follow this answer

Are you sure the path is correct?
Try to specify the absolute path like:
import Component1 from '/home/your_username/components/Component1'
import Component2 from '/home/your_username/components/Component2'
You can see the correct path of your directory from terminal with the command "pwd".
Be sure to have the access to the directory and file.
You can try to run the program as root.

While exporting components from your Component1 and Component2 instead of *, you should export it as objects -
//In Component1.js(x)
export { Component1 };
and
//In Component2.js(x)
export { Component2 };
With this you should be able to import like:
import { Component1 } from '...';
import { Component2 } from '...';

Yeah I do the same thing with my imports and it's a lot nicer when they are being exported from the same file. Here's an example of how I achieve this:
components/index.js
import Component1 from './Component1';
import Component2 from './Component2';
module.exports = {
Component1,
Component2
};
Then to import them
import { Component1, Component2 } from './components';
If you are using Webpack, check out webpack resolve to get rid of your relative paths.
Example using Webpack resolve
//Will work at any nested level
import { Component1, Component2 } from 'components';
And just for clarification, Component1 and Component2 should be using a default export
export default class Component1 extends React.Component {...}
or
var Component1 = createReactClass({...});
module.exports = Component1;

Related

How to use import statement in react?

how to use import statement to import functions from one component to other component.
Below is how the import statement is:
import Tool from '../Common';
import { ToolContextProvider } from '../Common';
This complaint of duplicate lines. So I have tried something like below,
import { ToolContextProvider, Tool} from '../Common';
But this doesn't seem to be correct. How can write this in one line.
Could someone help me with this? Thanks.
basically there are two different type of export in javascript modules (also react included):
default export
named export
default export would be like :
// someFile.js
export default SomeComponent
named export would be like
// someFile.js
export SomeOtherComponent
importing them in other components for using them should be like:
// useCase.js
import SomeComponent from './someFile' // for default export
import { SomeOtherComponent } from './someFile' // for named export
import SomeComponent, { SomeOtherComponent } from './someFile' // for using both
You can import like this. Just combine both of them.
import Tool, { ToolContextProvider } from '../Common';

How to import multiple components from one general folder?

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 :)

Receiving "Attempted import error:" in react app

I am receiving the following error when trying to run my React app:
./src/components/App/App.js
Attempted import error: 'combineReducers'
is not exported from '../../store/reducers/'.
Here's how I'm exporting combineReducers:
import { combineReducers } from 'redux';
import userReducers from './userReducers';
import articleReducers from './articleReducers';
export default combineReducers({
userReducers,
articleReducers
});
and here's how I'm importing it in App.js:
import { combineReducers } from '../../store/reducers';
What's incorrect in how I'm exporting combineReducers?
import { combineReducers } from '../../store/reducers';
should be
import combineReducers from '../../store/reducers';
since it's a default export, and not a named export.
There's a good breakdown of the differences between the two here.
i had the same issue, but I just typed export on top and erased the default one on the bottom. Scroll down and check the comments.
import React, { Component } from "react";
export class Counter extends Component { // type this
export default Counter; // this is eliminated
I guess I am coming late, but this info might be useful to anyone I found out something, which might be simple but important.
if you use export on a function directly i.e
export const addPost = (id) =>{
...
}
Note while importing you need to wrap it in curly braces
i.e. import {addPost} from '../URL';
But when using export default i.e
const addPost = (id) =>{
...
}
export default addPost,
Then you can import without curly braces i.e.
import addPost from '../url';
export default addPost
I hope this helps anyone who got confused as me. 🙂
This is another option:
export default function Counter() {
}
Take into consideration that if you are using a named export you don't need curly brackets:
export const Component
->
import {ComponentName}
Only the default exported component be imported with curly brackets:
export default
->
import ComponentName
Maybe i'm late too but i had a similar problem with folders inside of component folder. i changed the folder's name with Capital letter. it worked for me.
If changing the import doesn't help maybe you just need to run yarn install or npm install (or whatever you're using) and restart your server. Worked for me.
Be sure to Capitalize the name of the constant variable you're exporting inside the component. When you Import the component elsewhere you should also check that its first letter is capitalized since this is one of the ways React uses to identify its components.
inside component:
import React from 'react';
export const Component = (props) => (...)
And then, when importing:
import {Component} from '../location/file'
Consider checking for any file renamings that git hasn't been instructed to track with git mv

How to import all components in React?

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.

Export react jsx-components in index.js files

How can I bundle react-components, defined in jsx-files, in an index.js file?
In a way that the components can be accessed by import module from "/module"; let C = module.Component;.
With:
/module
index.js
Component.jsx
To re-export the component as a default export:
export { default } from './Component';
To re-export the component as a named export:
export { default as NamedComponent } from './Component';
You should prefer exporting as default from index.js since it will likely be the only export from the index.
Your component import will look like this:
import Component from './module';
or this, if you use a named export:
import { NamedComponent } from './module';
Assuming you're using webpack to bundle your files, to make sure your imports can use './Component' instead of './Component.jsx', include .jsx as an extension in your resolve property in webpack.config.js:
module.exports = {
resolve: {
extensions: ['.js', '.jsx'],
},
};
export Component from "./Component"
You should not use export default for your use case. There is only a single default export per module. This value is to be considered as the "main" exported value since it will be the simplest to import. Refer https://developer.mozilla.org/en/docs/web/javascript/reference/statements/export for more detail
Inside index.js
export { default as ComponentName } from './Component';
Then In App.js [Import it Like this]
import {ComponentName} from './module'

Resources