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:-
A file can export ONLY ONE thing as default.
When importing it, you can name it anything.
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:-
A file can export many things.
You must import them using the same names.
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:-
App sends a prop:
<Greeting name="Aakash" />