Hello there, fellow React enthusiast! 🌟 Today, we're going to delve deep into the world of React components. Whether you're just starting your journey or looking to sharpen your skills, you've come to the right place. Let's explore what components are, the difference between functional and class components, and how to render them with real-life examples. Buckle up! 🎢

Components

Components let you split the page into independent and reusable parts.

Let's visualize this by taking a look at a piece of the given discussion page:

Notice that the page can be split into multiple parts. Each of these "parts" is a component.
The heading is a component, the "new question" button is a component, and the search bar is its component.
This makes organizing the page leaps and bounds easier, but even more importantly, components allow us as developers to separate concerns from one another.

Separation of concerns is a programming principle that states that each concern should be separated into individual pieces.
For example, in the diagram above, the "new question" button (2) should be clicked if a user wants to add a new question, whereas the search bar (3) would be used if the user wants to search the existing questions.

Functional Components

In React, there are two types of components that you can use: Functional Components and Class Components.
In this part, we will talk about functional components.

A functional component is a simple JavaScript function:

function Hello() {
  return <h1>Hello world.</h1>;
}

The code above defined a functional component called Hello, that returns a simple React element.

Notice that the name of the functional component begins with a capital letter. This is critical. If we start the name of a component with a lowercase letter, the browser will treat our component like a regular HTML element instead of a Component.

Rendering Components

To display the component, we need to create the corresponding JSX element.

For example, for our user-defined component Hello:

const el = <Hello />;

Now, we can use our user-defined element and render it on the page:

function Hello() {
  return <h1>Hello world.</h1>;
}

const el = <Hello />; 
ReactDOM.render(
  el, 
  document.getElementById('root')
);

Another Example:

function Section() {
 return <div>A section</div>;
}

const el = <Section />;

ReactDOM.render(el,document.getElementById('root')
);

Remember, all component names need to start with a capital letter.

Class Components

Class components are typically used when there are more advanced user interactions, like forms, and animations.

All class components need to extend the React.Component class.

We can rewrite our Hello functional component as a class component:

class Hello extends React.Component {
  render() {
    return <h1>Hello world.</h1>;
  }
}

Class components need to have a render method, which is in charge of telling what the page should show.

We will learn about the features and differences of functional and class components in the next lessons.

Example:

class Greeting extends React.Component {
render()
  {
    return <div>Hello World.</div>;
  }
}

Real-Life Examples 🌐

Let's see how components are used in real-life scenarios:

1. Header Component 📜

Imagine you have a website with a consistent header across all pages. You can create a Header component to reuse it everywhere:

jsxCopy codefunction Header() {
  return (
    <header>
      <h1>My Awesome Website</h1>
      <nav>
        <a href="/">Home</a>
        <a href="/about">About</a>
        <a href="/contact">Contact</a>
      </nav>
    </header>
  );
}

2. User Profile Component 👤

Let's say you're building a social media app. You can create a UserProfile component to display user information:

jsxCopy codefunction UserProfile(props) {
  return (
    <div>
      <img src={props.avatarUrl} alt={props.name} />
      <h2>{props.name}</h2>
      <p>{props.bio}</p>
    </div>
  );
}

You can use this component to display user profiles throughout your app.

Don't worry we'll learn about props in the next article. For further updates SUBSCRIBE!

Wrapping Up 🎁

Components are the foundation of React development. They promote reusability, maintainability, and a modular approach to building user interfaces. Whether you prefer functional or class components, React has you covered.

If you have any questions or want to share your React experiences, feel free to leave a comment below. Happy coding, component creators! 🚀🧱🌟

Unleashing the Power of Components in React 🚀