Create First Component Of React

Introduction 

 

In this article, you will learn what a component is in a React application. You will also see how to create a component in a React application and the different types of components.

 

What is a component in React?

 

Components are like a function that return HTML elements in a React application. Components are independent and reusable. They serve the same purpose as JavaScript functions, but work in isolation and return HTML via a render function.

 

Types of components in React

• Class component
• Function component

Class Component

 

When we create a React component, the component name must start with an uppercase letter. The component has to include the extended React.Component statement, this statement creates an inheritance to React.Component and gives you component access to React.Component’s functions.

import React, { Component } from "react";

class Person extends Component {
  state = {};
  render() {
    return <h1>Hello Person</h1>;
  }
}

export default Person;

Functional Component

 

Functional components are basic JavaScript functions. These are typically arrow functions but can also be created with the regular function keyword.

import React, { Component } from "react";

const Person = (props) => (
  <div>
    <h1>Hello, {props.name}</h1>
  </div>
);

export default Person;

Different between the class component and function component

 

Class Components	Functional Components
Class components make use of ES6 class and extend the Component class in React.	Functional components are basic JavaScript functions. These are typically arrow functions but can also be created with the regular function keyword.
Class components are also called smart or stateful components as they tend to implement logic and state.	Function components are referred to as dumb or stateless components as they simply accept data and display them in some form. That is they are mainly responsible for rendering UI.
React lifecycle methods can be used inside class components (for example, componentDidMount).	React lifecycle methods (for example, componentDidMount) cannot be used in functional components.
You pass props down to class components and access them with this.props	There is no render method used in functional components. Functional components can accept and use props. Functional components should be favored if you do not need to make use of the React state.

 

Step 1

 

Create an application in React using the below command:

npm create-react-app my-app

Step 2

 

Create a folder with name Components under the src folder in the my-app project. In the components folder, add a new file named HelloWorld.jsx.

import React, { Component } from "react";

export class HelloWorld extends Component {
  state = {};
  render() {
    return <h1>Hello World! Welcome to React programming.</h1>;
  }
}

export default HelloWorld;

Step 3

 

Register your component in Index.jsx

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import * as serviceWorker from "./serviceWorker";
import HelloWorld from "./components/hello-world";

ReactDOM.render(<HelloWorld />, document.getElementById("root"));
serviceWorker.unregister();

Step 4

 

Now run your project with the below command:

npm start