Overview

This blog will provide complete information on React components. Let’s have a discussion on components before moving to React components.

Component is independent reusable set of code. Every page have set of components in the form of header, hero, table, tile, image with text, etc. components.

Below is an example of number of components we can have on page. A component can have number of atomic components. For example, header component is having multiple reusable secondary link component.

React component is responsible for returning html code snippet.

React supports two types of components:

1. Function Components
2. Class level components

Function Component

Functional component is a normal JavaScript function which returns HTML code. Function name must be starting with Capital letter.

Class Component

Creation of Class component is required to extends React.Component and return html code similar to function component.

Class component name must be starting with Capital letter.

Component Rendering

Below is the global index.js file to load Main component created in above steps.

Component loading part is similar for both Function and Class component as shown below.