i want to write below import in one single line. is it possible?
`import SellerAdaptor from '../adaptors/sellers';
import UserAdaptor from '../adaptors/user';
import ShopEarnAdaptor from '../adaptors/shop_earn';
import ProductAdaptor from '../adaptors/product';
import JobAdaptor from '../adaptors/job';
import OrderAdaptor from '../adaptors/order';
import NotificationAdaptor from '../adaptors/notification';
import CategoryAdaptor from '../adaptors/category';
import AdminAdaptor from '../adaptors/adminAdaptor';`
No.
Destructuring would let you import many values from one module.
You can't import multiple modules at once.
A typical pattern here would be to have an ../adaptors/index which imported all the modules and then exported them:
import SellerAdaptor from './sellers';
import UserAdaptor from './user';
// etc
export { SellerAdaptor, UserAdaptor, etc };
Then you would be able to:
import { SellerAdaptor, UserAdaptor, etc } from "../adaptors/index";
To be able to write import { A, B, C } from 'myPackage', it's upon myPackage and how it has been written.
If they are different files, you can't do it.
If you have one file adaptors that export the different modules, you can write your imports with the destructuring.
You can do like as follows:
import SellerAdaptor from '../adaptors/sellers';
import UserAdaptor from '../adaptors/user';
import ShopEarnAdaptor from '../adaptors/shop_earn';
import ProductAdaptor from '../adaptors/product';
import JobAdaptor from '../adaptors/job';
import OrderAdaptor from '../adaptors/order';
import NotificationAdaptor from '../adaptors/notification';
import CategoryAdaptor from '../adaptors/category';
import AdminAdaptor from '../adaptors/adminAdaptor';
export {
SellerAdaptor,
UserAdaptor,
ShopEarnAdaptor,
ProductAdaptor,
JobAdaptor,
OrderAdaptor,
NotificationAdaptor,
CategoryAdaptor,
AdminAdaptor
}
And Then You can Import like as follows
import { SellerAdaptor, UserAdaptor} from './<filename>'
Related
let's say i want to create a UI Package, how can I put multiple components into one single JS file?
Normally I would have my different components in different files:
import ButtonText from '../ButtonText.vue'
import ButtonIcon from '../ButtonIcon .vue'
import ButtonLayout from '../ButtonLayout.vue'
but I want to put all my Button components in a single file, for reuseability etc. so i can import things when I need them
import {ButtonText, ButtonIcon, ButtonLayout } from '../ButtonPackage.vue'
how would my ButtonPackage.vue/.js File look like?
In ButtonPackage.js file you import all components, and export them as an object.
import ButtonText from '../ButtonText.vue'
import ButtonIcon from '../ButtonIcon .vue'
import ButtonLayout from '../ButtonLayout.vue'
export {ButtonText, ButtonIcon, ButtonLayout }
Then in a component you import them as needed:
import { ButtonText } from '../ButtonPackage.js'
The key is to export all components in one file:
import ButtonText from "./ButtonText";
import ButtonIcon from "./ButtonIcon";
import ButtonLayout from "./ButtonLayout";
export { ButtonText, ButtonIcon, ButtonLayout };
So when you want to use any of them:
import {
ButtonText,
ButtonIcon,
ButtonLayout,
} from "./components/ButtonPackage";
Here is a demo I created:
https://codesandbox.io/s/crazy-oskar-gper1?fontsize=14&hidenavigation=1&theme=dark
I'm trying to reduce the amount of imports in my react files, I how do I group the imports so I can use the { } to get more then one from a file.
// assets
import location from "../../assets/home/header/location.svg";
import banner from "../../assets/home/header/banner.jpg";
import delivery from "../../assets/home/section-a/delivery.svg";
import arrow from "../../assets/home/section-b/arrow.svg";
import stock1 from "../../assets/home/section-c/stock-1.jpg";
import stock2 from "../../assets/home/section-c/stock-2.jpg";
import stock3 from "../../assets/home/section-c/stock-3.jpg";
// components
import IconList from "./IconList";
import Image from "../../components/Image";
import DisplayCard from "../../components/CardGroup/DisplayCard";
import ListDetail from "../../components/CardGroup/ListDetail";
import Slide from "../../components/Slide/index";
Images, SVG and those kind of files you cannot use named export the only way is to
import them one by one
You can use named export {} for example for multiple functions or variables in same file.
export const example = () => () ;
so you can after
import them like :
import {example, example2,example3} from "./examples";
or using the * to import all the export functions or variables
import * as Foo from "./examples";
const x = Foo.example();
I have import sources in my ts file
Here is it
import accounting from "accounting";
import { Feature } from "geojson";
import { GeoJsonProperties } from "geojson";
import { GeoJSONGeometry } from "mapbox-gl";
import Helpers from "../../common/helpers";
import { Layer } from "mapbox-gl";
import mapboxgl from "mapbox-gl";
import { Map } from "mapbox-gl";
import { Popup } from "mapbox-gl";
import { __ } from "../../common/translation";
But I have error in codacy
Import sources within a group must be alphabetized
I cannot understand why, because all already alphabetized?
How I can fix this?
As per this answer:
The filepaths are also used as part of the ordering...
These are the 'sources' being referenced in the error. You can disable this in your tslint.json file with the following rule:
"ordered-imports": false
I am new to react-native but I have successfully imported local files into another before and I am getting this error message:
Unable to resolve "./common" from "src/components/LoginForm.js"
I am using expo XDE for the first time as well if that provides any insight. This seems so simple but I can't seem to find if I have a typo.
Here is a screenshot of my project file structure:
These are my imports in LoginForm.js
import React, { Component } from 'react';
import { StyleSheet, View, Text } from 'react-native';
import { FormLabel, FormInput, FormValidationMessage } from 'react-native-elements';
import { Form, FormSection } from './common'; // what am i doing wrong with this????
These are my imports in App.js
import React from 'react';
import LoginForm from './src/components/LoginForm';
you have to create an index.js in your /common, Then export all of you components:
export * from "./Button";
export * from "./Card";
export * from "./CardSection";
export * from "./Header";
export * from "./Input";
export * from "./Spinner";
also be sure to export { YourComponentName }; in each file as well!
I have this simple import:
import {reducers as sharedStore} from "./components/shared";
and have this exports on the index.js file located in side the
./components/shared
folders.
this is index.js content:
import {combineReducers} from "redux";
export const reducers = combineReducers({selectAssetView, video:videoReducerComp });