Ways to Create Components in ReactJs.

According to official react documentation, a component is defined as:

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

This means in React you can create a small block of code and render it anywhere on the page. A component is similar to a LEGO block. Like we create a LEGO structure from many little LEGO blocks, we create a webpage or UI from many little code blocks or components.

Photo by Fran Jacquier on Unsplash

Suppose you are building news feed part of a social networking site, in this part, you will find buttons like comment, share, tag, etc. below each post. You can write code for each button but it will be an annoyance if you need to change a small part in every button. So by creating a component for this we can write the actual code once and place the component wherever we like.

So now we know what is a component and its advantage, but we don’t know how to create one.

So basically React provide us two ways to create a component

1. By using the Javascript function.
2. By using Javascript class.

Let’s understand it and make our components step by step

(Here we are assuming that you have started your project with create-react-app, if not please set up your project first. Visit this to learn how to set up a react project)

Class Component

A class component is simply a Javascript class that returns UI that we want to render.
The syntax for 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;

Let us understand what the above code means

1. In the first line, we are importing React and Components from the ‘react’ module which is necessary to create a component, the meaning of these two terms are out of the scope of this article. We will cover it in some different articles.
2. In the third line, we have declared the javascript class which is extending Component, i.e. our component inherits all the properties from React’s Component module.
3. Each class component must have a single render method that describes what to render and this method return UI, which is to be rendered.
4. As we have created this component in a separate file we have to export it, so that other components can access it.

And that’s it your class component is ready.

Functional Component

Like a class component is class, a functional component is a function. The original react docs states.

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;

Let us understand what the above code means:

1. In the first line, we are importing React from the ‘react’ module which is necessary to create a component, The Functional component does not need Component and so we are not importing Component.
2. In the third line, we have created a javascript function and a “props” argument is passed to it. “props” in react means properties. Props is simply a javascript object.
3. A functional component must return some UI and so we are doing so in line 4.
4. As we have created this component in a separate file we have to export it, so that other components can access it.

And now you have your functional component ready too.

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.