React Building Comments Application

preview_player
Показать описание
Learn how to create comments system in React. Comments system is a popular feature for any React project but it's not easy. In this video we will build comments section from scratch with replying, editing and removing comments functionality. We will use plain React with React hooks and build comments list, single comments and comment form components to implement it correctly.

MOST POPULAR COURSES

SERVICES THAT I'M USING

CONNECT WITH ME!

REFERENCES

TIMESTAMPS
0:00 Introduction
2:39 Creating comments components
5:08 Fetching comments
7:29 Adding comments markup
10:15 Rendering single comment
13:10 Rendering replies
18:46 Rendering comment form
27:44 Comment action buttons
36:50 Reply and edit comment form
47:11 Editing comment form

This video is NOT sponsored. Some product links are affiliate links which means if you buy something I'll receive a small commission.
Рекомендации по теме
Комментарии
Автор

For anyone wondering how to nest infinitely or set the max nesting at a predefined level, it is pretty straightforward to do given the code already. Even though like the author said, it is not performant and is discouraged to go beyond 2 levels, it can be done. All you need to do is replace the replies prop that is passed into <Comment> with the getReplies callback, and then get the replies for that comment by calling that callback within Comment. You can also add an extra "nesting level" property to comment which will be incremented whenever you reply a comment. You can then disable the reply button based on whether or not this property has reached the max threshold.

mr_ani
Автор

Thanks for the explanation. Usually when comments can have replies, replies can have replies too. My next challenge is to find out how I can Map a flat array to a tree view and render nested components based on my data.

moonkin
Автор

Amazing tutorial
This is just what I was looking for 🔥🔥

codexjay
Автор

Finally found what I really needed! That was awesome!! Thanks! 🎉🎉

Fatima-yar
Автор

Just what I've been looking for. Thank you!

BabalolaYusuf-pmdt
Автор

I like the approach with the flat comment array! Have you ever built such a comment system with pagination? I found that it makes it 10x more tricky 💀

codinginflow
Автор

I’m excited to dig into this! So if I have data from the backend like so…

{
feedback: blah blah,
comments: [
{
id: comment1,
content: blah blah,
replies: [
{
id: reply1,
content: blah blah
},
],
},
],
}

…would you flatten the data and patch the replies to look like comments then add parentId’s to them? Or would you approach it differently?

SteveAnthonyart
Автор

Man thank you very much for this, this is lifetime knowledge, very appreciated.

davidgomez
Автор

Awesome and well explained tutorial.Thankyou

jayeshkarkare
Автор

Awesome guide, very helpful. Thank you.

andromadusnaruto
Автор

amazing video monster, thanks for that, greetings from Colombia

sergioyepes
Автор

thanks a lot sir for an amazing tutorial😍

shikharpandya
Автор

Cómo hago para que al actualizar la página, no se borren los nuevos comentarios?
Tenes algún video conectando este código con nodejs y una base de datos para ir guardando allí los nuevos comentarios?

JuventudLLAFederacionER
Автор

Amazing video. Thankyou for posting such an easy to understand and accurate tutorial..

karanjathoul
Автор

you are really awesome dude. you saved me from my sanity

dunder
Автор

Great Video! Really helpful. Thanks a lot.

indranathghosh
Автор

Thank you very much. If I get a job, you have my donate. I will buy some courses. Double win for us

yourSOULismy
Автор

this was an awesome video. really appreciate the details and explanations :)

galdinorosas
Автор

Thanks for the video ! In a real application when you post/edit/delete we need to use http request from the backend with axios no ??

vireltv
Автор

Sir very thanks for teaching this code.

prashanthdasar-rmoz
welcome to shbcf.ru