From Junior To Senior React Developer - Best Practices

Поділитися
Вставка
  • Опубліковано 10 вер 2024

КОМЕНТАРІ • 113

  • @CoderOne
    @CoderOne  2 роки тому +3

    Everyone looking for the theme I'm using, it's called Halcyon.
    I have a full video explaining my custom theme setup too
    ua-cam.com/video/GLqx_yRi-iA/v-deo.html

  • @HeinekenLasse
    @HeinekenLasse 2 роки тому +160

    As a senior dev I would like these 13 mins of my life back

    • @EDS432
      @EDS432 2 роки тому +2

      u arent ;ü

    • @sergey53689
      @sergey53689 Рік тому

      You are very patient:)

    • @kantyDarius
      @kantyDarius Рік тому +19

      If u r a senior dev what the heck r u doing watching this!?

    • @danielkeefer1901
      @danielkeefer1901 Рік тому

      I'm not even a senior yet and i would still like these 4 minutes clicking on the time stamps back

    • @sigmawolf228
      @sigmawolf228 Рік тому +1

      why u prefix interface with I? it makes no sense, final object is object

  • @goldfishbrainjohn2462
    @goldfishbrainjohn2462 2 роки тому +53

    According to the skill sets, I was senior dev already since the first day of my first dev job.

  • @RusuTraianCristian
    @RusuTraianCristian 9 місяців тому +7

    The thing you're calling camelcase in your code is actually pascal case.
    camelCase
    PascalCase
    in React, function components should be PascalCase and anything else camelCase.

  • @saeedhalabi
    @saeedhalabi 3 місяці тому

    As a junior developer, this video was incredibly helpful.
    You just earned yourself a new subscriber!

  • @rasulkhujaganiev5082
    @rasulkhujaganiev5082 2 роки тому +29

    instead of using moment js I'll recommend to use dayjs or date-fns

    • @JustinMylo
      @JustinMylo 2 роки тому +1

      Good one, i would add using Luxon as they're from the Moment.js maintainers themselves

    • @elijahcannon2863
      @elijahcannon2863 2 роки тому

      I also recommend dayjs

  • @QueeeeenZ
    @QueeeeenZ 2 роки тому +73

    You dont jump from junior to senior, there are also mid-level developers.

    • @internetexplorer7880
      @internetexplorer7880 2 роки тому +5

      🤓

    • @johnklimes4402
      @johnklimes4402 2 роки тому +1

      @@internetexplorer7880 XDXD insane comm with this nickname :D:D:D:D

    • @dputra
      @dputra 2 роки тому +2

      And here I am, a mediocre dev

    • @BillClinton228
      @BillClinton228 2 місяці тому

      No matter how many years of experience you have... a senior dev is whatever your boss decides it is. Oh you're not familiar with this JS library that was release last week... junior. Oh you've worked here a month and you dont understand every detail of this application that took us 10 years to build? Junior.

  • @VictorMartins239
    @VictorMartins239 2 роки тому +6

    based on that roadmap i'm a senior dev, earning as a junior

    • @wilvermanuel7447
      @wilvermanuel7447 2 роки тому +1

      Me too

    • @BillClinton228
      @BillClinton228 2 місяці тому +1

      I got a 100% increase on my salary by leaving a company that didn't appreciate my skill and experience... don't hang around places where you are not compensated fairly.

  • @EduardoCLJ
    @EduardoCLJ 3 місяці тому

    Great video! Thanks for taking your time to produce it!

  • @user-jv3ll8lw1j
    @user-jv3ll8lw1j 9 місяців тому +1

    I'm highly recommending Tao of React from Alex Kondov! The book has many, many tips & tricks and awesome stuff, which will be very useful in the real projects, but the book is not for junior developer. In my opinion, you should have at least 2 years as a React developer!

  • @arcosd63
    @arcosd63 Рік тому

    Man, this information is gold. Thank you. David from NYC.

  • @Joshuaomorales
    @Joshuaomorales Рік тому +1

    Correction at 9:20. It's PascalCase not camelCase.

  • @alr969
    @alr969 2 роки тому

    Thank you. Very helpful🙌

  • @mayurpatel6657
    @mayurpatel6657 2 роки тому +7

    it would be very nice if you provide us the Figma link of all the charts and points.

    • @CoderOne
      @CoderOne  2 роки тому +5

      Linked added to the description. Thanks for the letting me know!

  • @JoAcOx7
    @JoAcOx7 Рік тому

    amazing, thank you!

  • @speedps235
    @speedps235 8 місяців тому

    Hi, I agree with that we should avoid class components (at 4:48) and in 99% of use cases we use function components, but... When we have very complex logic and we have a huge project when we want to introduce some kind of abstraction that handle specific logic and we want other developers to just extend given case and make a concrete implementation can we use for this Class component? Or should class components be never used?

  • @Alex.Shalda
    @Alex.Shalda 5 місяців тому

    thanks for the vid!

  • @djameleddine3303
    @djameleddine3303 2 роки тому

    well... that was very helpful to me thanks 🙏

  • @Isaac-eh6uu
    @Isaac-eh6uu 2 роки тому +1

    Isn't this video terribly inaccurate I haven't used react much but I adopted everything you talked about but really isn't much. Learning design patterns is also controversial so I don't really know what are going for here.
    I once used React-Bootstrap and wanted to get the input through refs but could only make it work with an class component. What do you do?

    • @masiafmasiaf2204
      @masiafmasiaf2204 2 роки тому

      I would said learning design pattern is not that controversial, in any case u can reuse the same pattern in other language a win win, the thing that u want to get the input with a ref only work on class component, I myself have not come to that issues, I am so into fc that forgot almost class component, but in theory should work in both

  • @bobdpa
    @bobdpa 10 місяців тому

    Thanks! 💯

  • @dimahalaiskiy7491
    @dimahalaiskiy7491 Рік тому

    I knew that all stuff before this video, so I gues I am a senior now😅

  • @ESArnau
    @ESArnau 2 роки тому +4

    All respect but I think all these points are very basic. Maybe better practices like:
    - clsx to reduce readability complexity when using ternary operators on classNames
    - using children as Props when creating components instead of too many props...
    - having super clear how some hooks from 3rd party libs like jotai or recoil can trigger unnecessary re-renders
    anyway good vid

    • @Bobby-op6ip
      @Bobby-op6ip Рік тому

      clsx is trash, stop installing packages and do things from scratch if you want to be a senior

    • @alexcoroza4518
      @alexcoroza4518 Рік тому +1

      @@Bobby-op6ipdoing all from scratch does not make you a senior, but yeah it will make you a good developer. In business perspective, we dont want to "reinvent the wheel" working on functionalities that are already available and ready to be used. Making your own from scratch will most likely lead you to bugs. Fixing those bugs will take you more time which is really for the business side. Unlike when using an already-made and mature plugin wherein they already encountered those bugs and already fixed them. Creating from scratch is not always the smart choice

  • @harry4088
    @harry4088 2 роки тому

    Hey Sir Can u Please tell me your vs code font name (settings--font-family)..i want to use this

  • @Randomuser21265
    @Randomuser21265 2 роки тому

    Thank you so much

  • @emreq9124
    @emreq9124 Рік тому +1

    Btw, Typescript Team itself doesnt recommend to name your interfaces with prefix "I" like IUserProps or UserPropsInterface. It doesnt work like in c# or java.

    • @jaycobbs
      @jaycobbs Рік тому

      but this is very helpful to store all types with I-prefix, then you can easily import them with intelisense without consternation

  • @DuyTran-ss4lu
    @DuyTran-ss4lu 2 роки тому +1

    This video is a gem

  • @palyanytsia
    @palyanytsia 2 роки тому

    What is the name of this VSCode theme?

  • @masterdr1
    @masterdr1 Рік тому

    dont forget SNAKE_CASE is used in defining global Constant in JS world

  • @srinivasa.meesala
    @srinivasa.meesala 2 роки тому

    Almost fell asleep wNice tutorialle listening to Nice tutorials voice

  • @daniiltkachuk7519
    @daniiltkachuk7519 Рік тому

    Camel case in video about how to go to a level of senior developer, really?

  • @LunarCosmic
    @LunarCosmic Рік тому

    Amazing

  • @jaroslavhuss7813
    @jaroslavhuss7813 9 місяців тому

    9:40 - Rust developers hugely disagree... It's a matter of a preference and I prefer the snake case :-)

  • @SahraClayton
    @SahraClayton Рік тому

    7:33, how does Typescript make your code easier to read. It makes your code look poluted and disgusting.

  • @me_rinta
    @me_rinta 2 роки тому +1

    Just link the last 2 resources man

  • @batu4605
    @batu4605 2 роки тому

    Can u share your vs code settings and ui theme please 🙂

  • @EpicTheoryChannel
    @EpicTheoryChannel Рік тому

    ohh thanks

  • @theprimecoder4981
    @theprimecoder4981 2 роки тому

    I'm a beginner at typescript but I wanted to know when to use interface vs typed

    • @rea1m_
      @rea1m_ 2 роки тому

      Just use interfaces

    • @peterharwa9472
      @peterharwa9472 2 роки тому +1

      Check out Jack Herrington's channel on UA-cam. He has a very good Typescript series.

    • @kylemckell
      @kylemckell 2 роки тому +1

      Not much of a difference. They have very very slight differences. At the end of the day they're not that different. Interfaces are a bit faster on compile time, but types have a few things that interfaces do not (which I'm forgetting atm)
      Essentially, just choose one and call it a day

    • @daniiltkachuk7519
      @daniiltkachuk7519 Рік тому

      the main difference is that interfaces can be extended, types not

  • @BarberoPablo
    @BarberoPablo Рік тому

    Hi, at 10:00 you talk about camelCase, the file0s name is "camel_case" (I know its just an example), the best practice would be to name it "camelCase", "CamelCase" or "Camelcase" ?
    Thank you, nice video

    • @JustSall
      @JustSall Рік тому +2

      Hey! Camel case is: starting of every word is capitized. E.g, HelloWorld, CamelCase, camelCase, difference is for first letter of a constant/var it is small case and for bigger functions/components such as Jsx components we use Uppercase Camel Case ,

    • @BarberoPablo
      @BarberoPablo Рік тому

      @@JustSall thank you very much!

    • @jaycobbs
      @jaycobbs Рік тому +1

      @@BarberoPablo tbh they arent camel case. Valid naming is camelCase, PascalCase, snake_case, kebab-case :D

  • @NoOne-gm3lf
    @NoOne-gm3lf 2 роки тому

    Love from algeria

  • @UnsentPH
    @UnsentPH 2 роки тому

    when is enough to learn the js and next to ts?

    • @loogie5679
      @loogie5679 2 роки тому +2

      Don’t use Typescript if you don’t need to
      JavaScript has been here for years and ain’t going anywhere

    • @primearchitech
      @primearchitech 2 роки тому +1

      @@loogie5679 almost every professional project Is using TypeScript now. So it's worth learning it. And it's not difficult at all. I learned almost everything I needed for a React project in like 3 hours last year.

    • @bazanowsky
      @bazanowsky 2 роки тому

      @@loogie5679 Dont use JavaScript if you dont have to. Typescript is there to write better code.

    • @loogie5679
      @loogie5679 2 роки тому

      @@bazanowsky I am just saying that all the front end stuff change too much and too often for anyone to be able to follow. No matter the trends at the end of the day JavaScript will still be the reference language for web development. It does its job and have been doing it good since the beginning and that’s what companies are looking for. Something that can do the job. I know companies that are still working with JavaScript and they are doing great. That’s what I am saying, don’t follow the trends. Learn Typescript only if you really need to. Chances are you won’t need it since you can do very well with Javascript. So, learn Typescript if your company asks you to

  • @pikavecordis5056
    @pikavecordis5056 2 роки тому +2

    This is more of a tutorial "From Beginner to Beginner-Junior React Developer"

  • @nonstopper
    @nonstopper Рік тому +1

    Typescript is the exact opposite of making your code look "cleaner"

  • @erickmoya1401
    @erickmoya1401 2 роки тому +8

    First thing to know, you are either a Senior Software Developer or you are not, there is no "Senior in React", or "Senior in X but Junior in Y". Seniority is something you carry no matter the language, framework, meta-framework or IDE.

    • @henriqueb5637
      @henriqueb5637 Рік тому

      I don't get it.
      Lets say I am a senior developer with 7 years of experience working with Javascript and now I want to switch to something else like PHP or C++.
      I would switch to a senior position already?

    • @henriqueb5637
      @henriqueb5637 Рік тому

      I get it now!
      "Seniority" is just some bs label a company puts on you. It means nothing.

    • @lord-of-the-shinobi-world
      @lord-of-the-shinobi-world 11 місяців тому

      @@henriqueb5637
      Junior or Senior dev does not have much differences.
      The reason is, employers always LIE in their job description. This is not something new.
      They post jobs that say "Need a Junior Developer", but then they ask for a person to do basically....everything, including ... Design, and they call it "Junior Developer".
      Other than the title, Junior and Senior devs have no difference. Companies just use the titles to either pay you less, or to pay you more(sort of. But paying you less is 100% certain).

  • @afin4684
    @afin4684 2 роки тому

    Theme ayu?

  • @Dam-zn1dd
    @Dam-zn1dd 2 роки тому

    Analyzing user needs is UX Designers job.... not developer

  • @user-hx1lp6fc9r
    @user-hx1lp6fc9r Рік тому

    Dude I knew these things from day 1 course on udemy, am I a senior or like a skeleton-dead developer already?

  • @Pareshbpatel
    @Pareshbpatel 10 місяців тому

    Very informative. Thanks.
    {2023-11-03}

  • @joewalker681
    @joewalker681 2 роки тому

    never thought i'd see typescript and camel case in the same video but here we are

    • @jonasgrnbek7113
      @jonasgrnbek7113 2 роки тому +3

      Do you not use camel case when using typescript?

  • @joaohep52
    @joaohep52 2 роки тому

    I came here just to know the theme, please somente tell me

  • @anandca4096
    @anandca4096 2 роки тому

    I have been into web dev for 3 years now and I'm feeling a little bit unmotivated rn 😓

    • @burhaann
      @burhaann 2 роки тому

      Take a break Mr. Chartered Accountant
      Don't overdo development

    • @CoderOne
      @CoderOne  2 роки тому +6

      Take it easy on your self. We are all just beginners trying to always learn something new. Most of us are just a bunch of googlers 😃

    • @HeinekenLasse
      @HeinekenLasse 2 роки тому

      If you feel unmotivated now wait until you fail every single FAANG interview you are able to arrange

  • @user-sh2cr8hp5v
    @user-sh2cr8hp5v 2 роки тому +1

    rename video to:
    from idiot to junior react developer

  • @anilgadwal1149
    @anilgadwal1149 6 місяців тому

    Well then I guess I was a senior dev since my very job then lol

  • @colorfulmus
    @colorfulmus 7 місяців тому

    This is more like a zero to junior dev tbh

  • @MrEnsiferum77
    @MrEnsiferum77 2 роки тому

    There is everything, but not teamwork from senior. It does not analyze anything, just tell u, we need to do that. Programming experience nowadays is somehow weird, because everyone is today senior developer. Senior not helping at all, just the junior is thrown in the project for few and that he pickup tasks by himself.

  • @polcaltieri
    @polcaltieri 2 роки тому +1

    A developer that implements a full function inside of an element is not a junior developer, it's just a bad developer

    • @elijahcannon2863
      @elijahcannon2863 2 роки тому

      Or a lazy developer that doesn’t care about maintaining the code or working with teams. I know many typescript developers who choose not to use typescript for some projects and that’s ok.

    • @sergey53689
      @sergey53689 Рік тому

      ​@@elijahcannon2863 yes, the typescript is an additional shit around your code. I am coding on JavaScript about 5 years (and learn programming about about 21 years) and typescript is unnecessary thing. JavaScript is self-sufficient language without typescript

    • @sergey53689
      @sergey53689 Рік тому

      This is just a one variant of implementation. Programming is a space of variants

    • @jaycobbs
      @jaycobbs Рік тому

      @@sergey53689 have you ever tried to maintain a bigger project with and without typescript? ofc with other programmers🙃

  • @Pokemonman44441
    @Pokemonman44441 Рік тому

    There is so much wrong with this video. I disagree with many things you talked about in this video. Your functions should be named snake case and should be used with function and not arrow functions and your variables should be cameCased. Arrow functions should only be used for small inline functions and react components.

  • @RaZziaN1
    @RaZziaN1 2 роки тому +9

    You don't need 80% of this crap as senior. Don't even listen to this guy.

    • @primearchitech
      @primearchitech 2 роки тому +2

      Ok, so what do I need to be senior?

    • @SAMEDITING
      @SAMEDITING 2 роки тому

      @@primearchitech You need to know what works in different situations, when and what to prioritize and good mentoring skills. Think about creating value, scalability and maintainability. The "best" code is not the perfect design pattern, rather the teams who deliver working production code on time, you can always refactor it later for maintainability.

  • @guled669
    @guled669 Рік тому

    Senior developer just means more headache

  • @AIArtistTunes
    @AIArtistTunes Рік тому

    Burh you are a junior🤣

  • @user-of4nb6iw5r
    @user-of4nb6iw5r 10 місяців тому

    Such a poor use of typescript in the video🤡 It is so weird to see the author talking about naming conventions meanwhile declaring interfaces with the 'I' prefix🤡 Also never write your TS code in the .d.ts files and never use interfaces to simply describe object shapes. Use interfaces only when you need the specific attributes of interfaces: implementation and cascading

  • @mladenstojkovic3402
    @mladenstojkovic3402 2 роки тому

    This is utter garbage. No senior, let alone a junior should blindly follow these rules.

  • @2222ferry
    @2222ferry Місяць тому

    bullshit , what you say

  • @andrewwall2730
    @andrewwall2730 2 місяці тому

    I hate Typescript. For one thing it is an MS abomination of JS, and if you are an advanced JS developer you don't need it. It bloats the code, tries to make it Java-like. Leave JS alone, understand it is not a static typed language, which is it's core strength and just learn. It does not prevent runtime errors, just use proper guards and all will be well.

  • @dilshodabdullayev6059
    @dilshodabdullayev6059 2 роки тому

    )))))