React tutorial — Create very first component

Step by steps

In this tutorials we are using class component. So in class component we need to extend React.component and also need to implement render method, which returns the view html elements. Class components can have local state and lifecycle hooks, unlike functional components.

Step 1:

Create the component package inside the ‘src’ folder.

Step 2:

create component js file inside the components package. Here I create the ‘HeaderComponent.js’ file

Step 3:

import React and Component from react

Step 4:

Create React component class

Step 5:

Create constructor inside the component class and call super constructor inside it by using super(props).

Step 6:

Add html content inside the render() method and return them.

Step 7

export the component, then it can import from App.js file.

Step 8

import the Header component from App.js and use it in App function as a component.

HeaderComponent.js

Result

Source Code

react-7q6odz - StackBlitz

Simple examples of using class components

simple-counter-app - StackBlitz

arithmatic-app - StackBlitz