React PRO Tips & Techniques you should Know | Master React for Beginners

Key Takeaways

hi everyone in this video you are going to become a pro react developer yes you are here to write in this video i'm going to give you a five pro tips to master react and take it to the next level so if you're familiar with react if you're just like a beginner or even an intermediate developer just getting started with react knowing the ecosystem knowing this whole component system the managing stage redox store and all that kind of stuff that are like they might seem messy at first but yet granted for you to learn a lot so this pro tips from my understanding for a lot of people like older pro and advanced developers who just use react and bigger projects in industrial bigger projects they just like offer and recommend these kind of tapes and also as me i works on a lot of like react projects if you're familiar with my channel i do a lot of react projects so i got a chance to just take a look on what are those tips and what they can do for you if you just like take them right and just like master this kind of pro tips and just like use them to get into the next level with react so if you're not familiar with react hopefully you are because you're watching these videos react is simply just a javascript library for building user interfaces and for those of you who are asking like why react is so popular it's like so so damn popular everyone is talking about reacts i'm doing a lot of react components or a lot of react tutorial story and just like react is everywhere why is that basically reacts it's just like having this compositional declarative api where it allows you to use or reuse components create them once then reuse them everywhere this is actually their slogon pretty much and this is why reacts is so so popular and so lovely and yeah the api is pretty great it even also to actually create like what react is based on is creating a virtual browser for you to work with that has an easier api to manage and like much much better um you know api dom api virtual dom api to work with other than just like the real dom that nobody pretty much lacks and all this vanilla javascript so that's basically why reacts to that there's other opinions why react is super good but that's basically the react website in here and if you're familiar with react here is you're going to see the github repository has a 167 as of this video tutorial k stars so that's that's ridiculous like the whole facebook team pretty much maintaining those so what you could guess anything other than that so that's that's basically what react is [Music] so what i'm going to give you is just basically those tips just to get started with so here's actually a god of projects pretty tidy projects i use create react top to create it so the inside of this part you're going to find it by the way in the link description below you're going to find it in my github repositories so just go my github account you're going to find this if you just like need them for a reference or anything i'm just going to put them inside like folders so you could you could reference those and you can use them whenever you want or you want to learn something so this pro tips each folder here contains a pro tip in here and the reason i chose this one is actually to show you a demo and show you the code and show you actually exactly the differences between this and that so you can exactly understand what the tip can do for you on what this kind of pattern or this kind of technique if you're just like using your code what can do do for you pretty much and how you can just like improve your your your thinking pretty much your react code react application and all that kind of stuff so that's basically what it is i'm going to be starting with this just actually the most basic stuff is functional components so the first and the most important like first pro tip it's much more like an intermediate tip that a lot of people should already know it's just basically why you should use functional components as of react 16.8 so if you're not familiar with functional component is actually pretty much the new feature that reacts introduces since 16.8 of react has been releases and it's pretty much like allows you to use state inside a functional component instead of going like you and having to use classes for you know just like using states so functional components or that's what i call the future is actually hooks so in this particular like folder here got two like components one uses classes and the other one uses functional component and you got one for like doing the demo so the class components is actually the legacy api for creating reacts components so this is basically the first way like what initially reacts once he created and like uh put in public this is actually how it was just like rendering into the dom so this was the only way to render the dom so you have like a class component that extends the actual reactive components which is a pure component that's pretty much what a base component that want to call it and it just like it uses some state objects it has to put props for super in here to be able to use it throughout the components so you've got the state in here so this is where you keep up your state project or objects so you should be familiar with that and you got like this the main render function or render method so what it does it pretty much just like renders the dsx in here which is basically some html elements in here renders them you can have a text you can interpolate some state in here just to render it out of course we got some event handlers so whenever we click on something we're going to just delegate this into this method which is going to update the states with this set stage and it's going to update the counter with counter state counter plus one so that's just a basic component that what it does simply just a counter component so whenever you click on this count your plus plus button is gonna take the counter by one so it's gonna deep cop or keep going throughout plus some one one one one and yadda yadda so that's basically what the legacy api is actually used by you know class components to render in reacts so for class component they are still used like widely among developers mainly because they have its own pros so there's some scenarios you can actually use functional components so you have to fall back to class components but anything other than that my advice and the pro tip advice is actually just to ditch this code whenever you are actually doing something standard like just like rendering using the stage and just like updating the states and just like making these components renders is kind of like particular elements and updating the data and the state so on and so forth with event listeners and all that kind of stuff so in this case scenario what you should go for is actually functional components instead of creating this class component so if you're noticing in here we got this whole class just to render up this particular divs with an h3 and a button then we can click on this button just to trigger up this um this particular event in here to update the states so the hole here is actually a huge um class component and pretty much has like a lot of lines of account to do that now what functional components actually offers for us it's much much simpler api to work with plus a much simpler and cleaner code to look at and of course we can all go and use the sweetest thing which is hooks so hooks is basically here what it allows you actually to do is actually use state so you remember cost components you got this like the way to do this dot set states for functional components you basically uh you can you use hooks and i'm not going to go like into beginner like zero level self to teach you what it actually hooks but like i'm just saying that you actually understand exactly the difference between functional components and class components so here we're using this basically offers us a state so we can use this function to set the state which is update the state and the counter to like you know gets the actual state value and this one just like a function inside of a function if you're familiar with uh pretty much closures in javascript so that's basically a closure you've got this function that can be only defined inside of this function components or my function components then we can use that as actually an event listener and we got everything pretty much the same by just like returning that and that's it screw see look how tight it is we're going to like i don't know we can we can say like a 10 lines of code versus 20 lines of code in here boom they can do the same diff thing and without actually the complexity because all we need actually to render up something that does the job and we need an event listener i mean we need to show the counter and we simply need a button just whenever we click it it takes the counter by one and it keeps going and going and going so that's basically what it does and it's pretty pretty straightforward so a function of component in this case can be used much much better and why i'm saying function component is actually much better than class component because here you can actually separate this if you have like quite big a large components you can separate it into multiple function components they can combine them together using some dumb components that you only use for rendering or stuff like that and you basically got a much cleaner code than just having everything inside of the class components that doesn't make sense pretty much so that's the point of like why functional components are much much better in terms of class components if you take a look on that if we go back to the react top in here let me close both of these so what we got is actually functional components so this is the part what it does and the difference between those they look identical just like from the first log there is absolutely no difference and it's the same pretty much the code is completely different of course but the like what it does and what it renders is pretty much the same we got the same buttons whenever we click on that function component it does the same we click on that too it just like keeps increasing the counter and there is totally no difference so yeah you can choose whatever you like but still i'm not saying functional component is actually the best way to go with that because there are some case scenarios you have to use class components like higher order components you're using some other patterns that require you to use class components but anything other than that yeah functional components are the best way to go for that particular case scenario the second pro tip that pretty much everyone that uses reacts every react developer should know about and every react developer should use is actually do not use array map index if you're not familiar with that it's basically whenever you have a list and you are actually going to look throughout this using like an array.map then you render up every single item on that list you have to provide a key to reacts for it to actually be able to know and differentiate between which child has changed which one has updated which one has not so we could like you know every single time we can run the reconciliation algorithm and it could pretty much tell which child to re-render and which just to keep that because that's for performance reasons and you have to know exactly which chart change or which doesn't so it pretty much knows which one to re-render or which one just to keep it on the tree there so it doesn't have to do like a full tree re-rendering so for the no map index in here if we take a look on the pretty much the way that we do it always like every single developer goes through this it's actually using the index extrusion we got stars and by the way just like a quick notice i'm using typescript in here why because also i got like a tip for type scripting here so i have to like tell you exactly why i'm using typescript in here and why you should actually start using timescript if you are just getting started with the projects or you can integrate and all that kind of stuff but anyway so here we got like a stars array that holds a couple of objects each one holds a star name and there's actually just like you know stars in our galaxy i guess i'm not sure so polaris cyrus and all that kind of stuff and we got like this is an interview just typescript if you don't know just if you don't know typescript perfectly just ignore that just never mind about this and the map index components in here what it does it has a ul so it has an ordered list and we are looping inside of like stars.map every single time we are rendering the li and that's pretty normal right we just like doing a map and rendering cool everything sounds good the dangerous part in here is actually using or assigning to the key the array index and in fact this one is going to be like zero one two three four like depending on the number of items you've got inside of like the stars array right so the part in here we are actually assigning those to the key and as i told you before the key is actually used by react to tell which component has changed and which hasn't and in that case it has to be a unique key only assigned to that particular component what i mean by the unique key has to be generated for that particular component for example for this object has to be generated like a specific key for it like an id if you if you think of it like you think of it like a database id that can be generated for that particular one it can be put inside of this object and it can be used later on for the key to identify that particular object or that particular star whatever you want to call it so that's the reason but in in this one it's going to always be the same it's always going to be start from zero up and if you like got an application that changes pretty much for example the order if you got like you know jack and drop and you can change the order of the items and all kind of stuff you're going to become messy and reacts won't be able to know which one to update and that's where you can start getting bugs and all that kind of stuff now for this code it will work perfectly you won't notice any stuff no update or no issues whatever but if you start putting other like code and side effects some vanilla javascript into it you're gonna start noticing that reacts it's not updating the state or pretty much not updating and rerun doing the list as expected to be so that's the pretty much the point and that's what i'm telling so do not use index in here as a key unless you're knowing what to do but anything other than that any other case scenario just do not go for this and use the other way around now the next one what you should go through is actually using a unique id exclusion here for the interface star we got an id belonging to this but it's actually like an optional one so you don't care about it now the stars we get into so let's assume you're getting this from an api from like from our server or something and the name just the name only exists there it doesn't have any unique id from the database unfortunately so we can use that now we can go through is actually we can go and generate as a unique name for it and we can like assign it so we can we can have this unique name and what i'm using for this one i'm using a nano id so nano id is actually a package that allows you to generate um like unique ids now i guess if i remember right i guess um yeah there are 21 simples and symbols sorry and you can you can pretty much manipulate that using configuration and that's where pretty perfectly generates it's pretty much like a new id but it's much more friendly api and easier to use so yeah it kind of like uses these to just generate this random things now this random key can be used an id for that for that particular star now what i'm doing here is actually i'm having a function um inside of this like function or method we got new stars we are looping through each starting here what we're doing we're using the same stars properties but we are actually assigning a new property called id and we are using nano id to generate that so this another idea is going to return it's going to return something like this so it's going to return a unique id for that particular stuff for example polaris is going to have a unique id different than cyrus and all the other stars so that's basically going to happen in here we're going to have every single one that has a unique id and all of them going to be put inside of the data structure do not use this like outside like here you can you can pretty much do something like id like nano id and every single time you're going to use this id because why basically this one's going to every single time when every single render remember reacts runs this on every single render so it's going to run a couple of times and every single time you're going to have like a new id and this new id you're going to just like sign in here and reacts will tell oh the key change so i guess i have to update the whole tree and it's gonna update the whole tree even though nothing has changed so in that case you're gonna like drastically lower the performance down you're going to see a lot of performance issues so don't do this this is bad really bad so just go through this approach you can have in this one you can set prepares stars you assign them onto a state then it's from this stage screws in here what we're running this method is being run only once so here's the fact is being run only once which means on components did mount after the component is mounted this one runs only once and it prepares that it puts it inside of this state now later on what we can do just goes look through the stars in fact i'm not doing this right there's a bug but yeah just look through prepare stars.map you grab the star then all you have to do just like the star dot id and there you go so it's like we're putting this particular unique id on the key now each item in here each lr has a unique id and in fact that's a much much better than just using no index map so hopefully guys you got the point why you don't need to do that and you must not do that so this is actually the example i'm talking about so seriously they are pretty identical there's totally no difference you can't tell because the viewer and user can tell that but performance and issues unexpected bugs they come up if you just keep using the old approach that is pretty not good okay just don't go through this so if i show you this one i guess if we go to unique id let's clear this in here for the state of this for the unique id index which is you know the preferred state the pro tip whatever you want to call it take a look on the states uh there you go so we've got an id every single one screw c has a unique id that is different than the others which is pretty great now is being used as a unique id now if we take a look on the other one the map index take a look on it um yeah we don't have a state in here but yeah you can tell that this particular one this app index demo what it does have is just basically zero this one's gonna be assigned a key of zero one two three so on and so forth so i hope you guys got the points why you should not do that and by the way nano ids here you can go ahead and check it out the third pro tip that a lot of people tend to just don't use is actually uh boundaries so air boundary is actually like a react feature that allows you to use it as a try catch if you're familiar with javascript try catch where you've got this block that you can throw anything at it then you got later a catch method that catches anything goes or throw inside of that pretty much block that's pretty much the same thing so this one it's not being used by imperative code that you can use with javascript now this one is going to be used by declarative and in fact it's going to be used with react components indeed so error boundaries allows you to actually catch whatever is being thrown inside of react components and why this one has been introduced why can't you use like a try catch normally basically because everything in reacts all the rendering all the kind of stuff and state manipulation is actually asynchronous so you have something asynchronous to handle it properly other than synchronous of course so for error boundaries in here if you take a look on the error boundary so this is basically the api that allows us to pretty much like create an error boundary so what we use to simple react we got my error boundary all they basically do just a normal react component and this is the case what i was talking about before that you can use a function of components this one for an air boundary you have to use a class component so it's basically a normal component has a constructor has a render method but the most important part to notice about error boundaries actually have to implement either one of these methods in order to be able to tell that this one is an error boundary in fact this won't work as an error boundary unless you just like specify or you define either one of these or both of them so this one is a static method it's called get derived safe from error what it does it just pretty much gets you a state that this is going to be updated with this state object pretty much this object is going to update whatever we return from here and in fact this one is going to have the error objects in here is going to be thrown somewhere inside of the components so this is what we get is and what i'm doing just putting has errors are true and message error and error dot message so whatever message comes through the air we just put it inside of that state so the state layer on can have the has error to be set to true and the actual message we got from the air pretty cool now the component did catch what it does so whenever he catches an error so it did catch an error you're going to get the air object and air info and you can just like log it or whatever so this one is kind of like not mandatory you can remove it i'm going to keep it for now and you can just like log it to your service you can send it to a server as like as an application crash or whatever so this one is pretty great for like developer and debugging and all that kind of stuff and this one changes the cs and handles it properly now the other part is actually the render method now the render method what it does you have to do something so this one is actually mandatory you have in a normal way like whenever there is no errors which means has errors to be false and what you could do just like return on the children because how air boundaries work is actually have this error boundary as the parent components then whatever comes inside of it as a children then this is where it could catch the errors you can't catch all the components that are outside of the air boundary in fact it has to be inside it has to be a child of it okay and in fact this one is just basically renders normally the children and in other states if there's an error all we do just like render up an error text and we use the state dot message and remember we put that in here and we can get it right so that's basically what it does it handles the errors you can imagine as a try catch whatever your catch is you're going to just like render up the air now let's just going through an example i got a pretty basic example in here all it does you got like something splash up and we are wrapping this image view with my error boundary so this image view just a basic component all it does it renders like an image showcase and renders an image with an src and he expects this src to come from a props now what i'm doing in here is actually if no src i'm just going to throw a new error with this silly error message or whatever so that's the case that's the case why error boundaries are super super helpful and in fact this one is actually a child so my ear boundary the image view is a chart of ever boundary so this error boundary is gonna handle this child so if you throw it outside of this air boundary it doesn't care about it it won't handle it and you won't even know about it okay so it has to be a child there and has to know about it so we can go ahead and do that we click save go back seriously in fact i just like refreshed that and we got the arrow already this is not the area you want seen of course but this one is only just here because we are in developments so this one is being showed up because we are in developments but if if the app is in production it's not going to show that this is just a developer friendly debunking green so let's go with it the raid events and that's what should be shown on a production screen to a real world user so we got no image src found in facts this one take a look on the air boundary this one is actually the message that we throw from that image view screws the image sourcing of found and in fact we are actually rendering inside of this ear attacks which has some color and font size and all that kind of stuff so the airbound is doing a really great job and it's catching that and if the src is not found or something just like catch it it handles it properly and it renders the proper ui so that's why air boundaries are immense so it could save you a lot of work with error boundaries just like define a single error boundary that takes care of it all and whether there is an error a therm or something like that you can handle it properly and you can catch it and it can render up the made up or the actual perfect ui for it to handle this particular error so air boundaries are the way to go the fourth pro tip is actually the style component i know this is more like an opinionated much more personal choice to go through but i find most of like css njs libraries are much much better than using css modules or just like putting css strictly into a dom or the style you know attribute or all kind of stuff is actually the best way to go with or alongside react just saying alongside the react i'm not talking about other scenarios or other libraries or whatever kind of that kind of stuff okay so style components if you're not familiar with it it's actually a css in js library that allows you to put or create or put css inside of like components then you can use them as like a component as a react component that render them inside of like main or app components or whatever kind of that stuff okay so that's basically what side components are and if you take a look on these so this is the regular css component that you would use and it's actually a regular css module so you'll see i'm importing the styles from style.module.css take a look on this just basically having that it has a container it has an image container and it has an image and they just like a basic css classes and in fact i'm using sas in here it's clearly the extension so in fact i'm importing these styles then i can do styles.container container so whatever the class names you're using you can use them as a class name there and that same so this is the old way of defining that kind of stuff and it's actually working perfect it works perfect works as charm you've got your css in here it's gonna it's gonna be applied throughout classes uh to whatever divs in here but the only bad thing and this huge thing if you work with both of these and you're gonna find like a huge difference between both of these that this one lacks a lot of like info a lot of readability and you literally can't read through that if you take a look in here we got a class name but we don't know what this class name is we know that's a container yeah okay but we don't know exactly what the container goes to we have to go to the file and you know css could be really ugly and really complicated so you have to look exactly for the class name you know what is the class name you have to know the nested child or all that kind of stuff it becomes really really boring right so you got the container you got the image container in here you have to look for all of them but you don't know exactly which one is a component and you don't know the name of that even the most bad or the worst part in here is actually you can't pass in so for example you got some like a color value inside of these components that you need to pass it into like the container then the container can use this as like for example a background color then you can set whatever background color you can do that using css modules and in fact that's that's pretty horrible but the other alternative that i find the most and the best combination of css with react plus javascript is actually using style components if you take a look on the other hand the side components it's pretty pretty awesome and here take a look on the file has pretty much all the css all the reason components and the rendering or the main rendering components everything you pretty much need to maintain read through the code and exactly understand what the code does just in brief just taking a look on that what is going on so with this quick container we got styled and styling here has pretty much everything from an html image so all html elements exist here like in a hyperlink animates area you got span you got pretty much anything you would think about so this one's going to create a div for us so the container here is going to be a give react component that going to be having this css style is going to be applied into it and what is better is actually you've got this one so whatever you put in here is going to be css in fact it's going to be a sas it's not normal regular css you can have it even to use sas kind of like you know functions mixins all kind of stuff and it looks absolutely amazing it's going to help you a lot so here one god's image container has everything that you need then all you have to do just put container image container then you've got an image you can put it there and it's pretty pretty simple like straight to the point the code is pre-readable and you're not going to find a lot of complexities reading throughout the code even maintaining it because you know exactly what is going on you got the styles in here to manage and in fact if you need to pass in something into it for example you can say you want to submit a color and let's say this color is going to be white so for this one we need the background color so oh you want to grab the background color of the container how we can do that so in fact like styles components handles that and we can use this syntax which is that string virtual syntax from es6 and we can grab in the color then we can have a callback function and the function can return pretty much whatever now this color is going to be applied to a background color and we can have it right and it would work right how cool is that that is going to be absolutely amazing it's going to help you a lot so let's take into a demo and screw this in here i'm running css components and we're doing style components i'm literally not finding any differences in terms of styles rendering even though from the elements perspectives take a look here there is totally no difference in image dev another div then take a look on the snug components parts yeah pretty much the same they all have this ugly classes that you can't read through whilst that component likely has a feature that allows you to make those readable but still yeah no difference nothing like that it's all about code and it's all about actually having clean code and if you're not familiar with clean code you should start actually addressing and putting your mind into like making your code look cleaner and much better and just like write code for others not only for yourself the last step is actually typescript so yes you are hearing right typescript is made it out to like 2020 2021 2022 and whatever comes next typescript is actually the next level of javascript if you've never tried to work with typescript and never take a look at quick sneak look into how typescript looks like it's basically javascript it's just literally everything is similar to javascript although an oil is being added from its name there is a type so there is statically typed javascript code in there so you can use pretty much film you're familiar with c c plus plus you can use types like integers ins or booleans and you can use numbers floats all that kind of stuff you can even create your own times and there's a lot of other stuff just derived from this stuff derives from the types into themselves and there's a lot of features going to typescript that makes it super super tidy and super perfect so let's take a look on like what the javascript components would look like just as simple components so we got like a fruit list we've got an array of that then we got a functional component that has a message going to be like arriving from the props in fact since this message arriving from props we don't know what is the type of a message ends right just arriving so we just like assume oh the message would be a string but we have to look on to like what the parent component is going to be passed through so we can exactly tell what the message is now we got also here we got the selected fruits we got set for selected food for setting states a function to update that stage and the rendering here is pretty basic we got everywhere under message or yum you like and we got selected fruit so for the success for orange or apple or coconut and we got like which fruit you like so this one is going to be asks if there is no selected fruit then we got simply just like render up a list of fluteslist.map and we got fruit and index and we can still select some of the fruits and we pass in the index let's produce in here another bad stuff in here but i'm not caring about that because this is purely just to go ahead and demonstrate the difference between javascript and typescript components right so that's basically what javascript components looks pretty great right but it's not really really that good because the code is not readable if i'm not the person who wrote that and if the code is much more complicated than that i'm going to have a really hard time understanding exactly what's going on in here what the context is what the variables means and what the types of the variables are for example this selected fruit i have to look oh selected through it i have to go oh selected through this one is null so fruitless for example this one is actually on the api that's going to cause a lot of other issues you don't know what the api is going to come back with right so you're going to have you're not going to tell this one is a string but right now here you could straight tell oh this one is a string i've got a string in here that's going to be passed into either string or null and this one is going to be string so fruitless oh what is fruitless generate right we map it through it so what is a fruit an object to your strength you can't tell right you can hear in our case scenario but let's say it's doing an api call you're gonna have a hard time telling what that guy is so you have to take a look on it and you have to do a lot of other stuff that makes it look ugly and you're gonna take you a lot of time even though it might seem simple at first but if the code is complicated and you got like hundreds of lines of code and hundreds of components nested together you're gonna find a really really bad time debugging especially if you have a bug or an issue in your car so yeah you're to find a lot of problems on that in the other hand take a look on time scripts so what's going on so we got in here um our javascript components props this one is pretty simple right so i got javascript components prompts this one effects is an interface and what's giving us is giving a message so this interface should have a message and it's not actually like you know a needed message which means it's not a required message just basically an option message and it tells it the type right away it's a string type so we're passing this so the profit is going to have a message so we can tell right right away that this one should be a string or indefined cool right let's move forward the states should have a string or null and the initial state has a null pretty straightforward right pretty self-explanatory if we go back here selected fruit oh what the fruit could be right take a look in the parameters we got fruit oh it has a string cool so we selected fruit we're passing this string and even though we take a look on the value in here the value accepts either string or not because it has the declaration types in there so it does the job and intelligence got a status from vs code thanks vs god another one so jumping to the rendering part we've got selected fruits sweet right so selected through take a look on it this one is either a string or no if you have this one in the light of like the thousandth line you're pretty much not gonna go scroll all the way up to the first line and take a look on what the type is actually just like hover over ace you got the type pretty sweet we got another message all the message is actually stringer defined so if this one is defined they're gonna do this one otherwise it's gonna show the selected fruit uh okay cool so we got which first you like then here this one is the list this list has a string right it's your string array and you can even define that it's pretty self-explanatory but i don't want to define this like this you could and it could make it much much easier to read through actually so we've got fruitless we got string and rain here we're going to map through this we've got fruits so the first one is going to be the first first is going to be simply a string right so we're going to render up this this function is defined up there you got the key in here it's going to be an index is an amber pretty sweet like you could easily read through that just like even with a single eye you can just go through the code and know exactly which variable is one of the time of the variable from where that read became just like with adding just a teeny tiny things like here we added this simple interface you can have another interface that defines pretty much the states if you've got redux or anything kind of stuff like that you can have another state defining what the redux store has like what the properties that they they are existing there and pretty much the type of of those properties and boom you got yourself a really nice tidy code pretty clean code and everything is pretty tidy and made up together to exactly tell what is going on in there so that's basically the difference between using pure javascript and using typescript so you just might spend a little bit more time to learn typescript but you can always always fall back to javascript if you know no or pretty much you don't want to use typescript anyway you can fall back even though the code is closing it can be a hybrid code they could both exist in the same word so javascript can exist alongside alongside pretty much time scripts without any issues or worries so yeah that's that's basically the last tip and hope you guys pretty much enjoyed this i know it talks a lot i just like trying to just give a point about this particular tips because they are very very important i wish i knew this when it started as a reaction i was just doing all the kind of horrible stuff that made me realize oh this is the west and this is the way i should do it from now on on my bigger projects or my work or my pretty much personal project open source tutorials all that sort of stuff so yeah hope you guys enjoyed this one i said before if your last kind of this type of video tutorials let me know i love making reacts i love making this kind of stuff i love sharing my knowledge and i love sharing this kind of tips for you guys just to grow stronger and stronger from your side so i think that's what i said for before hope you guys enjoyed it and yeah catch you all hopefully in the next ones [Music] [Music] you