What is a Component in React

If you do not know what a component in React JS is, this article is for you. In this article, we will discuss components and how to use them. For example, Every website has at least five components one for the header, one for the sidebar, one for content, one for the footer, and finally one component to contain every other component. The containing component is the root component and is usually named an app component in your application.

Each of the four nested components describes only part of the user interface. However, all the components come together to make up the entire application. For example, the sitemap component can be the left sidebar as well as the right sidebar, and as already mentioned component can also contain other components. Forex: app component contains the other components.

The component code is usually placed in a JavaScript file. For example app component is placed in app.js. You can also have a component file with .jsx extension but for this series, we stick to the simple .js extension. So, the component is basically the code inside a .js file

Components types:

In React, we have two component types

1. Stateless functional component
2. Stateful class component

Functional component

Functional components are JavaScript functions, the return HTML describing the UI.
Ex:

function welcome(){
return <h1> Hello John </h1>
}

Here, the function called welcome returns the h1 tags that say “hello john”.

Class component

It is our regular ES6 classes that extend the component class from the React library.

Ex:

class Welcome extends React.Component{
render(){
returns <h1>Hello John </h1>
  }
}

Here, we have created a “welcome” class and it extends react.component.
Inside the class, we have created the render() method and inside it, we have returned the h1 tag that says “hello john”.