React UI Kit

Build a Fully Featured React Chat App

Building a fully-featured chat app will technically require a lot of infrastructures such as a backend logic, a web socket, and more, fortunately, we have the CometChat infrastructures that covers everything we need to get started with our chat application to leverage on.

Umar Elbelel • Sep 21, 2020


Building a fully-featured chat app will technically require a lot of infrastructures such as a backend logic, a web socket, and more, fortunately, we have the CometChat infrastructures that covers everything we need to get started with our chat application to leverage on.

This tutorial would take you through the steps required in building a fully-featured group chat application with React. To instantiate this chat app, we will be using the CometChat custom UI KIT which will help us handle the logic at the frontend and also provide us with an appealing user interface for the chat application.

Setting Up a CometChat Account and Creating App

To create a CometChat API you have to first create an account with CometChat; after that follow the steps below to get your API key

  • Add a new app

s accfaebebfaefdecafcfebdcfacebba first

Fill out the input fields with your desired details of the region, app name, technology, and use case.

Click on ADD APP to complete the process:

s accfaebebfaefdecafcfebdcfacebba second

This will automatically setup your CometChat app with everything required for your integration.

s dfefbeeaafbfbcedffadfbb quickstartkeys

Take note of your APP ID and REGION, and AUTH KEY we will be using them later in our tutorial.

Initializing Project

Run the below command to create a new react project:

The preceding command will automatically create a new folder named CometChat and set up the necessary boilerplate for us to get started with our projects.

Installing CometChat SDK

Before we start implementing the appropriate required logics to make our chat application functional, we need to install CometChat Pro SDK. This is required for our app to properly interact with CometChat. For that purpose, move into the newly created project folder and install the SDK via NPM.

Run the below command to install

After installing our dependency we need to initialize it and to do that we have to include it at the starting point of our application. Open the "index.js"  file which is the starting point of our application and add the following content to it.

Don’t forget to replace the APP_ID and REGION placeholders with your credentials

Run the application and view your default homepage on http://localhost:3000

s accfaebebfaefdecafcfebdcfacebba react

Creating Components

Here we will start by creating our required components. First, a user will have to be authenticated before accessing the chat components. As mentioned earlier we will be leveraging on the CometChat UI KIT which provides us with robust chat components.

Cloning CometChat UI KIT

For us to utilize the features of COMETCHAT UI KIT, we first need to clone it to our application using the following commands

git clone

Now open the CometChat UI KIT folder and copy the CometChat folder. Navigate to your source folder and paste it there. Next is for us to install all the needed dependency for the CometChat UI KIT, to do that open the “package.json” file in the CometChat UI KIT project we cloned with your text editor, Copy all contents from package.json in CometChat UI KIT to your package.json.

‍To install these packages run the following command

Now that we have setup our CometChat UI KIT we can easily reference and make use of the custom components to easily setup our interface for the application

Creating Login Component

Before we can access our message chat component, we need to be authenticated. To do that navigate to your source folder and create a folder called components (this is where all our components will be). Once you have done that, the next is to create a login component “login.js”; and paste the code below,

The return method in the above code snippet displays an input field that accepts our username or UID, we have also provided you with default users (superhero1,superhero2,superhero3) for easy authentication. Next is we set the condition for our button upon submission.

On submission or onclick  of any of the default users, we trigger the login() which we set in our authcontext to handle our authentication.

Creating AuthContext Component

To complete our authentication we will have to first set up our authcontext component. This component handles our application states along with our login and logout logics.

To create this component, navigate to your src/context folder, and create a file called “authcontext.js” and paste the code below. Don’t forget to replace the AUTH_KEY  placeholder with your app’s Auth key.

The login() handles our request, starting by validating if a user exists before authenticating the user using the CometChat.login() and also set IsloggedIn status to true, otherwise it creates the user using the CometChat.createUser() .Once the user is authenticated, you will be redirected to the chat component we will create in our next section.

Another method is the logout() with calls the cometchat.logout()  to logout a user. For our styling, we use the bootstrap CDN included in our “index.html” file

Creating Chat Component

Begin by navigating to our src/components and create our “message.js” file; open the file and paste the code below

First we import the cometchatGrouplistScreen component from the CometChat SDK we cloned earlier.This component will list all group and also handle all the logic of sending and receiving messages from group members.

Updating Our “app.js” File

Open your app.js file and paste the following code

Testing Our Application

In order to test our application, restart the application by pressing CTRL + C. Then run the following command to start it up:
npm run start
Navigate to your browser and open http://localhost:3000 to access the application


Leveraging on the robust and easy to use CometChat Custom UI KIT , we were able to build a fully featured react chat app without much predicament. The Custom UI KIT has provided us with most of our logic and basic chat interface, it also comes with more features (image upload, call, etc) when trying to extend your chat app.

Hope you found this tutorial helpful. Don’t forget to check the official documentation of CometChat to explore further and add more features. The complete source code to this tutorial is available on GitHub.

Umar Elbelel



Try out CometChat in action

Experience CometChat's messaging with this interactive demo built with CometChat's UI kits and SDKs.