How to create chat app in React.js

How to create your own chat in React.js using the Charset SDK: from creating components to working with a third-party API. In case you don’t find this easy, React js developers can always help you.

Decomposing the interface into components

Since React is a component framework, the first thing we need to do is present the React chat as a collection of elements.

Setting up the codebase

To get acquainted with the framework, we will use the simplest way of building the application: simply create an index.html file, to which we will connect the necessary libraries and code.

Create the root component

When all the necessary files are connected, you can start writing the components. They will be generated in the index.js file.

Rendering messages

Let’s see how you can render messages in the MessageList component:

This is the so-called “stupid” component. It accepts a single property, messages, which contains an array of objects. Then, it just renders the text and senderId properties from these objects. In our case, the render will look like this:

We now have an application skeleton and can render messages. Let’s replace the bogus messages with real ones.

Get the API key for Chatkit

Chatkit is a tool for quickly creating custom chats within existing apps. To get started with it, we need to access the service API.

Rendering a real chat in React

Now let’s go back to index.js and save the resulting ids as variables.

With this data, we are ready to connect to Chatkit. This will happen in the componentDidMount method of the App component.

Create ChatManager.

Call chatManager.connect () to access the currentUser object, which will serve as the interface for interacting with the API. Since we still have to work with currentUser, let’s save it in this.currentUser = currentUser.

Next, we call currentUser.subscribeToRoom () and pass our roomId to the onNewMessage hook. The hook fires every time a message is sent to the room, at which point we simply pass a new message to the end of this.state.messages.

Handling user input

Now we need to create the SendMessageForm component. SendMessageForm will be a so called “controlled” component. This means that this component controls the rendering in the input field through its state.

We do two things here:

  1. We monitor user input using onChange, thanks to which we can initiate the handleChange method.
  2. We set the value of the input field using this.state.message.

These two actions are chained together in the handleChange method. It just updates the state according to what the user has entered.

The page is then redrawn, and since the input field is explicitly set from state using value = {this.state.message}, it will be updated. Now let’s give the component a constructor. In it, we initialize state and bind the handleChange method to this.

The handleChange binding is needed so that we can access this inside this method.

Sending messages

The SendMessageForm component is almost complete, all that remains is to take care of sending the data. To do this, we will call the handleSubmit handler on the onSubmit of the form component.

To send the required data, we call sendMessage and passed this.state.message as a parameter. We haven’t created the sendMessage method yet, but we’ll take care of that in the next step since it’s a method of the App component.

SendMessageForm looks like this in its entirety:

Posting messages to Chatkit

The app is ready to send messages to Chatkit. This will happen in the App component, in which we will create the this.sendMessage method:

The method takes one parameter (message text). Let’s pass it as a property to <SendMessageForm>:

Title component

Let’s finish the chat in React by creating a component to display the header. This is a simple functional component:

That’s it, now you have your own messenger! Once again, if you have difficulty understanding the material, try playing with the Scrimba code to better understand the details of an already working application, and follow for more.