Friday, May 17, 2024
 Popular · Latest · Hot · Upcoming
63
rated 0 times [  68] [ 5]  / answers: 1 / hits: 18321  / 6 Years ago, sat, november 3, 2018, 12:00:00

I am wondering if I import a function from another file, am I also importing all the files that is imported in the file of the function? For example:



auth.js



import React from 'react';
import { AsyncStorage, View, Text, ScrollView, ... } from 'react-native';
import ModuleA from './modules/ModuleA';
import ModuleB from './modules/ModuleB';
import Module99 from './modules/Module99;

export const function1 = () => {
{/* some function using ModuleA */}
}

export const function2 = (param) => {
if(something)
{/* some function using Module99 */}
else
{/* some function using ModuleB */}
}


Screen.js



import React from 'react';
import { function2 } from '../auth';

export default class Screen extends React.Component {
{/* use function2 in some function or render */
}


My question is, when I import function2 from auth.js, am I importing all the modules and other files that is imported in auth.js? Or am I just importing the module that will be used by function2.



Also, function2 will use different module depending on the param, by calling function2 from my Screen, will my Screen also import all modules, or just Module99 and moduleB, or just the specific module inside the if else statement?



I have read a lot of the documentations on how importing works in react native but still couldn't really understand the flow.
Thank you for all answers.


More From » reactjs

 Answers
42

By doing this import function2 from '../auth'; you are importing nothing as its not default export. Also no modules will automatically be imported in screen.js.
You will have to import explicitly the modules(ModuleA, ModuleB ets) if you also need to use in screen.js



If you want to use function2 in screen.js the you need to import it like this



import { function2 } from '../auth';


You can also use import * as fromAuth from '../auth'; to import all



Usage: fromAuth.function2()



Import without curly braces {} is used for importing defaults.(which has been exported using default keyword)



There are 4 types of exports:




  • Named exports (several per module)

  • Default exports (one per module)

  • Mixed named & default exports

  • Cyclical Dependencies



Here are some Import examples from MDN



import defaultExport from module-name;
import * as name from module-name;
import { export } from module-name;
import { export as alias } from module-name;
import { export1 , export2 } from module-name;


Find more details here


[#53182] Tuesday, October 30, 2018, 6 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
victorr

Total Points: 193
Total Questions: 86
Total Answers: 105

Location: Pitcairn Islands
Member since Thu, Jun 24, 2021
3 Years ago
victorr questions
Fri, Nov 13, 20, 00:00, 4 Years ago
Sat, Jul 25, 20, 00:00, 4 Years ago
Thu, Jun 11, 20, 00:00, 4 Years ago
;