How I Write Clean Code in React

VSCode Theme | Font → Material Theme Darker | Menlo, Monaco "monospace"

In this video I will show you how I write clean code in React. I will show you my mindset, how I approach a problem, and how I break it down into multiple small parts to make it manageable and scalable. Through this video you will learn how to write better React code yourself, and become a better React developer!

[johndevnoza]

as a begginer one, im doing this by habbit and i was scared if it was overkill or not. now i feel happy!

[calmmind]

mate, i'm enjoying your react content, this is what i need to learn, keep making content

[dr_jacko]

This is a good start, but in general I would prefer to abstract fetch away a step further than hooks or components and you also need to handle loading and error states with your async calls.

As an example, create a UserProfileRepository and UserProfileService classes which have functions for CRUD on UserProfiles. Use the singleton pattern on these classes and keep them in a context where it is required in the app.

[shoaib_akhtar_]

Thanks for explaining the importance of achieving modularity in our code.

[roshanmaddumage]

I'm truly captivated by your content and watch it daily during my free time. Please continue to create great content. Regarding this video lesson, I have a question: How do you plan to organize the subcomponent or child component files when you break down a large page into smaller components?

[hooooman.]

A beginner here, this approach definitely makes our code more clean. but my doubt is, say if we are building a little advanced/complex project, the same approach makes too many folders and files ?

[devquen]

PageLayout -> ProfilePage -> ProfileData -> Children Components (Avatar, PostList, etc)

[mashab]

why not having ProfileData component call the useFetchProfile ?

[sachityadav]

This was Needed 😀 ThankYou, i was having anxiety seeing lots of styling classes in return of every component

[fanespratama]

Take a note that when you use the custom hook with useEffect in more than one file, the useEffect will run more than once, so keep one custom hook for every layout/component (let say one for user list, one for user details). If not, just move the useEffect outside the custom hook

[positive]

I would move static data array upper, from the App component. It’s static, no need to recreate it on every re-render.

[mulengachitalima]

Awesome video.. Really appreciate how you always adhere to SOLID principles in your videos

[sontranvan]

Simple, effective tips that are easy to learn and apply. Thank you for sharing your knowledge!!!!

[edward-vonschondorf-dev]

Great video Cosden! It's definitely something I've been looking into lately cause I don't like long complex components that I have to edit/create. I was just curious about something though, i noticed in your imports you have an @ symbol at the beginning and was wondering how that was setup and if there is an advantage to it? Thanks!

[berigfp]

Perfect timing, just wanted to learn about those :D

[gherardivictor]

Good quality and valuable content, thanks

[QueeeeenZ]

I think you can use Nuxt and all the layout, structure will be already configured for you out of the box.

[delightful]

is it me or is the audio levels on this video really low. i have my headphones at 50 % and its quite low compared to other videos

[carloseduardomagalhaespere]

Thank you for another great video! I've been learning a lot here!
One question: Why do you prefer to use type instead of interface in the props definition? 🤔

[isaacjames]

Make a video about Social Login system in react please