Category: react
chat app usign react
Published on 22 May 2026
Explanation
Create a React project using Vite.
Start the React development server.
Code:
npm create vite@latest react-chat-app -- --template react cd react-chat-app npm install npm run dev
Explanation
Clean project structure for chat application.
Code:
src/ ├── components/ │ ├── ChatBox.jsx │ ├── MessageList.jsx │ └── MessageInput.jsx ├── App.jsx ├── main.jsx └── index.css
Explanation
Create message state in React.
Create input state for typing messages.
Code:
const [messages, setMessages] = useState([]);
const [text, setText] = useState('');
Explanation
Function to send messages in chat
app.
Code:
const sendMessage = () => {
if (text.trim() === '') return;
const newMessage = {
id: Date.now(),
text: text,
sender: 'You',
time: new Date().toLocaleTimeString()
};
setMessages([...messages, newMessage]);
setText('');
};
Explanation
Create input field and send button
UI.
Code:
<div className='input-area'>
<input
type='text'
value={text}
onChange={(e) => setText(e.target.value)}
placeholder='Type message...'
/>
<button onClick={sendMessage}>
Send
</button>
</div>
Explanation
Display all messages using map function.
Code:
<div className='chat-box'>
{messages.map((msg) => (
<div key={msg.id} className='message'>
<h4>{msg.sender}</h4>
<p>{msg.text}</p>
<small>{msg.time}</small>
</div>
))}
</div>
Explanation
Complete App.jsx example for simple React
chat UI.
Code:
import { useState } from 'react';
function App() {
const [messages, setMessages] = useState([]);
const [text, setText] = useState('');
const sendMessage = () => {
if (text.trim() === '') return;
const newMessage = {
id: Date.now(),
text,
sender: 'You',
time: new Date().toLocaleTimeString()
};
setMessages([...messages, newMessage]);
setText('');
};
return (
<div className='container'>
<h1>React Chat App</h1>
<div className='chat-box'>
{messages.map((msg) => (
<div key={msg.id} className='message'>
<b>{msg.sender}</b>
<p>{msg.text}</p>
<small>{msg.time}</small>
</div>
))}
</div>
<div className='input-area'>
<input
type='text'
value={text}
onChange={(e) => setText(e.target.value)}
placeholder='Type message...'
/>
<button onClick={sendMessage}>
Send
</button>
</div>
</div>
);
}
export default App;