Component in React

Introduction to React Components

Let's say we are designing a navigation bar for a web page in HTML:

 <nav>
  <ul>
     <li><a href="#">Home</a></li>
     <li><a href="#">About</a></li>
     <li><a href="#">Services</a></li>
     <li><a href="#">Contact</a></li>
  </ul>
 </nav>

This nav bar will be part of every web page listed on a website.

This navigation bar would typically be replicated across every page of a website, leading to

1. time consumption
2. Inefficiency
3. Repetition

Now, to resolve these issues we use React.

React is a JavaScript library used for building reusable user interface components in web applications.

If we talk about creating our Nav Bar in React then it will wrap all our nav bar markup, CSS, and JavaScript into a simple component that can be known as a nav bar component and represented as

<NavBar />

Under the hood, it still uses tags like <nav>, <ul>, and <li>.
However, it abstracts away the implementation details, allowing for easier reuse and maintenance.

This <NavBar /> component can be reused on multiple pages of a web app, speeding up the development process.

In React, components like NavBar serve as self-contained units of code, facilitating modularization and enhancing code maintainability.

Defining a component
As per the docs, a React component is a JavaScript function that you can sprinkle with markup except

1. The name always begins with an uppercase
2. They return JSX markup

JSX is nothing but a syntax extension for JavaScript that allows you to write HTML-like code within JavaScript.

Take a look at the example below:

export default function NavBar(){
 //Return JSX markup
 return(
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
)
}

How to use a component

As we have defined our NavBar component, we can use it inside other components.

Let's say we are creating a home page of the web app where we are using the <NavBar /> component inside our home page component:

function NavBar(){
return(
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
)
}

export default function HomePage(){
 return (
  <div className='HomeContainer'>
     <NavBar />
     <h1>Home Page</h1>
     <ol>
       <li>component 1</li>
       <li>component 2</li>
       <li>component 3</li>
     </ol>
  </div>
)
}

A question might have arisen in your mind while going through this blog that

How does the browser differentiate between an HTML tag and a component?

The answer lies in their casing i.e;
if a markup starts with a lowercase like <section> then the browser interprets it as an HTML tag whereas if any markup starts with an uppercase like <NavBar /> then it is interpreted as a component.