`export default`: Your Guide to Exporting Single Values in JavaScript

• Exports and Imports: JavaScript modules allow you to organize code into reusable units. You can use export to make parts of your module available to other modules, and import to bring those exported parts into your module for use.
• export default Syntax: This syntax lets you export a single value (function, class, object, or primitive value) as the default export from a module. There can only be one default export per module.

Example:

// myModule.js
export default function greet(name) {
  return `Hello, ${name}!`;
}

In this example, the greet function is exported as the default export from myModule.js.

Importing the Default Export:

In another module, you can import the default export using a simple import statement without curly braces:

// anotherModule.js
import greetingFunction from './myModule.js';  // No curly braces needed

const message = greetingFunction('Alice');
console.log(message); // Output: "Hello, Alice!"

Key Points:

• You can give any name to the variable that stores the imported value in the importing module. Here, greetingFunction is used.
• There can only be one default export per module.
• Default exports are convenient when you only need to export a single value from a module.

In React.js:

• Exporting React Components: export default is commonly used to export React components as the default export from a component file. This makes the component the primary export of the file.
• Importing React Components: You import the default export from a React component file using a similar syntax:

// MyComponent.jsx
import MyComponent from './MyComponent.jsx';  // Assuming the component is in the same directory

function App() {
  return <MyComponent />;
}

Benefits:

• Clarity: Using export default clearly indicates the main component or value exported from a React component file.
• Conciseness: The import syntax is simpler for default exports.

Remember:

• While you can have multiple named exports (using export with names) alongside a default export, a module can only have one default export.
• Choose export default when you want to export a single, core value from a module, promoting code organization and reusability.

Example Codes for export default in JavaScript and React.js

JavaScript:

Exporting a Function:

// myMathModule.js

// Function to calculate the area of a circle
export default function calculateArea(radius) {
  return Math.PI * radius * radius;
}

Exporting a Class:

// Person.js

export default class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    console.log(`Hello, my name is ${this.name}!`);
  }
}

Importing and Using:

// main.js
import calculateArea from './myMathModule.js';  // Import default function
import Person from './Person.js';  // Import default class

const circleArea = calculateArea(5);
console.log(`Area of the circle: ${circleArea}`);  // Output: Area of the circle: 78.53981633974483

const john = new Person('John', 30);
john.greet();  // Output: Hello, my name is John!

Exporting a React Component:

// Greeting.jsx

import React from 'react';

export default function Greeting(props) {
  const { name } = props;
  return (
    <h1>Hello, {name}!</h1>
  );
}

Importing and Using the Component:

// App.jsx
import React from 'react';
import Greeting from './Greeting.jsx';

function App() {
  return (
    <div>
      <Greeting name="Alice" />
      <Greeting name="Bob" />
    </div>
  );
}

export default App;  // We can also export the App component itself

1. Named Exports:

   • Use export followed by a name to create named exports:

   // myModule.js
   export function greet(name) {
     return `Hello, ${name}!`;
   }
   
   export const PI = Math.PI;
   

   • Import using curly braces and specifying the names:

   // anotherModule.js
   import { greet, PI } from './myModule.js';
   
   const message = greet('Bob');
   console.log(message); // Output: "Hello, Bob!"
   console.log(PI); // Output: 3.14159...
   

2. Export All:

1. • Export components or constants with names:

   // MyComponent.jsx
   import React from 'react';
   
   export const MyComponent = () => (
     <div>This is MyComponent!</div>
   );
   
   export const AnotherComponent = () => (
     <p>This is AnotherComponent!</p>
   );
   

   // App.jsx
   import React from 'react';
   import { MyComponent, AnotherComponent } from './MyComponent.jsx';
   
   function App() {
     return (
       <div>
         <MyComponent />
         <AnotherComponent />
       </div>
     );
   }
   

2. Default Export with Named Exports:

   • Combine a default export with named exports in the same file:

   // MyComponent.jsx
   import React from 'react';
   
   export default function MyComponent() {
     return <div>This is MyComponent (default)!</div>;
   }
   
   export const AnotherComponent = () => (
     <p>This is AnotherComponent!</p>
   );
   

   • Import the default export without curly braces and named exports with curly braces:

   // App.jsx
   import React from 'react';
   import MyComponent from './MyComponent.jsx';
   import { AnotherComponent } from './MyComponent.jsx';
   
   function App() {
     return (
       <div>
         <MyComponent />  {/* Uses default export */}
         <AnotherComponent />  {/* Uses named export */}
       </div>
     );
   }