Create the Web WhatsApp UI with ReactJS - Part 7: Messages

Опубликовано: 15 Июнь 2026
на канале: Frontend Coding
312
3

In this part we work on the messages! We also divide the chatbox component into smaller components, one for each section.

The code in this video can be found on this GitHub repository:
https://github.com/FrontendCodingYT/c...

Timestamps:
0:00 Introduction
0:37 Adding a background color
1:00 Creating the message component
1:55 Splitting chatbox into multiple components
9:18 Import message component in chat
9:52 Analyzing the messages
10:40 Aligning messages to the bottom
11:57 Styling the message
13:36 Adding padding to the chat section
14:32 Adding a background color to the message
14:52 Adding container to the message
15:55 Continue styling the message
16:37 Adding a little arrow to the message
21:05 Making the message bigger
21:30 Creating the received messages