The Big Picture of React Component

In React, a component is like a building block for your user interface(UI). Think of it as a small, reusable chunk of code that defines how a particular part of your page should look and behave. These components allow developers to build complex UI by combining simple, independent, and reusable pieces.
In general, components are essentially self-contained, reusable pieces of UI that can be thought of as functions that render some part of the user interface.
I know there might be some conflict about the words self-contained, reusable pieces, and renders.

There are 3 major concerns behind why use Components.

1. Reusability
2. Separation of concern
3. Modularity

• Reusability ensures create a component once and reuse it multiple times across your application.
• Separation of concern ensures each component focuses on a specific part of the UI, making it easier to manageand maintainthe code.
• Modularity ensures breaking your UI into small, manageable components which makes it easier to test, debug,and develop

Let's prove one by one by defining components. Opps!😊 I forgot you don't know how to define a simple component. Don't worry I am here🦾 to break down all the things. so let's dive-👋
Suppose you are developing an e-commerce application. In the application in multiple places or multiple pages you need to rendera same product card. Rendering means responding to the UI.
Now is your time👍 to think🙄 how you can display the product card in your application in multiple pages.
Traditionally when creating web pages developers marked up their content and added interaction by sprinkling on some javascript. This worked great when the multiple pages the same marked up didn't replace into multiple pages not too much which makes you sometimes bored and at the same time tiresome as well as hard to debug and manage.So, there is a chance to break your code and it's might cumbersome to manage.
Here you will discover the beauty of React component architecture. React let you create component and use as many places as or much as you want.

// === Reminder ===
Components are regular javascript functions that can sprinkled with javascript

function ProductCard(){
  return(
      <div>
        <h1>title of the product</h1>
        <h2>price of the product</h2>
        <p>description of the product</p>
        // rest of info
      </div>
  )
}

let's break it-
step-1: Declare a simple javascript function as ProductCard name
step-2: The component/function returns an <div> tag consisting some other tag.

// === Reminder ===
All tags must return under a parent tag or using a react fragment(<></>)

// === Reminder ===
React component name must start with a capital letter otherwise it won't treated as a component

The ProductCard component returns a div tag with h1,h2,p, or some other necessary tags written like HTML, but it is Javascriptunder the hood. The syntax is called JSX(javascript XML). No worries I will explain it later.

// === Reminder ===
JSX is a syntax extension for javascript that lets you write HTML-like markup inside a javascript file which handles the logic of rendering and markup live together in the same place as components.

Now your component is ready to use. For example, you have a Product page and have to render some products.

//Products.js or jsx file
function ProductCard(){
  return(
      <div>
        <h1>title of the product</h1>
        <h2>price of the product</h2>
        <p>description of the product</p>
        // rest of info
      </div>
  )
}

function ProductPage(){
  return(
      <section>
        <h1>product page</h1>
        <ProductCard/>
        <ProductCard/>
        <ProductCard/>
      </section>
  )
}

Your browser will render 3 times the ProductCard means that 3 product cards have been visible to the browser.

The point is How the browser will react after getting this ProductPage code

• <section> is lowercase, so React knows it will refer to as an HTML tag
• <ProfileCard/> starts with a capital P, so React knows that it will be treated as a Component.

so far so good👏. successfully we have rendered the products card to the product page.
Now times to organize the code:
You may have one or more components like ProductCard, ProductReviewCard, SimilarProductCard, etc. so, it might be cumbersome to declare and manage all the components in one file. so, let's make it more organized to manage using just file structure.
let's create a reusable folder since the ProductCard may have been used from multiple pages. Inside the reusable folder create ProductCard.js/jsx file.

//reusable/ProductCard.js or jsx file
function ProductCard(){
  return(
      <div>
        <h1>title of the product</h1>
        <h2>price of the product</h2>
        <p>description of the product</p>
        // rest of info
      </div>
  )
}

Now there is a point if you separate the ProductCardcomponent how will use it from the ProductPage file. I know you may have already understood yes, we can export the ProductCardfunction from the ProductCardfile as named or default which you prefer actually.

//reusable/ProductCard.js or jsx file
export default function ProductCard(){
  return(
      <div>
        <h1>title of the product</h1>
        <h2>price of the product</h2>
        <p>description of the product</p>
        // rest of info
      </div>
  )
}

now it is being usable from the ProductPage file. just import the ProductCardfrom the ProductPagefile then use it as much as you want.

//ProductPage.js or jsx file
import ProducrCard from './reusable/ProductCard.js'
function ProductPage(){
  return(
      <section>
        <h1>product page</h1>
        <ProductCard/>
        <ProductCard/>
        <ProductCard/>
      </section>
  )
}

I mentioned earlier why component should use-for reusability, separation of concern, and modularity.

• Our ProductCard component is fully reusable now. we can use it from anywhere.
• In the ProductPage there may have multiple sections like ProductCard,ProductReviewCard,SimilarProductCard,RecommendedProductCard etc. Making it manage and maintain the code focusing into a separate section as component by component and section by section.
• After breaking the UI as small chunk of sections makes it easier to test, debug, and develop. we can find bugs/issues easily from the particular component if bugs arise. I hope it is much clearer now👍

After all of this, you have understood that you can be nesting your component also.

ok let's take a look again-👀
create a Layout folder
create Header folder under the Layout folder then create index.js file inside Header folder

export default function Header(){
  return(
      <section>
        <h1>Header</h1>
      </section>
  )
}

create `Footer` folder under the `Layout` folder then create `index.js` file inside `Footer` folder
export default function Footer(){
  return(
      <section>
        <h1>Footer</h1>
      </section>
  )
}

now create index.js file under Layout folder

import Header from './Header';
import Footer from './Footer';
export default function Layout(){
  return(
      <section>
        <Header/>
          <h1>page content</h1>
        <Footer/>
      </section>
  )
}

I hope you already have discovered the beauty of react component architecture. This is just starting and tried to grow interest inside of your back of mind.
Happy coding🙂🙂