❮ Previous

Modules

  • This lesson introduces JavaScript modules and teaches how to use import and export to organize and reuse code in React projects.

  • Modules allow JavaScript code to be split into multiple files.

    Makes code:

    • Organized

    • Reusable

    • Maintainable

    ES6 Modules

    ES6 introduced import and export for modules.

    React uses ES6 modules by default.

    import and export Statements

    Export:

export const greet = () => {
  return "Hello";
};
  • Import:

import { greet } from "./greet";

  • Default vs Named Exports

    Named Export

export const add = () => {};

import { add } from "./file";
  • Default Export

export default function App() {}

import App from "./App";

  • Difference Table:

    Feature

    Named Export

    Default Export

    Multiple Allowed

    Yes

    No

    Import Braces

    Required

    Not Required

    Final Summary 

    • React uses modern JavaScript

    • ES6 features are essential

    • Array methods are heavily used

    • Modules help organize code

    • Understanding JS makes React easy

❮ Previous