Ways to Create Components in ReactJs.

React components are small, reusable pieces of code that return a React element to be rendered to the page.

Collection Lego blocks showing that react component are similar to LEGO block which can be joined to form a webpage or UI
Photo by Fran Jacquier on Unsplash

Class Component

1. import React, {Component} from 'react'
2.
3. class ComponentName extends Component{
4. render(){
5. return(
6. <div>
7. something great...
8. <div>
9. }
10. }
11.
12. export default ComponentName;

Functional Component

The simplest way to define a component is to write a JavaScript function

1. import React from 'react'
2.
3. function NewComponent(props) {
4. return <h1>Hello Programmers, {props.name}</h1>;
5. }
6.
7. export default NewComponent;

Note: Functional Component is also known as Stateless Component because in past we could not do the React’s complex stuff like State Management and Lifecycle methods in a functional component.

But, the introduction of React Hooks in version 16.8 makes the use of state and other complex functionalities possible with functional components. You can know more about hooks here.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store