How to use class based components in React.js?

How to use class based components in React.js? »

In this section you’re going to learn how to use class based components as opposed to what you’ve seen so far (function based components).

There are multiple reasons why you’d prefer using class based components over functional components. Some of the reasons that I can think of are:

Why should you use class based components instead of function based components?

Easier and readable code: Class based components often have easier code organization which helps in reading and understanding the code a whole lot better than functional components. In a class based component, following code structure is followed:

class based component in Reactjs
Accessibility of React State system: States are one of the most important features of React.js and are often required in almost all the React projects. Surprisingly, states can only be implemented inside a class based component.

Accessibility of React Lifecycle Methods: You can use lifecycle methods in a class based component. These are the methods that help you implement multiple conditional operations based on state updation or help you set loading of data when the app first starts.

To better understand class-based components, you’re going to create an app that will:

  1. Take user’s current time
  2. Take out hours from the time
  3. Determine whether its day or night
  4. Display some graphics based on that

To achieve that, you first need to create a React project.

Go to the directory where you keep all your React projects. In my case, it is inside D:\Projects\React, so I will run the following command inside the directory to create a new React project named daynight:

create-react-app daynight

I’ll  wait for NPM to install all the required packages and files.

Once you’re done with that, open the folder using your favorite code Editor. In my case, I’d open D:\Projects\React\daynight

Next, you need to install Bootstrap or Semantic UI css library to start building your app. You may use Semantic UI as it also contains some additional features like animated icons, as compared to Bootstrap.

To add semantic UI, go to https://cdnjs.com/libraries/semantic-ui and look for one of the lines that look like: https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css

Now, inside your project directory, go to public\index.html and add the the following stylesheet link right before meta tags so it looks like:

<!DOCTYPE html>
<html lang="en">
 <head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"/>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React App</title>
 </head>
 <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
 </body>
</html>

Now go back to Terminal / CMD and run the following command to start your React project:

npm start

This should take you to the application home page on browser and you’d see the React logo rotating with the text “Edit src/App.js and save to reload.”

Press Ctrl + Shift + E and reload the page. You should be able to see all the resources which were loaded by the browser. Make sure to check out for cdnjs.cloudflare.com (Domain) or semanticui.min.css (File).

Then, go to the src directory and remove / delete all the files from there. You should now see an error that says “Failed to compile”.

Create a file named index.js inside the src directory and that should remove the error away.

The index.js file will have the App component, which will take user’s current time, get the hours and send it to DayNightDisplay component (which you’ll create soon). DayNightDisplay component will display some graphics based on whether it’s day or night.

Passing data from one component to another in reactjs

Inside index.js file, write the following code and save the file:

import React from 'react';
import ReactDOM from 'react-dom';

const App = () => {
    return <div>Hello world!</div>;
};

ReactDOM.render(
 <App />,
 document.querySelector('#root')  
);

This should produce “Hello World” on the browser screen.

Now, inside the src directory, create a file named “DayNightDisplay.js”. You’re not going to complete the component right away, but just going to create and connect it to build a basic foundation for the app you’re going to build.

Inside DayNightDisplay.js, write the following code:

import React from 'react';

const DayNightDisplay = () => {
    return <div>
       Day Night Display
    </div>;
};

export default DayNightDisplay;

Leave a Comment