How To Create A Messaging App With Socket.io And React

Web Dev Simplified
Web Dev Simplified
378.6 هزار بار بازدید - 4 سال پیش - 🚨 IMPORTANT:Get started with Embold.io
🚨 IMPORTANT:

Get started with Embold.io for free: https://embold.io/products/overview?u...
Use code US21F29A for 20% off a paid account (Only applicable in India)

Whatsapp is an incredibly popular application, but the technology behind it is actually pretty simple. In this video I will show you how to create a messaging app similar to Whatsapp with React.


📚 Materials/References:

GitHub Code: https://github.com/WebDevSimplified/W...
useRef Tutorial: Learn useRef in 11 Minutes
useState Tutorial: Learn useState In 15 Minutes - React ...
useContext Tutorial: Learn useContext In 13 Minutes


🧠 Concepts Covered:

- How to use Socket.io
- How to create custom React hooks
- How to create custom React contexts


🌎 Find Me Here:

My Blog: https://blog.webdevsimplified.com
My Courses: https://courses.webdevsimplified.com
Patreon: Patreon: WebDevSimplified
Twitter: Twitter: DevSimplified
Discord: Discord: discord
GitHub: https://github.com/WebDevSimplified
CodePen: https://codepen.io/WebDevSimplified


⏱️ Timestamps:

00:00:00 - Introduction
00:00:34 - Demo
00:02:20 - Code Setup
00:03:51 - Login Page
00:13:47 - Custom Local Storage Hook
00:18:50 - Dashboard
00:20:21 - Sidebar
00:29:50 - Create Contact Modal
00:36:01 - Contact Context
00:41:18 - Contacts Sidebar
00:43:01 - Conversation Modal
00:48:43 - Conversation Context
00:54:12 - Conversation Sidebar
00:59:11 - Current Conversation Component
01:04:50 - Send Message
01:13:45 - Displaying Messages
01:23:43 - Server Setup
01:28:28 - Socket.io On Client
01:37:26 - Outro


#Reactjs #WDS #WhatsappClone
4 سال پیش در تاریخ 1399/06/15 منتشر شده است.
378,690 بـار بازدید شده
... بیشتر