• I was making a React project—a Myntra clone—so I learned about React components from that.

I created the Header, Body, and Footer components and rendered all of them inside the App component.

Currently, all these components are in a single file named App.js, making the code complex to read and understand.

What I learned: When working in a company, we do not write all code in one file. It is not a good practice. That’s why the concept of modules was introduced.

  • What is a module? A module is something that you will use repeatedly.

It is just like a function that should be kept in a separate JavaScript file.

This is what we call a component in React.

- What is a component?
In React, a component is simply a function written in a separate file, which is then exported and imported as needed.

For example, create a components folder and move all component files (e.g., Header.js, Footer.js, etc.) into it.

You can name your files as you like, but it is advisable to name them the same as the function name for better readability.

- Exporting Components
There are two ways to export a function in React:

Write export default functionName at the end of the file.

Write export default before defining the function.

export default function Header() { ... }

-** File Extensions**
You can use either .js or .jsx extensions while creating files in React.

It is advisable to use .jsx if you are writing JSX in your code.

  • Handling Dummy Data Any dummy data (data you are fetching for UI development) should be kept inside a folder named utils.

-** Important Rules I Learned**
Variable Export Rule:

In JavaScript, you cannot write export default before variable declarations like let, const, or var.

Incorrect:export default const arr = [1, 2, 3];
Correct:const arr = [1, 2, 3];
export default arr;

Only One Default Export per File:

A file can have only one export default.

If you need to export multiple items (functions, arrays, objects), use named exports instead.

Example of named export:
export { Header, Footer, arr1, arr2 };

Corresponding import:import { Header, Footer, arr1, arr2 }
If you use export default, you can import it without curly braces
If you use export (without default), you must use curly braces when importing.
You can also rename an imported component using as

  • Why Use React? React gives developers control over the UI while handling DOM manipulation efficiently. This is why we use ReactDOM.createRoot(), as React takes care of updating the DOM optimally.