React Best Practices

hey guys how's it going i'm back here with another video and today i wanted to make a video basically chatting with you guys and talking about a very important topic especially in the react community which is what are best practices and before we actually get into the video i want to say that best practices actually depends on ever like each person each person can weigh in the benefits and the like the pros and cons of doing something and it usually like depends upon the developer however there's obviously some stuff that you guys should know so that you make the decision on your own and also there's some stuff that if you're working on a larger company you will have to do because it is best practice it is easier it makes the code read like increases readability it also makes the code run faster in some cases so that's just better so in this video i'm going to talk about some of the different best practice things that i can like imagine that i usually do and i want to just present it to you guys so before we get into the video if you guys could leave a like i would really appreciate it and let's start so you can see right here uh the first thing i want to talk to you guys about is about is basically separating components from ui and logic this is extremely important in my opinion because it allows your code especially your code base to be a little more readable also a lot more maintainable so you can see right here i have a very very simple application i just rendered up here my app.js my app component and i created a simple a simple counter you can see that if i click if i click on this button right here called increment uh a simple state called counter v val just increases because we have a function here called increment which just sets the counter vol equal to counter vol plus one it's a very simple counter application we're rendering here the value for the counter and we have here the button however what is wrong with this well it's not that it's wrong but we can see clearly that if we have a lot of logic in a component and we have a lot of ui in a component then the component will simply be large it would be huge because we'll have a whole separate part which is all devoted to logic and a whole separate port which is all devoted to ui and the jsx of the of the component so what i like to do is i like to separate into a presentational component and a logical component so what do i mean by separating into two components well let's actually transform this application into a like a type of application that i would actually build if i were actually following this best practice well first of all i wouldn't be able to define my states in this component because the this component would be purely for ui would be the presentational component so then the first thing we need to do is i'll just comment this out for now but let's just comment this out and we are not going to write any logic inside of here we don't even need to import the use state hook here because we're not creating our states here but this over here we should let it for now so it's our simple uh ui it's like all the visual part of the component and what we need to do is we need to create a different file usually what i like to do is like divide my project into folders so for example i have a components folder a pages folder and for each kind of like different component i want to have i create another folder and inside of there i put the two files the presentational part of the component and the logical part of the component in this case i'll just create the file here for example the logical component would be called counter dot js just a simple file that is going to contain all the logical stuff that should be used in the app.js and what do i actually write here well we're going to basically create a custom hook and how we're going to do this well we can come up here first of all and import the use state hook because we're going to use that in this component and we're going to import that from react then we have to oh accidentally pressed enter then we have to create the actual function so let's create counter by the way don't forget to call your functions or your components make them have capital letters because like it always gives problems if you don't so inside of here we can put all the logic that we want and at the end every single piece of information we want to get in our visual component we can just return so we can pass an object containing all the information we want what kind of information do we want well first of all we want the state so let's define the state up here we can just copy and paste because we already defined it before so we can just create the state inside of this component and what else do we want well we want a function that is going to increment the the counter whenever we click on a button so we can just come here and again copy and paste so if you like you can see where this is going right we define every part of like every single logical thing we have in our component in a different component and now we have both of this and you might be wondering well how do i access this into in the visual component how do i actually do this because i'm see like you can see right here i'm i'm using increment function and i'm also using the state over here well we have to return everything that we want to see in the other component including the counter vol so that's the first thing we want to return and also we want to return the function because we want to access this function in the visual component and at the bottom we can't forget to export default counter so we're just exporting this logical component and if we want to access it we can just come here and at the top we can say import counter from and we put the path of our component so this case is com dot slash counter and now over here we can this structure this hook we can destructure this component by saying const and then we can just say the name the name of the variables we want to use like increment and counter vol and then set it equal to counter this is how you basically do it now we have two values as you can see it even auto completes because it knows that we have this two pieces of information in our counter by the way this is how you create a custom hook and react so we can access these two pieces of information that exists in this component and now we can use both of them over here and it will work perfectly i'll just save this so you can see and we refreshed our application and now it continues working just as before however there's this the only difference is that now everything that is logical exists in a different and separate component meaning our code is a lot more maintainable and readable if we have like a large project okay guys so now we go into the second tip that i would give you guys to improve your best practices and this is actually something i was reading like i i was reading i just thought of adding this in this video because i was reading some tweets and i i read a tweet by ben edward which is another youtuber and he was talking about basically how he he doesn't understand the hate with inline lambdas which if you don't know what it means is basically instead of for example saying increment like put it passing a function over here we actually do like write the function anonymously inside of the on click and you've seen me do this so many times for example if i came here and passed the set counter vol here as well so set counter vol and instead of just incrementing by using the increment function we actually grabbed the set counter vol and we just did something like an an anonymous function which is a lambda function and we did it like this and i said set counter vol equal to counter vol plus one we could have put in all the logic that exists in the increment function over here inside of this on click uh property however what is the problem with this well you've seen me done do this a bunch of times and i actually do this a lot i don't like i i don't see that much of a problem with it however there are some stuff that you should be aware of for example you shouldn't be doing this in every single situation why wouldn't we do this why wouldn't we want to do this well you can see that this function over here only exists inside of the jsx inside of the return statement so inside of the ui part of the application so what does that mean well remember that every time the page we rendered this over here will be real like we'll run again meaning that this function at every render will be recreated when instead of that we could just create the function once outside of here and even if we change a valley for a state the function wouldn't be recreated it would just already exist and we could access it we didn't we wouldn't have to recreate this function every single time when over here you can clearly see that it would be recreated at each rerender okay guys so the next thing i want to talk about is well how would i structure my application well so as you can see this is a very simple just this very simple react application here i just made it up to give an example to you guys but we're going to basically create the project structure that i would use if i were making a large scale react application well the first thing i wouldn't do is i wouldn't basically use this counter let's create random files in the middle of the src i would divide everything into folders and also the app.css i usually wouldn't wanna actually i wouldn't even use the app.css probably because i would just style everything in each component in each page so basically in my app.js usually i would have everything related to react router dom so i would define all of my routes and that would be literally it so i could leave it inside of my src but then i would have a few folders one of them could be routes which in some cases i also call it pages it will basically be a folder containing all the different pages we want to have in our application like if i had a home page like i don't know an about us page a contact page whatever different pages i want to have in the application i would put them inside of here and for each page i would create a separate folder for example if we had the home page i would create a folder called home and if i had the let me think the login page i would create a folder called login so we divide them like this and then for each of these folders i would have all the different components that would want to have that would be related to the home page for example i would have home.js which would be the page and i would have something like homelogic.js this is personal preference but this is what i mean by separating this is what i was talking about about separating the logic from the ui home would be the logic the the ui component and home logic would be the logic that would be used in the home component and we can't forget about styling so i do it this way but it's totally up to you people like people like to create folders for styles or people even like to just put the styles inside of the components which i totally hate in my opinion but i like to create here the home.css and just have all three of them over here which is perfect right and i would do this for each of the pages each of the routes so routes would be the first folder i would create the second one would be components and components could be whatever you want specifically it could be things that you want to reuse for example and what do i mean by reuse well at routes it's only pages but just imagine that you want to have a navbar right a navbar isn't a page it is just something that you want to have in every single page so you want to reuse it and you just want to keep them there so where do i where would i put a network well i would put it inside of the components so it would do exactly the same thing i did with pages inside of here i would create a navbar and for example if i wanted to have a footer which is like the the thing that appears at the bottom of a of a website i would create another folder called footer and you can see that now in components i would have wait did i did accidentally create the the footer inside of navbar yeah i think so but i'll create footer over here and okay it's not showing yeah i accidentally created footer every single folder inside of navbar i'm going to delete those and i just want to show you guys what i would do i would come here to components create another folder for example footer and i would have different folders for each component as i mentioned and i would follow the same route as i did before creating the css and maybe not the logic because i don't think like small components like footer and navbar network maybe yeah network would probably but fooder i don't think there would be any logic around it and finally what is another thing i would do and i don't know if a lot of people do this i would recommend i would create different folders for all the different small things you want to have in your application for example i like to have validations i like to have basically validations for every single input i have if i for example if i have a login page i want to validate if the information they put in the login page is correct information if the information they put in the email for example the email input is an actual email so i would create a folder called validations something like this then i would put here whatever i want if you guys want to want me to make a video on validations i could definitely make one but i use a library called yup which is a very famous library for validations and this is where i would usually put my validation and more importantly i would also have a helper folder so something like helper and inside of here i would just put every single logical file that could be used in several different components what do i mean by that well i actually put all my contexts information so everything related to context api inside of this helper folder and it is really nice because i can just define everything here i could use the context on every single component so i treat that as a helper and what else can we put here we can put functions that are used several times in application for example imagine in our application we want to basically have a function which uh turns uh i don't know turns uh an email to lowercase i know that's super dumb but just a function that does that or a function that sorts a list for example you know what i mean by by that right so it's just a function that you give an array and it will sort it well if i want to use that several times the application i would create here a file for example sorting yes and inside of here i would just write a function so cons something like construct i won't write a sorting algorithm here for you guys but you get you get what i mean right and at the bottom i would just export uh either export sorting like this and this and just access this for this function anywhere i want in the application so this is the basic idea of the helpers folder and honestly i believe that would basically be it i don't believe in just creating a hundred different folders in your application i know i created four of them i would probably create more but like for example i would have a folder also for errors so i can make something like this errors but yeah that's basically it you can you can play around with this best practices and project structure depends on you but but one thing that is always standard is to have the routes or pages the components and have somewhere to put your styles so that's the basic thing that you should know and finally guys i want to talk about some like two different technologies that i believe you should use in a rep react application and one of them is extremely like standard it's it's used in every large scale project it is eslint it just allows you to automatically fix like certain standards in your application for example if you want to create an application you want to keep it consistent throughout the application right so for example what do i mean by small changes if you want to always use semicolons at the end of like it's a statement then use like you could put that in eslint and it would tell you whenever you run the application if it is failing this condition and if it is you can just fix it automatically and eslint will fix it for you also for example using double quotes and single quotes you want to keep a standard right you want to keep it consistent if you use double quotes in one time one part of the application and you use single quotes on another part that's not as organized that you could as it could be so most companies use eslint and it will fix everything automatically and it's great it's hard to configure those so i recommend watching a video i can make a video on yes links if you guys want but it's really awesome and another thing is more like personal i love sound components if you guys see in my channel i have several videos on it i think i have like four and i have a full crash course on styled components it's just a lot it's perfect it's literally perfect it's a way to create components that are automatically styled and it's great this is the syntax as you can see you put all the css styles inside of it and you can just reuse code you can pass props to your css file and it's just perfect as you can see in my opinion right so i really you can see all the companies that use style components i would yeah google uses it github spotify like i would i would definitely think more of them use it but i would recommend using it and yeah also seeing this i forgot but use es6 instead of normal javascript just use es6 write functions with using consts and arrow functions it's just a lot more standard nowadays so yeah that's basically it for all the different small tips that i could come up in this uh for this video these are actually all the standard and best practices i actually follow they're also there are like some more general stuff like oh you should try to make your components as small as possible in the in the sense that you want to make your component do just one thing and just create several components to do a bunch of stuff and put all of them together but i didn't want to comp over complicate stuff and i usually don't even do like i don't i don't separate as much as i possibly could because i just write i i like to balance between writing maintainable code and following best practices and i believe everyone should do that so yeah i really hope you guys enjoyed this video if you enjoyed this video please leave a like and comment down below what you want to see next a subscriber recommended this video so i was really happy that they recommended me and i made the video so if you recommend me a video i should probably make one so yeah i really hope you guys enjoyed this video subscribe because i'm posting every single day and i see you guys next time

Channel: PedroTech

Views: 27,654

Rating: 4.8325791 out of 5

Keywords: css, javascript, learn reactjs, react tutorial, reactjs, reactjs beginner, reactjs tutorial, react js crash course, react js, node js, express js, pedrotech, traversy media, traversymedia, clever programmer, programming with mosh, tech with tim, freecodecamp, react best practices, reactjs best practices, react folder structure, file structure, reactjs clean code, react clean code tips, best practices in react js, web developer, react components, react custom hooks, custom hooks

Id: ocKqJCYkJCs

Length: 18min 11sec (1091 seconds)

Published: Wed Nov 25 2020