How to Reduce import from react - javascript

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();

Related

Is the JavaScript import statement used only to import frameworks?

Is the JavaScript import statement only used to import frameworks, or can it be used to import other things? What other things can it be used to import?
You can import variables, objects and basically anything as long as it's JavaScript. Note that frameworks usually export an object.
// file.js
export const a = 30;
// default.js
const object = { a: (param) => doSomething(param), ... };
export default object;
// main.js
import { a } from "file.js"; // console.log(a) -> 30
import Whatever from "default.js"; // import and name the default export

Vue multiple components in one package/file

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

react js unexpected token export on export{default as Cards}

on my freshly installed app i try to import my components like this:
import {Cards , Chart , CountryPicker} from '../components'
and i made an index.js directory:
export {default as Cards} from './Cards/Cards'
export {default as Chart} from './Chart/Chart'
export {default as CountryPicker} from './CountryPicker/CountryPicker'
but it return error :Uncaught SyntaxError: Unexpected token 'export'.
i am doing this trying to copy a tutorial and it looks like it works for the tutor but not me!
This is the basic format for Reactjs.
for more you can Basic example here
//Card
import React from 'react';
const Card = (props) => {
return (
// JSX code
)
}
export default Card;
//Chart
import React from 'react';
const Chart = (props) => {
return (
// JSX code
)
}
export default Chart;
//CountryPicker
import React from 'react';
const CountryPicker = (props) => {
return (
// JSX code
)
}
export default CountryPicker;
//index.JSX
import {Card} from './component/Card';
import {Chart} from './component/Chart';
import {CountryPicker} from './component/CountryPicker';
I think you should first define the components individually and each component should be exported at the bottom of the definition page like so...
import React from "react"
const Cards = () => {
//Helper functions here
return (
//Jsx here
)
}
export default Cards
And then you can now import this component in your App.js component based on the relative path like so...
import Cards from "./components/Cards/Cards";
This is assuming Cards is 2 folders deep from your home directory.
the problem was that i have not put my component folder inside the src folder. hence webpack did nothing about it and it was interpreted as a raw js file which resulted in the error. moving it to the src folder did the trick!

is it possible to destrucure my import statements

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>'

Error when importing local component file into my LoginForm component

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!

Categories