Mamun Labs Learn
JourneyGlossary
esc
  • Try “map”, “flexbox” or “state”.
Log in
Start learning
Phase 3 · 3 / 7Modules and npm
Phase 3JavaScript for real apps
7 topics · 3–4 wks
  1. 1Arrow functions
  2. 2Destructuring and spread
  3. 3Modules and npm
  4. 4Events and handlers
  5. 5Promises and await
  6. 6Fetching real data
  7. 7Loading and error states
JourneyPhase 3Modules and npm
01 / 09Overview

Modules and npm

You'll learn to split code into files with export and import, and to add other people's code with npm.

Why it mattersEvery React Native file starts with import lines. An Expo app is your files plus packages from npm.
about 75 min·needs: Functions in, values out, The terminal, step by step, Set up VS Code and Node
02 / 09

Watch & read

Start with the required ones. The others are there when you need them.

Article
Modules, introductionjavascript.info · 10 min · English
MMamun's noteRead "What is a module?" and "Module-level scope". The browser-specific parts after that are not needed; Expo handles them for you.
Video
npm tutorial for beginnersYouTube · freeCodeCamp · 9 min · English
MMamun's noteWatch 0:00–8:44: what npm is, npm init, installing a package and using it. Skip the Browserify part after 8:44; you won't use it.
DocsOptional
Downloading and installing packages locallynpm Docs · 5 min · English
MMamun's noteThe official short page on npm install. Read "Installing an unscoped package" to see where packages go and how package.json is used.
VideoOptional
Modern JavaScript in Bangla #20: module imports and exportsYouTube · Learn with Sumit · 13 min · Bangla
MMamun's noteIn Bangla. Sumit shows named and default exports side by side. Watch it if the { } rule still feels random.
03 / 09

Explanation

Your app grows. One file with 2,000 lines is hard to read. You want to keep money code in one file and screen code in another, and use one from the other. Each file that shares code this way is a module.

Think of a kitchen. The spice box is kept in one place. Any cook who needs salt goes and takes it from there, instead of keeping their own salt in every pot.

A file chooses what to share with export. Another file takes it with import:

// money.js
export function formatTaka(amount) {
  return "Tk " + amount;
}
 
// app.js
import { formatTaka } from "./money.js";
console.log(formatTaka(500)); // Tk 500

There are two kinds of export. A named export (export function formatTaka) is imported with { } and the exact same name. A file can also have one export default. You import that one without { }, and you may give it any name: import App from "./App";.

People often mix these up. If the file says export default, write no { }. If it says export function or export const, use { } and match the name. The error you get is usually "does not provide an export named …".

Now look at where the import comes from. A path that starts with ./ or ../ is your own file. A bare name like "react" or "dayjs" is a package: code someone else wrote and shared.

Packages come from npm, a huge free library of JavaScript code. In the terminal, inside your project:

npm install dayjs

npm downloads the package into a folder called node_modules, and writes its name and version into package.json, your project's shopping list. You never edit node_modules and you don't put it on GitHub. Anyone who clones your project runs npm install once, and npm rebuilds it from package.json.

When you open a file, read the imports first. They tell you what the file uses and where each piece lives.

Words to recognise
moduleexportimportexport defaultnpmpackagepackage.jsonnode_modules
04 / 09

Code tour

Click a line number with a ring to read the note for that line.

script.js5 notes
1// money.js
export function formatTaka(amount) {
Mentor note · line 2
A named export. Other files can import it with { formatTaka }, using this exact name.
3 return "Tk " + amount;
4}
export default function addDelivery(price) {
6 return price + 60;
7}
8
9// app.js
import dayjs from "dayjs";
import addDelivery, { formatTaka } from "./money.js";
12
13console.log(formatTaka(addDelivery(200))); // Tk 260
console.log(dayjs().format("D MMM")); // today, like 19 Oct
05 / 09

Practice

Short drills. Take your time and read the code before you answer.

DrillPredict1 / 1
1// money.js
2export default function formatTaka(amount) {
3  return "Tk " + amount;
4}
5 
6// app.js
7import { formatTaka } from "./money.js";
8console.log(formatTaka(500));
Predict what happens
06 / 09

Quick check

3 questions. Each one explains itself after you answer.

  1. 1 / 3Which import comes from an npm package, not from your own file?
  2. 2 / 3money.js has export function formatTaka(...). Which import works?
  3. 3 / 3You clone a friend's project. It has package.json but no node_modules. What do you do?
07 / 09

Explain it back

Only you can see this. Log in to keep it.0 words
08 / 09

How confident are you with Modules and npm?

09 / 09

Done

You can now
Read the import lines at the top of a file and say which come from your own files and which come from npm packages.
Next: Events and handlers Back to Phase 3
On this page
  1. 01Modules and npm
  2. 02Watch & read
  3. 03Explanation
  4. 04Code tour
  5. 05Practice
  6. 06Quick check
  7. 07Explain it back
  8. 08Confidence
  9. 09Done
Up next · 02 / 09Watch & read
Mamun Labs LearnFound a mistake on this page? Tell Mamun.
Mamun Labs Learn
JourneyGlossary
esc
  • Try “map”, “flexbox” or “state”.
Log in
Start learning
Log in to save your progress. Everything here works without an account.Log in to save progressLog in
Phase 3JavaScript for real apps
7 topics · 3–4 wks
  1. 1Arrow functions
  2. 2Destructuring and spread
  3. 3Modules and npm
  4. 4Events and handlers
  5. 5Promises and await
  6. 6Fetching real data
  7. 7Loading and error states
JourneyPhase 3Modules and npm
01 / 09Overview

Modules and npm

You'll learn to split code into files with export and import, and to add other people's code with npm.

Why it mattersEvery React Native file starts with import lines. An Expo app is your files plus packages from npm.
about 75 min·needs: Functions in, values out, The terminal, step by step, Set up VS Code and Node
02 / 09

Watch & read

Start with the required ones. The others are there when you need them.

Article
Modules, introductionjavascript.info · 10 min · English
MMamun's noteRead "What is a module?" and "Module-level scope". The browser-specific parts after that are not needed; Expo handles them for you.
Video
npm tutorial for beginnersYouTube · freeCodeCamp · 9 min · English
MMamun's noteWatch 0:00–8:44: what npm is, npm init, installing a package and using it. Skip the Browserify part after 8:44; you won't use it.
DocsOptional
Downloading and installing packages locallynpm Docs · 5 min · English
MMamun's noteThe official short page on npm install. Read "Installing an unscoped package" to see where packages go and how package.json is used.
VideoOptional
Modern JavaScript in Bangla #20: module imports and exportsYouTube · Learn with Sumit · 13 min · Bangla
MMamun's noteIn Bangla. Sumit shows named and default exports side by side. Watch it if the { } rule still feels random.
03 / 09

Explanation

Your app grows. One file with 2,000 lines is hard to read. You want to keep money code in one file and screen code in another, and use one from the other. Each file that shares code this way is a module.

Think of a kitchen. The spice box is kept in one place. Any cook who needs salt goes and takes it from there, instead of keeping their own salt in every pot.

A file chooses what to share with export. Another file takes it with import:

// money.js
export function formatTaka(amount) {
  return "Tk " + amount;
}
 
// app.js
import { formatTaka } from "./money.js";
console.log(formatTaka(500)); // Tk 500

There are two kinds of export. A named export (export function formatTaka) is imported with { } and the exact same name. A file can also have one export default. You import that one without { }, and you may give it any name: import App from "./App";.

People often mix these up. If the file says export default, write no { }. If it says export function or export const, use { } and match the name. The error you get is usually "does not provide an export named …".

Now look at where the import comes from. A path that starts with ./ or ../ is your own file. A bare name like "react" or "dayjs" is a package: code someone else wrote and shared.

Packages come from npm, a huge free library of JavaScript code. In the terminal, inside your project:

npm install dayjs

npm downloads the package into a folder called node_modules, and writes its name and version into package.json, your project's shopping list. You never edit node_modules and you don't put it on GitHub. Anyone who clones your project runs npm install once, and npm rebuilds it from package.json.

When you open a file, read the imports first. They tell you what the file uses and where each piece lives.

Words to recognise
moduleexportimportexport defaultnpmpackagepackage.jsonnode_modules
04 / 09

Code tour

Click a line number with a ring to read the note for that line.

script.js5 notes
1// money.js
export function formatTaka(amount) {
Mentor note · line 2
A named export. Other files can import it with { formatTaka }, using this exact name.
3 return "Tk " + amount;
4}
export default function addDelivery(price) {
6 return price + 60;
7}
8
9// app.js
import dayjs from "dayjs";
import addDelivery, { formatTaka } from "./money.js";
12
13console.log(formatTaka(addDelivery(200))); // Tk 260
console.log(dayjs().format("D MMM")); // today, like 19 Oct
05 / 09

Practice

Short drills. Take your time and read the code before you answer.

DrillPredict1 / 1
1// money.js
2export default function formatTaka(amount) {
3  return "Tk " + amount;
4}
5 
6// app.js
7import { formatTaka } from "./money.js";
8console.log(formatTaka(500));
Predict what happens
06 / 09

Quick check

3 questions. Each one explains itself after you answer.

  1. 1 / 3Which import comes from an npm package, not from your own file?
  2. 2 / 3money.js has export function formatTaka(...). Which import works?
  3. 3 / 3You clone a friend's project. It has package.json but no node_modules. What do you do?
07 / 09

Explain it back

Only you can see this. Log in to keep it.0 words
08 / 09

How confident are you with Modules and npm?

09 / 09

Done

You can now
Read the import lines at the top of a file and say which come from your own files and which come from npm packages.
Next: Events and handlers Back to Phase 3
On this page
  1. 01Modules and npm
  2. 02Watch & read
  3. 03Explanation
  4. 04Code tour
  5. 05Practice
  6. 06Quick check
  7. 07Explain it back
  8. 08Confidence
  9. 09Done
Up next · 02 / 09Watch & read

Your app grows. One file with 2,000 lines is hard to read. You want to keep money code in one file and screen code in another, and use one from the other. Each file that shares code this way is a module.

Think of a kitchen. The spice box is kept in one place. Any cook who needs salt goes and takes it from there, instead of keeping their own salt in every pot.

A file chooses what to share with export. Another file takes it with import:

// money.js
export function formatTaka(amount) {
  return "Tk " + amount;
}
 
// app.js
import { formatTaka } from "./money.js";
console.log(formatTaka(500)); // Tk 500

There are two kinds of export. A named export (export function formatTaka) is imported with { } and the exact same name. A file can also have one export default. You import that one without { }, and you may give it any name: import App from "./App";.

People often mix these up. If the file says export default, write no { }. If it says export function or export const, use { } and match the name. The error you get is usually "does not provide an export named …".

Now look at where the import comes from. A path that starts with ./ or ../ is your own file. A bare name like "react" or "dayjs" is a package: code someone else wrote and shared.

Packages come from npm, a huge free library of JavaScript code. In the terminal, inside your project:

npm install dayjs

npm downloads the package into a folder called node_modules, and writes its name and version into package.json, your project's shopping list. You never edit node_modules and you don't put it on GitHub. Anyone who clones your project runs npm install once, and npm rebuilds it from package.json.

When you open a file, read the imports first. They tell you what the file uses and where each piece lives.

Words to recognise
moduleexportimportexport defaultnpmpackagepackage.jsonnode_modules

Your app grows. One file with 2,000 lines is hard to read. You want to keep money code in one file and screen code in another, and use one from the other. Each file that shares code this way is a module.

Think of a kitchen. The spice box is kept in one place. Any cook who needs salt goes and takes it from there, instead of keeping their own salt in every pot.

A file chooses what to share with export. Another file takes it with import:

// money.js
export function formatTaka(amount) {
  return "Tk " + amount;
}
 
// app.js
import { formatTaka } from "./money.js";
console.log(formatTaka(500)); // Tk 500

There are two kinds of export. A named export (export function formatTaka) is imported with { } and the exact same name. A file can also have one export default. You import that one without { }, and you may give it any name: import App from "./App";.

People often mix these up. If the file says export default, write no { }. If it says export function or export const, use { } and match the name. The error you get is usually "does not provide an export named …".

Now look at where the import comes from. A path that starts with ./ or ../ is your own file. A bare name like "react" or "dayjs" is a package: code someone else wrote and shared.

Packages come from npm, a huge free library of JavaScript code. In the terminal, inside your project:

npm install dayjs

npm downloads the package into a folder called node_modules, and writes its name and version into package.json, your project's shopping list. You never edit node_modules and you don't put it on GitHub. Anyone who clones your project runs npm install once, and npm rebuilds it from package.json.

When you open a file, read the imports first. They tell you what the file uses and where each piece lives.

Words to recognise
moduleexportimportexport defaultnpmpackagepackage.jsonnode_modules