Building a Chat UI with React: A Step-by-Step Guide

The modern web has transformed how we communicate, and chat applications are at the forefront of this evolution. In this article, we’ll explore how to build a simple yet elegant chat User Interface (UI) using React. We’ll cover the essential components and functionalities that make up a chat app while avoiding overwhelming complexity, ensuring you can progressively enhance your application.

What You’ll Learn

• Setting up a React project
• Creating chat components
• Managing state with hooks
• Implementing a simple back-end setup using an API
• Styling your chat UI for an engaging user experience
• Deploying your application

Prerequisites

Before diving into our chat UI project, you should have the following:

• A basic understanding of React
• Familiarity with JavaScript ES6+
• Node.js and npm installed on your machine

Setting Up Your React Project

To start building your chat UI, we first need to set up our React application. We’ll use Create React App for this purpose.

npx create-react-app chat-ui
cd chat-ui
npm start

This command will create a new directory called chat-ui and immediately launch the development server in your default browser.

Creating Chat Components

Now that we have our React environment set up, we can start creating the core components of our chat application. We’ll focus on three main components:

• ChatWindow: Displays the chat messages.
• MessageInput: Allows users to type and send new messages.
• ChatMessage: Represents an individual chat message.

1. ChatWindow Component

Let’s create the ChatWindow component to house our chat messages. Create a file named ChatWindow.js in the src directory.

import React from 'react';
import ChatMessage from './ChatMessage';

const ChatWindow = ({ messages }) => {
    return (
        

            {messages.map((msg, index) => (
                <ChatMessage key={index} message={msg} />
            ))}
        
    );
};

export default ChatWindow;

This component will receive a messages prop, which it will render using the ChatMessage component.

2. ChatMessage Component

Next, we’ll create the ChatMessage component that defines how individual messages look. Create a new file named ChatMessage.js.

import React from 'react';

const ChatMessage = ({ message }) => {
    return (
        

            {message.user}: {message.text}
        
    );
};

export default ChatMessage;

3. MessageInput Component

Now, let’s develop the MessageInput component, which will enable users to type and send messages. Create a file called MessageInput.js.

import React, { useState } from 'react';

const MessageInput = ({ sendMessage }) => {
    const [input, setInput] = useState('');

    const handleSubmit = (e) => {
        e.preventDefault();
        if (!input) return;
        sendMessage(input);
        setInput('');
    };

    return (
        
             setInput(e.target.value)} 
                placeholder="Type a message..." 
            />
            Send
        
    );
};

export default MessageInput;

Managing State with Hooks

Now that we have our components in place, we need to manage the state of our chat application to store messages and handle user input effectively.

In your App.js, let’s combine everything:

import React, { useState } from 'react';
import ChatWindow from './ChatWindow';
import MessageInput from './MessageInput';

const App = () => {
    const [messages, setMessages] = useState([]);

    const sendMessage = (text) => {
        const newMessage = { user: "User", text };
        setMessages([...messages, newMessage]);
    };

    return (
        

            
            
        
    );
};

export default App;

In this snippet, the App component manages the state of messages and passes it down to the ChatWindow and MessageInput components.

Implementing a Simple Back-end Setup

To make our chat application more robust, we’ll need a back-end to handle data storage and provide persistent state. We can use JSON Server for a simple REST API.

First, install JSON Server:

npm install -g json-server

Next, create a file called db.json in the root directory of your project:

{
    "messages": []
}

Then, run the JSON server:

json-server --watch db.json --port 8000

Your API is now running on http://localhost:8000/messages. Update the sendMessage function in your App.js to make a POST request to this endpoint.

import axios from 'axios';

// ...

const sendMessage = async (text) => {
    const newMessage = { user: "User", text };
    await axios.post('http://localhost:8000/messages', newMessage);
    setMessages([...messages, newMessage]);
};

This way, every time a message is sent, it will be saved to our JSON Server, providing our chat UI with a persistent state. Furthermore, you can employ a useEffect hook to fetch messages on component mount.

Styling Your Chat UI

Finally, let’s add some CSS to make our chat application visually appealing. Create a styles.css file in the src directory and link it in index.js.

import './styles.css';

Now, here’s a simple CSS that you can use:

.chat-app {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 400px;
    border: 1px solid #ccc;
}

.chat-window {
    flex-grow: 1;
    overflow-y: auto;
    padding: 10px;
    border-bottom: 1px solid #ccc;
}

.chat-message {
    margin: 5px 0;
}

input {
    width: 80%;
    padding: 10px;
    margin-right: 5px;
}

button {
    padding: 10px;
}

Deploying Your Application

Once you’re satisfied with your chat application, the next step is deployment. You can easily deploy your React app using platforms like Vercel, Netlify, or even GitHub Pages.

To deploy with Netlify, for instance, follow these steps:

1. Create a production build:

npm run build

2. Log in to Netlify and create a new site from GitHub.
3. Link your repository and deploy.

Conclusion

In this tutorial, we’ve built a simple chat UI using React, demonstrating component structure, state management, and basic API usage. While our chat application is rudimentary, it sets the stage for broader enhancements such as user authentication, real-time messaging with WebSockets, and more sophisticated back-end services.

As you continue on your development journey, don’t hesitate to explore these functionalities to take your chat application to a new level. Happy coding!

If you have any questions or feedback about this tutorial, feel free to leave a comment below!