Chat Application

Step 1: Set Up Your React Project

Open your terminal and run the following commands:

npx create-react-app chat-app
cd chat-app

Step 2: Create Chat Application Components

Replace the content of src/App.js with the following code:

import React, { useState } from 'react';
import './App.css';

const App = () => {
  const [messages, setMessages] = useState([]);
  const [message, setMessage] = useState('');
  const [username, setUsername] = useState('');

  const handleSendMessage = () => {
if (message && username) {
  setMessages([...messages, { username, text: message }]);
  setMessage('');
}
  };

  return (
<div className="App">
  <h1>Chat Application</h1>
  <div className="chat-window">
    <div className="messages">
      {messages.map((msg, index) => (
        <div key={index} className="message">
          <strong>{msg.username}: </strong>
          {msg.text}
        </div>
      ))}
    </div>
  </div>
  <input
    type="text"
    placeholder="Your name"
    value={username}
    onChange={(e) => setUsername(e.target.value)}
  />
  <input
    type="text"
    placeholder="Type a message"
    value={message}
    onChange={(e) => setMessage(e.target.value)}
  />
  <button onClick={handleSendMessage}>Send</button>
</div>
  );
};

export default App;

Step 3: Style Your Chat Application

Open src/App.css and add the following styles:

body {
  margin: 0;
  font-family: Arial, sans-serif;
}

.App {
  text-align: center;
  padding: 20px;
}

.chat-window {
  border: 1px solid #ccc;
  padding: 10px;
  height: 300px;
  overflow-y: scroll;
  margin-bottom: 20px;
}

.messages {
  text-align: left;
}

.message {
  margin: 5px 0;
}

input {
  padding: 10px;
  margin-right: 10px;
  width: 200px;
}

button {
  padding: 10px;
}

Step 4: Run Your Application

In the terminal, run:

npm start