Introducing Components: A Better Way To Build And Maintain Complex Web Applications

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

This makes organizing the page leaps and bounds easier, but even more importantly, components allow us as the developers to separate concerns from one another.

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 absolutely 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

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

For example, for our user-defined component Hello:

const elm = <Hello />; 

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

function Hello() {
  return <h1>Hello, I am here Learn new things.</h1>;
}

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

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.

t's made by the React team, and it's the cornerstone of their design philosophy, which is to use reusable components for all components on the page.