How to Build a Real-Time Chat App with React

With the backend in place, let’s build the frontend interface using React.

a) Connect React to Socket.IO:

Install the client library:
npm install socket.io-client

b) Create the Chat Interface:

1. Setup State Management: Use React hooks or Redux for state management.

2. Component Structure:

   • Chat.js: Handles the chat window.

   • MessageInput.js: Accepts user input.

   • MessageList.js: Displays messages.

Example code for Chat.js:

import React, { useState, useEffect } from ‘react’;
import io from ‘socket.io-client’;

const socket = io.connect(‘http://localhost:5000’);

const Chat = () => {
const [message, setMessage] = useState(”);
const [messageList, setMessageList] = useState([]);

const sendMessage = () => {
if (message !== ”) {
const messageData = {
author: ‘User’,
message: message,
time: new Date().toLocaleTimeString(),
};
socket.emit(‘send_message’, messageData);
setMessageList([…messageList, messageData]);
setMessage(”);
}
};

useEffect(() => {
socket.on(‘receive_message’, (data) => {
setMessageList((list) => […list, data]);
});
}, []);

return (
<div>
<div>
{messageList.map((msg, index) => (
<div key={index}>
<p>{msg.author}: {msg.message} ({msg.time})</p>
</div>
))}
</div>
<input
type=”text”
value={message}
onChange={(e) => setMessage(e.target.value)}
/>
<button onClick={sendMessage}>Send</button>
</div>
);
};

export default Chat;

This code exemplifies how React mobile app development focuses on interactivity and responsiveness.