Props And Named Default Exports In React Js

Named and Default Exports in React.js
In React JS, both named exports and default exports are used to make components, functions, or variables available for use in other modules. The key differences lie in their syntax and how they are imported

Default Export:-

Example test.js

const add = (a, b) => a + b;
export default add;   // default export

app.js

import myFunction from "./math.js";   // can use ANY name
console.log(myFunction(5, 3));  // 8

Named Export:-

Example test.js

export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

app.js

import { add, subtract } from "./math.js";

console.log(add(10, 5));        // 15
console.log(subtract(10, 5));   // 5

What is Props?

Props (short for properties) in React are a way to send data from a parent component to a child component. They make components reusable, dynamic, and customizable.

Parent Component

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

Child Component

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

Explanation:-

<Greeting name="Aakash" />