From Junior To Senior React Developer - Best Practices

Key Takeaways

so if you're struggling as a junior dev in this particular video we will see best code practices and best design patterns that you must know in order to level up your experience and become a senior developer so we're going to look at like different skill set that you need to acquire in order to like become a senior developer as well as the best code practices in order to make yourself a better developer and become a senior one so what do we usually mean by senior developer and actually what are the soft skills and like what the things actually they're gonna make it stand out in like compared to a junior developer and what is like the main difference between them so you probably already know that in here for for example for like a junior developer in here like usually junior developer just like involving in writing some sample of code not really that high level of code of like importance but i just like writing some sort of code and also junior developer is already like meant to learn along the way and and actually fix more bugs and features or actually work with small features usually alongside like other senior developers which can actually just like you know gonna allow the junior developer to comprehend and actually get along the ecosystem they are actually working on and the code base and you know show them just like the way on that and of course for senior developers actually he's going to take a lot more things on himself like teamwork he probably sometimes like becomes a lead i need to like analyze the user needs like do analytical thinking uh he need to test the code which usually a lot of like work and and like test driven development and all that sort of stuff uh he needs like critical thinking for problem solving all this sort of stuff and document application process troubleshooting and obviously he needs like a really good programming experience and a really good programming like background depending on the project he's actually working on so if you look up on google like for a react kind of like road map in order to become a senior developer and actually advance in the reactor ecosystem and learn and then grow up in that system you're going to find a lot of road maps but in here i found like the most comprehensive road maps that you could ever find and like what what is actually the best so there's actually two and i usually like like this one here because it gives like a comprehensive way so like for a person you must know in yellow good to know and kind of like reddish in here or orange and possibilities in gray so obviously you need html css gs basics for learning every act thing then you need like general development skills like a terminal blurring all the protocols a browser there's kind of like stuff that you need and alongside like some design patterns all the sort of stuff you need like reacts like if you want to just like go ahead and learn reacts which is the point of ours in here so to become a senior developer so there are actually a couple of stuff that can go to styling css processors you can go to like the css architecture uh you need to do async actions fallacy as well like type checkers you need i i really advise like typescript and prop types uh flow is good but it's not really that like important compared to time screen and prop types um what also you need like helpers or form helps like formic or final form or redox form and api clients from like graphql unrest i see graphql is very very growing nowadays and definitely you need to like know that uh for like you know just to step out of the junior circle uh and and like our rest api in here and how to use fetch and all this sort of stuff so i i actually there is actually a lot of stuff to comprehend in here so obviously the yellow one you probably just like need to go ahead and learn those right away like those are like this basic standard stuff that you need or must know and i would say the orange obviously you need and must know as well for a senior developer but for the grayish one i would say just like they are optional there are a couple of different stuff that you may need but most likely all you need to do is just like the the yellowish and the orange for like you know it's good to know and obviously as a senior developer you would probably like need the goods you know you need to like to level up the bar compared to genius ropers and to advance in this and know as much technologies as you could and also what helps you like go out of the junior developer zone into like the senior developer zone and actually avoid all the silly mistakes and the amateur stuff that durian developer usually does especially in the station issues they like fall uh into it's actually following the best practices especially in the universe of react and the ecosystem of reacts and like the code best practicing and how you can actually approach them so for react components as we all know there is the new feature that got like the whole reactive system so excited about using react is actually hooks so here is likely how you define your components so you should avoid completely at any cost using class components because they are very old and they actually cause a lot more problems and they have like a very kind of like you need to type a lot of code in order to get small things or small rendering of like a part of a ui uh to be done so it's not really that practical so always avoid like class component for example in here this is what it takes to create a class component you need a constructor you need the super uh you need to pass in process super you need to extend reacts then eventually you get to the rendering part which obviously most of the times that's what that's what you're actually going to be needing and then you just like return a render now in the other hand what you should replace that with is actually the function component which is like the new awesome thing and alongside hooks which is going to make it a lot easier so function components simple as that it's just a function it takes props if you need it then you can actually use props obviously then all you need to do to render is actually return and you're going to be rendering like whatever you want that is it it's just that simple and look how clean and simple the code is compared to the class components and the other issue that most junior developers actually fall into is literally just using inline functions or inline arrow functions inside of the gsx or the rendering part so for example this is a bad approach because we have a button and h3 and whatever and that button has an on click event now what the general developer what what's actually like considered a bad practice is actually to declare and define your arrow function directly inside of like the gsx in here which in that case if you have like a long gss rendering code and you need to put a lot of events listeners in here that's going to be very bad and the code will look very very messy and the other hand if you look into the best part of this in here there's actually like no like inline functions or new align arrow functions in here is to actually abstract that into another method that you just put inside of your function which is like you can call it handle button click and this can take you know just a regular function you can even define a regular function like instead of an arrow function in here and you can do all the handling that you would do like on the top in here the same thing and all you need to do just take that function and just put it into like the event listener in here and that is it and look if you compare this clean code that's super easy to read through compared to this one this looks like a lot more complicated compared to this so it's better to avoid like declaring those inline stuff and just like replace them with methods the other thing that i see is actually a must to learn to become a senior developer and literally just like from 2022 and beyond is learning typescript and replacing javascript with typescript so typescript is completely mandatory because it just going to make your code and give it like superpowers it's going to make it super clean super easy to read and obviously it's going to make you like working in a team a lot better with typescript so for example if you take this component in here without a timescript which is a very bad approach so you take like props in here and you can have like emails verified in user now you got the user you know the user is actually an object but you don't know exactly what the user is you don't know what the type you don't know what the properties that does exist inside of this user object so like whenever you try to access here sometimes you have a mistake or a typo and this is very bad to catch and and very like lingerie to actually find throughout the code and it's quite bad you don't know exactly what the e is email verified like properly in here is is it like a string is it a boolean it may seem like a boolean in here but sometimes you can't actually figure this out by yourself the second part in here is actually where we're using typescript so for example typescript you need to define interfaces which are like you know objects um like object definitions or types of objects and you give it like what this needs for example this is our props we're giving the props and the prop is going to take an user which is like it has its own interface or has its own type if you look at it it's going to take us to the typings which we're putting in here just like for the better folder structure and we got like the interface user name age email whatever we got now i got user and got this one as well we put in as a boolean now if we look at the code below in here we can easily know what's that but if we hover like we're using if yes code or any other ide you can know that oh user is the type of a user and is email verified it's a type of a boolean if you look at this this is a type of string and email is a type of string even if i click it's going to take me straight through that and it's like it's going to make the development experience a lot better and a lot more enjoyable compared to javascript the other very most important thing is actually to only use camel case which is like you know how you name your variables your classes your components your functions and everything so always always in javascript always especially react use camel casing instead of any any other type of casing for example we've got snake casing in here which uses an underscore between words which is a very bad approach and you never want to use that so this is actually all using like snake case in here for easy email verify and handle verification all of those and this conclusion makes the code look a little bit longer um here for camel case obviously it's going to be the same thing like handle verification where you're just going to have a capital letter between like separating every word and and the other which is going to make it look a lot easier easier to read a lot easier to read and of course easier to type as well and in the other hand if you really want to like experience and see how like senior developers and advanced developers actually set up their projects and having the folder structure having the configuration and all the tools they are actually using inside of like their big projects and everything i would really advise you to go ahead and use a boilerplate there's many many boilerplates out there especially for reacts so there's this like react cla template which in my case i've been using for years now and it's so nice and you can actually go and set this up using the query react up directly without any issues it's going to make it a lot easier so this cra has a lot of stuff it has code conventions it has best practices it has best tools being used and everything is configured for you all you need to do just go ahead and run the setup in here like yarn query react app whatever you can specify the template specify your application and that is it and you can read like about the features he has like typescript quick scaffolding static code analysis uh seo there are like instant feedback next generation css for like post css and all other stuff it's amazing also what makes you like a senior developer is actually what they know and particularly what like the architecture and the particular design patterns they apply when like problem solving or writing code and and like doing some like architectural uh kind of like solutions for for web apps and stuff they all use that and they all keep in mind they're like design patterns and best practices so in this one i got like two very most important websites i really learned from like in the past a couple of years and i really really enjoy those websites uh the first one is called patterns.dev which is a really awesome website in here it's even like an ebook that you can go in and but you can go like click get started it can take you straight through into like patterns you can see design patterns rendering patterns and performance patterns and what i really really like about this website it has all the code snippets and all the explanations around javascript which is so nice and as well around reacts which gonna make this perfect for you and for this particular video so like you can go it's like an introduction what are like design patterns maybe you want to see the singleton pattern and all the stuff maybe you what you would really want to go ahead and see like there is this um where is that the render props pattern which is a very important pattern in the react word where you can you know have a render props and you can like receive props from the parent components into the charm components and you can extract that and it has all the explanation it has that in code sandbox you can run those through you can edit them very nicely the next one is is called toe of reacts which is as well is very nice it's like a 50 minute read and i always like keep this like in my reference list i always keep coming to this to learn more if i like forget something or anything it's really nice i really like to go read through this it has a very very advanced stuff and you really enjoy going through all this like uh maybe like you wanna avoid nested ternary callbacks and this is how you do it it just shows your bad and goods it gives you like how to think as a senior developer as an advanced developer into using this with react so both of this website are like golden websites really advise us to keep them like in your bookmarks or in your listing notion and refer them every single time you need to known something new