Building a React Chat App in 2024: A Comprehensive Guide using a React Chat UI
Welcome to this tutorial on building a React chat app using a React chat UI library and the MinChat Chat SDK! In this article, we will be creating a fully functional React chat application, entirely on the front end, using React.js. You won't need any server-side code – we will let the MinChat SDK handle all of the back-end work for us. By the end of this tutorial, you will have a fully functioning React chat application that you can customize and use however you like. Let's get started!
Table of Content
- Step 1: Breaking the react chat UI into react chat components
- Step 2: Configuring the Chat SDK
- Step 3: Connecting everything together
- Conclusion
You can find the source code for this tutorial on GitHub.
Prerequisites
Before diving into the tutorial, make sure you have the following:
- Basic knowledge of React and its ecosystem
- Node.js and npm installed on your machine
- A text editor or IDE of your choice
Step 1: Breaking the React Chat UI into React chat components
To begin building a React chat app, it is important to understand that React is centered around the concept of components. The first step in creating a chat app is to break down the react chat UI into individual react chat components. One key component to start with is the root component, which serves as the common ancestor for all other components in the app. This root component will be the "App" component.
function App() {
return (
<div style={{ position: "relative", height: "500px" }}>
{/* ui components */}
</div>
);
}
We are going to use a React Chat UI library called React Chat UI Kit for the react chat UI. go ahead and run the following command in the terminal
npm install @chatscope/chat-ui-kit-react @chatscope/chat-ui-kit-styles
Now lets add the react chat ui components to our App.js file
import styles from "@chatscope/chat-ui-kit-styles/dist/default/styles.min.css";
import {
MainContainer,
ChatContainer,
MessageList,
Message,
MessageInput,
} from "@chatscope/chat-ui-kit-react";
function App() {
return (
<div style={{ position: "relative", height: "500px", width: "500px" }}>
<MainContainer>
<ChatContainer>
<MessageList>
<Message
model={{
message: "Hello World",
sender: "Joe",
}}
/>
</MessageList>
<MessageInput placeholder="Type message here" />
</ChatContainer>
</MainContainer>
</div>
);
}
export default App;
Your react chat UI now looks like this:
Step 2: Configuring the Chat SDK
Now that we have our basic react chat UI setup, we can start integrating the chat SDK.
When it comes to building a react chat app, you have a few options.
One option is to use a UI builder such as MinChat's UI builder which is a plug'n'play solution to create the chat interface. MinChat's UI builder is an easy-to-use tool that allows you to customize the look and feel of your chat messaging feature, without having to write any code. You can choose from a variety of themes and customize the layout, colors, and fonts to match your app's branding.
Another option is to use a real-time chat API to handle the chat functionality. This method involves writing code to integrate the real-time chat API into your application, but it allows for more flexibility and customization than a Chat UI Builder.
There are many real-time chat APIs available on the market, and each one has its own set of features, pricing plans, and documentation. It's important to research and compare different options to find the one that best fits your needs.
For this tutorial, we will be using MinChat's real-time chat API and chat SDK to build our react chat app. MinChat is a real-time chat API and SDK that allows you to add messaging to your application in minutes. You can view its comparison with other chat APIs here. For more details about the MinChat chat SDK, you can view the chat SDK documentation.
We are going to sign up for an account on MinChat and get an API Key.
Install the MinChat React chat SDK:
npm install @minchat/react
Let's prepare our two users who will be sending messages to each other:
const firstUser = {
username: "micheal",
name: "Micheal Saunders",
};
const secondUser = {
username: "mercy",
name: "Mercy Wells",
};
Let's wrap the root index.js with the MinChat Provider passing our API key and the current user that is chatting:
import React from 'react';
import ReactDOM from 'react-dom/client';
import reportWebVitals from './reportWebVitals';
import App from './App';
import { MinChatProvider } from '@minchat/react';
const root = ReactDOM.createRoot(document.getElementById('root'));
const firstUser = {
username: "micheal",
name: "Micheal Saunders",
}
root.render(
<React.StrictMode>
<MinChatProvider
apiKey={"YOUR_API_KEY"}
user={firstUser} >
<App />
</MinChatProvider>
</React.StrictMode>
);
reportWebVitals();
In Our App.js file, we import the useMinChat() hook to access the minchat object, create the second user and start a new conversation with the second user using the useMessages(...) hook.
Our App.js file now looks like this:
import styles from "@chatscope/chat-ui-kit-styles/dist/default/styles.min.css";
import { MainContainer, ChatContainer, MessageList,Message,MessageInput} from "@chatscope/chat-ui-kit-react";
import { useMinChat, useMessages } from "@minchat/react";
function App() {
const [chat,setChat] = useState()
const minchat = useMinChat()
useEffect(() => {
async function createUser() {
if (minchat) {
const user = await minchat.createUser({
username: "mercy",
name: "Mercy Wells",
})
// create chat object
const chatObj = await minchat.chat(user.username)
setChat(chatObj)
}
}
createUser()
}, [minchat])
const { messages, sendMessage } = useMessages(chat)
return (
<div style={{ position: "relative", height: "500px", width: "500px" }}>
<MainContainer>
<ChatContainer>
<MessageList>
<Message
model={{
message: "Hello World",
sender: "Joe",
}}
/>
</MessageList>
<MessageInput placeholder="Type message here" />
</ChatContainer>
</MainContainer>
</div>
);
}
export default App;
Step 3: Connecting everything together
We now want to be able to send messages and receive them as well as view messages that are sent and received in our react chat app, we are going to update the MessageInput react chat ui component to be able to send the messages when submitted:
<MessageInput
onSend={(_, textContent) => sendMessage({ text: textContent })}
placeholder="Type message here"
/>
We then want the messages to appear in the message list in real time making sure to differentiate messages that are sent by the first user (who is our current user) and the second user:
<MessageList>
{messages &&
messages.map((message) => {
return message.user.username === "mercy" ? (
<Message
model={{
message: message.text,
sender: message.user.name,
}}
/>
) : (
<div style={{ justifyContent: "flex-end", display: "flex" }}>
<Message
model={{
message: message.text,
sender: message.user.name,
}}
/>
</div>
);
})}
</MessageList>
The App.js file should now look like this:
import styles from "@chatscope/chat-ui-kit-styles/dist/default/styles.min.css";
import { MainContainer, ChatContainer, MessageList, Message, MessageInput } from "@chatscope/chat-ui-kit-react";
import { useMinChat, useMessages } from '@minchat/react';
import { useEffect, useState } from "react";
function App() {
const [chat,setChat] = useState()
const minchat = useMinChat()
useEffect(() => {
async function createUser() {
if (minchat) {
const user = await minchat.createUser({
username: "mercy",
name: "Mercy Wells",
})
// create chat object
const chatObj = await minchat.chat(user.username)
setChat(chatObj)
}
}
createUser()
}, [minchat])
const { messages, sendMessage } = useMessages(chat)
return (
<div style={{ position: "relative", height: "500px", width: "500px" }}>
<MainContainer>
<ChatContainer>
<MessageList>
{messages && messages.map((message) => {
return message.user.username === 'mercy' ?
<Message
model={{
message: message.text,
sender: message.user.name,
}}
/> :
<div style={{ justifyContent: "flex-end", display: "flex" }}>
<Message
model={{
message: message.text,
sender: message.user.name,
}}
/>
</div>
})
}
</MessageList>
<MessageInput
onSend={(_, textContent) => sendMessage({ text: textContent })}
placeholder="Type message here" />
</ChatContainer>
</MainContainer>
</div>
);
}
export default App;
Your react chat app is now complete with in-app chat functionality using a react chat UI library and the MinChat SDK.
View the MinChat docs to see the many more possibilities you can have in your chat application such as adding file support, loading states, error states, view online, typing indicator, and many more features.
Conclusion
In conclusion, this tutorial walks through the process of building a react chat application using the MinChat Chat SDK and a React Chat UI. The tutorial begins by explaining the concept of react chat components and how to break down the react chat UI into individual react chat components. The tutorial then shows how to install and use the react chat UI library to create the chat UI, and provides code examples for each step along the way.
By following the steps in this tutorial, you will be able to create a fully functional react chat application that you can customize and use as you like. MinChat is a great Chat API and SDK service that enables you to build in-app chat functionality without worrying about building a backend or all the complexities involved in building real-time communication features.