How I Write Clean Code in React

In this video, I'm going to walk you through my  process of writing clean code as a senior React developer. This process has basically been built  over eight years of experience, and hopefully it can help you write better code. And also, if  you want to learn how to build a big and complex application with React as a total beginner, check  out Project React in the description.

So over here, we have a simple React application with a  simple component, and we have your profile IDs, which is a static array of numbers. We have one  all the way through five. And then we're taking those IDs, we're mapping over each one of them,  and then for every single one, we're rendering a simple anchor tag, and we're redirecting to slash  profile slash ID.

Now our task is to actually build out the profile page that this link is  going to send to. And through that, I'm going to show you my process of approaching this and how I  write clean code, and we're going to do it in very few lines of code. So the first thing that we're  going to want to do is come here to our sidebar and create a new folder, because this is an empty  project.

We currently don't have a folder for all of our page components. So we're going to come  here, make a new folder, we're going to call this one pages. And inside of it, we're going to make a  new file.

And we're going to do profile page. tsx, like so, create it and then open it. In here,  we're going to do rgsfc.

For a shortcut, we're going to do profile page. And then we're just  going to put a div over here. And now we're going to close this what happened, there we go.

Why is  this always so much more difficult than I want it to be. And in here, we're going to put the content  for our actual page. Now I'm keeping things simple for the video, we don't actually have any routing  solution set up to actually render this page on slash profiles.

But you can use your imagination.  That's not the point of this video. The point of this video is to teach you how to build this  component and the other components.

And more importantly, how to approach building them. So  the first thing that we need in this component is probably some styles right for the general  page. So we're going to come here and do class name.

And we're going to do container and then MX  auto. What this is going to do is this container class here is going to set a max width for this  entire diff. And the MX auto is going to make sure that this is centered.

Now the thing about the  styles over here is I wouldn't put them directly inside of this profile page component, because the  truth is, in reality, in a real project, you're most likely going to have other pages in your  application. And they're most probably going to want to also have the same styles over here. These  are more technically called the layout styles than specific styles related only to the profile page. 

So instead of doing this, what I would actually do instead is I would come here to my sidebar,  and I'll do a new folder here, because again, we don't have a folder for components, we're  going to do components. And in here, I'm actually going to do a component. And we're going to, I'm  actually going to do a component, we're going to call this one page layout.

tsx, like so. And in  this component, we're going to put these exact styles. So let's close the sidebar, let's come  over here.

And let's take actually all of this, because this is going to be pretty much the same.  Let's go back here to page layout, rename this to page layout, so page layout. And then we're going  to have this component taken children as props, we're going to put these styles over here, and  then wrap the children with this diff.

That way, we can use this for any page in our application,  and always get the same styles applied. So we're going to come here and we're going to do type  page layout props. And that is going to be props with children.

And we're going to import this  directly from React. Let's keep things simple, we're not going to have any other props over  here. And then we're going to do here, children, children, and then page layout props like so.

And  then we're going to pass these children directly inside of the div children like so. Now we have  the page layout component, we can come back here to the actual page, remove these styles, because  we're not going to need them. And then instead of this div, we can directly do page layout,  import this from components slash page layout, and then put our content over here.

For example,  we're going to put h1 profile page like so and remove the space. Now we did the same exact thing  as we had it before. But we've extracted all of the layout styles inside of a separate component. 

And we can actually use that component in here in the profile page and any other page that we have  in our application. This is also really useful in the case where you might want to add different  things to this page layout. For example, in a lot of cases, you're going to have a nav bar component  over here.

And if we save, we might also have a footer over here as well, right, these would go  inside of the page layout, because you don't want to have to import and put all of these components  in every single page. Even worse, if you want to change how these are displayed, maybe this gets a  wrapper div or something with some styles, you can put them once inside of this component. And then  every page that uses this component automatically gets the same exact styles.

This makes it much  more cleaner. And it's much more scalable to do it this way. Now here's the thing, what we're  currently doing right now inside of this video is something called learning by doing right, I'm not  just telling you and showing you theory and just boring you with that, I'm actually showing you  how it's done.

And more importantly, I'm helping you understand why we do it this way, instead of  another way. And that's great, because that is also what the sponsor of today's video Brilliant  also does. So Brilliant is a place where you learn by doing with thousands of interactive lessons  in various topics such as math, data analytics, AI, and more importantly, for us programming. 

Brilliant has a learning platform that is designed to be uniquely effective. Each lesson on there  has you solve problems using a hands on approach that lets you play and get a feel for different  concepts, which actually has been proven to be a method six times more effective than just watching  simple lecture videos. Plus, all of the content on Brilliant is crafted by an award winning team of  researchers and professionals from places like MIT, Microsoft, Google, and more.

The great thing  about Brilliant is that it really helps you build critical thinking skills through problem solving  and not memorizing. So while you're building real knowledge on specific topics, you're also learning  how to be a better thinker. And it helps you do all of that in just a couple of minutes a day  with really fun lessons that you can do whenever you have the time.

It's really the opposite  of mindless scrolling, and it really builds a great habit. They actually have some great  courses such as thinking in code, which follows what we're doing in this video and teaches  you solid foundations for computer science, which will help you actually become a better React  developer. To try everything that Brilliant has to offer for free for a full 30 days, visit  brilliant.

org slash cause and solutions, or click the first link in the description.  You're also going to get 20% off an annual premium subscription. Thank you once again to  Brilliant for sponsoring this video.

And now let's continue learning about clean React code.  So now we have to profile page, this profile page is going to receive an ID. So we're going to come  here, we're going to do type profile page props, that is going to be a simple object with  profile ID.

And that is going to be number, let's assume that this ID somehow gets passed  through our navigation solution, which again, we don't have on setup user imagination. Here,  we're going to do profile ID, and we're going to do profile page props. Now we're going to want  to use this ID to actually fetch the data of that profile, because the ID obviously isn't enough. 

And then we're going to want to display the data inside of this component. So to do that, we might  do something like this const, and then profile data, set profile data, and then use state, we're  going to define this to undefined for now. And then depending on how you do this, you might  use react query, you might do something else, we're just going to do it in a simple use effect,  because it's sufficient for this video, we're going to do use effect.

And then we're going to  call this a function, we're going to give this a dependency array, which is going to be profile ID.  And inside of here, we're just going to do const fetch profile, profile equals a sync function.  And then here, we're going to do a weight and then fetch slash API slash profiles.

And then we're  going to pass your profile ID like so. And then we're going to actually we're going to need the  response or const response equals a weight, then const data equals a weight, and then response dot  JSON. And finally, we're going to do set profile data.

And we're going to do profile actually data  and set the data inside of our state. And finally, we're going to call fetch profile. And we're  going to fetch profile.

And we're going to call this function directly inside of the use effect.  So now again, this is a very simple example. But essentially, you have some code that is going  to fetch the data based on this ID, and that is going to set it in some state.

Now, this is all  well and good. And this will work, this is going to fetch the data. And then obviously, it's not  handling loading and error states, which again, it's fine, it's going to set the data inside a  profile data.

And then we can use it directly in this component. But again, I wouldn't do it this  way. This is not clean code.

The thing is, this code shouldn't be long inside of a page component,  a page component, its only responsibility is to take all the different pieces of code and things  that are available across the application, put them together and actually built what it is to  actually be the profile page. It's not responsible for actually implementing the details of those  specific things like this fetching, for example, it should just pull something that fetches the  data instead of implementing the data fetch itself, if you get what I mean. So instead, what  I would do is I would come here to my sidebar, and I would create a new folder inside of SRC.

And  we're going to call this one hooks like so inside of here, we're going to create a new file, we're  going to do use fetch profile dot ts, we're going to close this open up use fetch profile. In here,  I'm going to export one simple function export function, use fetch profile. And this one is going  to take profile ID, which is going to be of type number.

And in here, we're going to put the same  exact code as we had over here, we're going to take all of this code here. And we're going to put  it directly inside of use fetch profile, which is a custom hook, we're going to come here import  use state, we're going to come here and we're going to import use effect. And finally, we're  going to return profile data like so the benefit of doing it this way is that now we've extracted  all of the logic of actually fetching a specific profile based on the profile ID in a separate  component.

This makes it reusable and makes any component that actually needs to fetch the profile  just have to import this use fetch profile hook. And it also removes the responsibility of profile  page to actually implement the details the actual implementation of fetching a user's profile. And  then going back to profile page, the only thing that we have to do is we just have to do const  profile data equals use fetch profile import this from adhook slash profile, and then pass  it profile ID like so.

And now we have the same functionality, we have the same profile. So now we  have profile data over here, we're actually going to want to do something with profile data. Let's  say we want to actually use it here, profile data, and profile data contains some things that we  want to put inside of this component.

Again, I wouldn't do it this way, because once again,  it's not the responsibility of profile page, to actually have the code that implements the UI  of the profile data. Instead, what I would do once again, is I would come here inside of components,  and I would create a new file, and I would call this one profile data dot tsx, like so, and put  all of that logic inside of a separate file inside of a separate component. So here, we're going to  do our jsfc, we're going to profile data, and then we're going to return for now empty, you can just  let's see what happened, you can just imagine that this will do something cool with profile data,  right.

And then here, we're just going to have this type profile data props. And that is going to  be an object, it's going to return data. And we're just going to put any for now, because we actually  don't have any types, it doesn't really matter, we're going to do here this, and we're going  to put profile data, profile data props, like so.

Now we have a separate component called  profile data, which takes in data over here, which can be used to actually do something cool  with profile data and actually show the UI of the profile data. Then once again, we're going to come  back here to profile page. And instead of putting profile data like this, we're going to remove  it and we're going to do profile data, import this from components slash profile data, and we're  going to pass data over here as profile data like so and close this component.

Now we did the same  exact thing as we did here with this custom hook, but we did it with a custom component. Instead  of having the profile page be responsible for implementing the logic of displaying profile data,  we can actually create a separate component, pass it the profile data and have that work that way.  The reason why you want to do things this way, whenever you're building react applications is  that now look at profile page and how small it is, right?

And we actually have a lot of functionality  here, we're fetching data directly. So we have a whole fetch system that is part of this component  that we just have with one line of code, then we actually have layout and styles, we actually  have if I remind you over here, we have a navbar, we have a footer directly inside of this profile  page over here. And we actually have the UI that displays the profile data, all with that with  like 10 lines of code, nine lines of code, actually, this is how you write clean code  in react.

And then profile data over here, you can imagine that this component would also  make use of other components. For example, let's say that we had a part of it that was the  something like the avatar component, right? So we're going to do avatar and close it like this,  you can imagine that this would hold the actual profile picture of that specific profile, and  might have some functionality to allow the user to actually edit their own profile might have a  button that when you tap on it is going to pull up a file input or something, and then allow you to  edit the profile, you would put all of that in a separate component.

And not inside of profile data  over here, you would just pass the avatar whatever you need to pass it. For example, I don't know we  can do like profile photo equals and then profile data dot profile photo, photo like this, right? So  now this component will have one responsibility, it's going to have the actual functionality to  display the avatar and any other functions related to it.

And we pass it from here any properties  that it needs to do its functions. If we then had another component, for example, the profile posts,  we can have something like post list, right, which is a list of posts. And we can actually do  something like posts.

And then we're going to do profile data dot posts, like some and pass the  actual post of the profile data to post list, post list would then take those posts would  actually render them would probably defer the rendering of each specific individual post or  another component. And doing it that way, you build really clean code in React. And you build  applications that can scale really, really well.

And then as you do this, you're eventually going  to get to a point where you're rendering actual UI. And that's where you're going to use UI  components. So things like buttons, inputs, text, cards, and so on, you're going to use those to  actually render what is being shown on the screen.

But as you can see, those components usually  don't go directly inside of a page component, we're never going to see an actual UI component  over here. I mean, yes, we have an h1 tag, but we could directly put this inside of profile data  as well, it's completely up to us. But usually, you're not going to see individual UI inside of  this component, you're going to see them either in a feature component, which is this profile data,  which actually handles the feature of displaying a profile data, or in other sub components, like  you could expect to see some UI components inside of the avatar component, like an actual thing  that renders an actual image with the user's profile photo that will go inside of this avatar  component.

If you do it this way, and if you build a habit of splitting things up into smaller  components or custom hooks every single time, you're never going to build really big components  that are super messy. And you're always going to write clean code by default, it's going to be  a great habit for you to learn. And some of you might say that this might be overkill, like why  are we creating a whole custom hook just to fetch this one user profile.

And the thing is, it might  seem like overkill, but it's really not because the moment that you need to use this hook in a  separate place, you're already going to have it created in a separate file, instead of taking the  exact code that you had here, and duplicating it inside of two components that is worse to do.  And you're much more likely to do that if you don't already have a custom hook that is already  created and reusable for you to use. So really, the way that I write clean code and react is I  always follow this approach, I split everything up into different types of components.

So page  components, which have the responsibility once again, to take everything across the application  and put them together and make up what it needs to be the actual page that is trying to  render. And then we have feature components, which go inside of page components, usually that  handle individual features. And those might use other feature components are directly might use  UI components to actually render out some UI.

It's really not that complicated. Actually, what  is complicated to me as ironic as that sound is to actually write complicated code. I don't get how  people write complicated code.

When if you follow a simple pattern of actually delegating creating  custom components, you're just never going to end up writing any complex code ever. And most of your  components are going to look like this. So there you go.

These are some simple tips and tricks  that I use on a daily basis to always make sure that I write clean code and react. I hope that  you enjoyed this. And I hope that this has now made you a better react developer.

And once  again, thank you to brilliant for sponsoring this video. If you enjoyed this video, and you  want to see more videos just like this one, make sure to leave this video a big thumbs up,  you can also click here to subscribe. Or you can click here to watch a different video of  mine that YouTube seems to think that you're really going to enjoy.

And with that being said,  my name has been Darius Cosden. This is Cosden Solutions. Thank you so much for watching, and  I will see you in the next video.

Ciao, ciao.