In today\u2019s fast-paced digital world, communication is king. One of the most effective methods of facilitating communication within a web application is by implementing a chat user interface (UI). This blog post will guide you through the process of building a simple yet effective chat UI using React. React’s component-based architecture makes it an excellent choice for creating dynamic interfaces like a chat application.<\/p>\n
Before delving into the code, ensure you have the following prerequisites:<\/p>\n
We will initialize a new React application using Create React App. If you haven’t installed Create React App yet, you can do so with the following command:<\/p>\n
npx create-react-app chat-ui<\/code><\/pre>\nAfter the setup is complete, navigate to the project directory:<\/p>\n
cd chat-ui<\/code><\/pre>\nProject Structure<\/h2>\n
To keep our project organized, we will create a folder structure that looks like this:<\/p>\n
src\/\n \u251c\u2500\u2500 components\/\n \u2502 \u251c\u2500\u2500 Chat.js\n \u2502 \u251c\u2500\u2500 Message.js\n \u2502 \u2514\u2500\u2500 MessageInput.js\n \u251c\u2500\u2500 App.js\n \u2514\u2500\u2500 index.js\n<\/code><\/pre>\nCreating the Chat Components<\/h2>\n
We will create three main components for our chat application:<\/p>\n
\n- Chat.js:<\/strong> The main chat container.<\/li>\n
- Message.js:<\/strong> A single message component.<\/li>\n
- MessageInput.js:<\/strong> The input field for sending messages.<\/li>\n<\/ul>\n
1. Chat.js<\/h2>\n
This component will hold the chat messages and handle the state of the chat application. Let\u2019s start coding:<\/p>\n
import React, { useState } from 'react';\nimport Message from '.\/Message';\nimport MessageInput from '.\/MessageInput';\nimport '.\/Chat.css';\n\nconst Chat = () => {\n const [messages, setMessages] = useState([]);\n\n const addMessage = (message) => {\n setMessages([...messages, message]);\n };\n\n return (\n \n \n {messages.map((msg, index) => (\n \n ))}\n <\/div>\n \n <\/div>\n );\n};\n\nexport default Chat;<\/code><\/pre>\n2. Message.js<\/h2>\n
The Message component will represent an individual message in our chat application. Here is how you can create it:<\/p>\n
import React from 'react';\nimport '.\/Message.css';\n\nconst Message = ({ text }) => {\n return (\n \n {text}<\/p>\n <\/div>\n );\n};\n\nexport default Message;<\/code><\/pre>\n
3. MessageInput.js<\/h2>\n
This component will handle user input and emit messages to the main Chat component:<\/p>\n
import React, { useState } from 'react';\nimport '.\/MessageInput.css';\n\nconst MessageInput = ({ onSendMessage }) => {\n const [inputValue, setInputValue] = useState('');\n\n const handleSubmit = (e) => {\n e.preventDefault();\n if (inputValue.trim()) {\n onSendMessage(inputValue);\n setInputValue('');\n }\n };\n\n return (\n \n setInputValue(e.target.value)}\n placeholder=\"Type a message...\"\n \/>\n