How To Master React In 2024 (Complete Roadmap)

Поділитися
Вставка
  • Опубліковано 5 тра 2024
  • In this detailed video, we explore the Complete React js Roadmap for 2024, a comprehensive guide tailored for developers at all levels. Delving into the evolving world of React js, this roadmap lays out a strategic path for mastering React js in 2024. From foundational concepts to advanced techniques, the video covers crucial topics and trends in the React js ecosystem, ensuring viewers are well-equipped with the knowledge and skills to excel in React js development. Join us as we navigate through the React js roadmap, a pivotal resource for anyone aspiring to thrive in the field of web development with React js in 2024.
    Timestamps
    00:00 React is essential for frontend development
    01:49 Understanding the foundational concepts of React and its role in making frontend development easy.
    03:37 React writes JavaScript code for you
    05:17 Components, hooks, and standard APIs
    06:56 State Management and Routing are crucial for scalability and performance
    08:35 Importance of styling and styling libraries in React development
    10:17 Minimize R renders in React by using form management libraries
    11:57 Transition from React to Next.js and React Native
    Links:
    Open Source Cohort: harkirat.classx.co.in/
    Twitter: / kirat_tw
    Linkedin: / kirat-li
    Instagram: / kirat_ins
    Discord: / discord
    Telegram: t.me/kirat_internal_group

КОМЕНТАРІ • 163

  • @Shivam-sl4sp
    @Shivam-sl4sp 3 місяці тому +8

    great video! will use it to refresh and fix gap in my react skills. Also i'm in cohort anyway

  • @akash.biswas
    @akash.biswas 3 місяці тому +29

    bro was finding open source projects on Gmail 😭, love you bro !

  • @minhazrahman4828
    @minhazrahman4828 3 місяці тому +40

    00:02 React is essential for frontend development
    01:49 Understanding the foundational concepts of React and its role in making frontend development easy.
    03:37 React writes JavaScript code for you
    05:17 Components, hooks, and standard APIs
    06:56 State Management and Routing are crucial for scalability and performance
    08:35 Importance of styling and styling libraries in React development
    10:17 Minimize R renders in React by using form management libraries
    11:57 Transition from React to Next.js and React Native

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

    I appreciate how you directly go into the video's goals and justify them till the end, and that too in a coherent manner. Great Video Harkirat! Thank you :)

  • @psyche1751
    @psyche1751 Місяць тому +3

    The video covers a roadmap for learning React and frontend development.
    Dynamic websites are different from static websites and were hard to write before React.
    Understanding reconciliation and how React works under the hood is important.
    Practice writing React code by building basic applications and looking at the final output.
    Components, state, rendering, and props are key concepts in React and other frontend frameworks.
    Hooks are a more recent addition to React, allowing for functional components and life cycle events.
    Create your own custom hooks to separate state computation and final component rendering.
    Prop drilling, context API, and state management tools are advanced topics in React development.
    Routing, state management, and tools for bootstrapping a React application are important for building larger, more dynamic applications.
    Styling and understanding performance libraries and testing are optional but useful skills for a React developer.
    React is no longer the only popular choice for frontend frameworks, with Next.js and other options becoming popular.
    Learning about React Native and Expo is recommended for mobile app development.
    The speaker is open to making more videos for specific niches or topics.

  • @murali-krishnan
    @murali-krishnan 3 місяці тому +8

    Make a Roadmap for Next.js. Like what are all the things we should be good at like SSG, SSR, ISG, Auth(nextAuth, clerk,), Routing (Page router or App router) and so on

  • @CinematicClips-uz3mk
    @CinematicClips-uz3mk 19 днів тому +1

    For creating a to-do application in react you should know the react topic:- basic structure, components,props,hooks, State, local storage,and concept of js

  • @jatinkukreja18
    @jatinkukreja18 3 місяці тому +23

    As a senior React Developer. I approve this video for anyone beginning their journey!
    Sturctured really well. (Y)

    • @AbdulWasay-lg6ju
      @AbdulWasay-lg6ju 3 місяці тому +1

      Agar ap developer ho toh yaha aam lene aye ho😂😂

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

      @@AbdulWasay-lg6ju I like watching frontend videos buddy.

    • @ankushmaurya7938
      @ankushmaurya7938 24 дні тому

      @@jatinkukreja18 hey Jatin I have made a good project using react and BAas using appwrite. Still learning and doing revision and looking for internship opportunities and have started applying, I wanted to ask it took me time to understand these hooks, routing, redux and all but I am not able to gain the knowledge like I cannot write my own code after few days and simply not able to answer if someone out of nowhere ask me something about any hook or something from react Can you give some suggestion regarding this ? I mean I know its a skill, lack of knowledge and consistency issue but even after that when I'm not able to answer I feel bad for myself and the cycle repeats itself, for the past 6 months I am in this cycle but learnt html, css, js and react but not able to answer??? Would love some suggestion from you!!!

    • @SurprisedEyewear-dv5ww
      @SurprisedEyewear-dv5ww 17 днів тому

      Sir mujhe React Developer me refernce de skte ho kya mujhe 1.5years ka experience h . frontend me reply dena sir please yes or no me bhi

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

    Regarding frontend test, in my experience, unit test like jest is not hard to get coverage and it has been pretty useful to catch bugs or be like documentation in the code. However end-to-end testing has been pretty challenging

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

    Thanks 😊

  • @paulaneesh7
    @paulaneesh7 3 місяці тому +49

    Make one like this for Backend as well, more specifically JavaScript backend

  • @iam.manniii
    @iam.manniii 3 місяці тому +63

    Please make a video for backend roadmap with js

    • @danish7335
      @danish7335 3 місяці тому +1

      bro check his course curriculum

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

      Yes please make

    • @rohanpandey9957
      @rohanpandey9957 3 місяці тому +4

      No look it up yourself brevv how much spoon feedig you need?

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

      He had done it long back, go thru it

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

      Learn nodejs and express that's it and also Mongodb or SQL 🤝👍🏻

  • @sankhadip_roy
    @sankhadip_roy 3 місяці тому +2

    i was struggling to learn react , needed it very much

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

      Please avail the course "namaste react" by Akshay saini

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

      @@nandankumarkj55 figured it out from odin project created a todo app and cv builder

  • @rayyanabdulwajid7681
    @rayyanabdulwajid7681 3 місяці тому +6

    Your javascript skills are directly proportional to your react skills. This is the bitter truth. We need to have strong foundation at javascript

  • @harekrishna2639
    @harekrishna2639 3 місяці тому +1

    hey harkirat, which tool do you use for your background?it seems really
    nice

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

    Thanks man ,

  • @Aryan-rb3yk
    @Aryan-rb3yk 3 місяці тому +4

    Hehe i am currenlty doing react after doing HTML CSS JS, so this video has dropped at the perfect time for me thanks bhaiyaa

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

      from where are you started learning react on youtube

    • @Aryan-rb3yk
      @Aryan-rb3yk 2 місяці тому

      @@abhinav7622 ahm scrimba free course hai ek 11 hour ka(actually14-15 hai) vo kiya English me hai bahut achi website hai try karnaa

  • @bluechipsolutions4860
    @bluechipsolutions4860 3 місяці тому +8

    After html, css and js. I started with react projects. The problem I m facing is when doing some project, it takes few days, at that time I m forgetting some js concepts. I will come back and again revise js, after that I will forget react concepts, the cycle continues😢

    • @Geek_Coder
      @Geek_Coder 6 днів тому

      Happens in beginners phaze so don't worry, just keep working... Not a big issue

  • @John12685
    @John12685 3 місяці тому +35

    I don't get it why there are tons of roadmaps. Who needs roadmap? Everyone needs actual content not a roadmap

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

      Follow CWH web dev content if u need

    • @tanaypatel8412
      @tanaypatel8412 Місяць тому +2

      Uske liye paise lete hain sab 😂

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

    Loved this, make for others too

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

    Much needed video

  • @saurabhgawali2378
    @saurabhgawali2378 3 місяці тому +2

    Can you plz make playlist on typescript 🙏🏻😅

  • @Pr1y4nk
    @Pr1y4nk 3 місяці тому +1

    Missed covering E2E test frameworks supporting ReactJs

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

    Requesting a roadmap video for next.Js as well

  • @adityasonkar1336
    @adityasonkar1336 3 місяці тому +2

    Could you suggest us, playlist aur course to learn next.js from if we have already learnt react.js

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

    Please make a video on laptop selection for 1st year students

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

    hey recelently start learnign the next i have done all thease topic n have preety much idia about it , so i want you to do it same for next js it would be greate
    lots of love

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

    Good One

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

    Thanks for video. I know html/css little bit vanilla js and php. Long story short I can make "normal" apps. I try to understand react. No way! I can't make even simple header. I know it's pretty much the same html/js and css but not even one line looks similar to vanilla js 😢😅

  • @user-kx2ds2gk9g
    @user-kx2ds2gk9g 3 місяці тому

    Please make a roadmap vdo for JAVA stack. (Full industry ready backend).

  • @DevSmasher-uk3hj
    @DevSmasher-uk3hj 3 місяці тому +11

    🔥🔥🔥 How to do STREAMING using YEILD keyword ?🔥🔥🔥

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

    Yo thanks for the roadmap

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

    Supeerrrbb❤

  • @user-wj9uz8gi2r
    @user-wj9uz8gi2r 3 місяці тому

    Could you please make roadmap video for node js

  • @user-ug4nm7wk6z
    @user-ug4nm7wk6z 2 місяці тому

    Will you please do a video on how to make a project on online code compiler using react and express

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

    Can you suggest any book for JavaScript to React advanced concept...

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

    Hii
    I have to appear in Javascript+ReactJS interviews.
    So from where can I practice Javascript programs which are generally asked in Interview in codeing part?
    Starting from basic to advanced logical.

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

    Hi Harkirat, I have studied everything regarding reactjs mentioned in this video and got my first internship in a startup. But they are asking me to transition to react native and they'll train me in the initial phase. Please I need some guidance. It's bit intimidating. Idk a single bit about Mobil development

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

    🙏

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

    Bro please make one for backend too ✌

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

    his background looks so good- how to get that type of background

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

    I was lost after the router that this much concepts are in react. Currently I am learning React but could not able to make a single project. any suggestions on how I approach on building project on my own?

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

    Are all cohorts are active currently or some will start ? like cohort 2 ?

  • @sachinsachinuh3709
    @sachinsachinuh3709 Місяць тому +1

    Super bro

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

    Make one video for the backend comprehensively

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

    Pls do for other languages also bro

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

    content quality===video quality

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

    How to start in next js and then for open source contribution??

  • @Shivam-sl4sp
    @Shivam-sl4sp 3 місяці тому

    Make one for nextjs too

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

    Hi Harkirat brother
    When will start new batch iam interested to learn

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

    How to manage the security in the backend side, same type of video want for backend

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

    hello sir i wanted to know isit too late to join your latest cohort 0-100x now ? I know HTML, CSs, JS and little bit of react...please reply

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

    I am an ardent follower, and I have a suggestion. I feel you have a natural inclination to discuss the negatives and the warnings attached to a topic more elaborately than the positives. The reason might be that you do not want us to face any problems you have faced, but in hindsight, this feels a little depressing as a viewer. A lot of your videos give positive vibes, but I missed that in this video. I hope you see this comment and just consider this point in your future videos. And nevertheless! Thanks for all that you do for us! :)

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

    which is better react or refine ?

  • @sabinhere
    @sabinhere 3 місяці тому +2

    If Ai can make code these like skills will be outdated soon or not?

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

    Bhaiya please make same for the backend also for Nodejs...

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

    Please make a one in Next JS

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

    Any free playlist which cover all these topic or any youtube channel to follow ?

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

    👍

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

    I started dsa with c++ and I wan to learn react also how can I do that please answer

  • @IndiaKaregaDhanda
    @IndiaKaregaDhanda 3 місяці тому +3

    I think harkirat bro nowadays mern is more suitable than just reactjs dev

    • @Dr.dhumketuIITDholakpur
      @Dr.dhumketuIITDholakpur 3 місяці тому +1

      i know mongodb , express and nodejs and i had already made a full stack website so is learning react soo important ?

    • @HarshKumar-sz4lo
      @HarshKumar-sz4lo 3 місяці тому +1

      @@Dr.dhumketuIITDholakpur well you need to know react to make the frontend, if your target is just backend then I think you are good to go but if you are looking for full stack then react is a must.

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

    Can you make a video on full stack java developer. ☕

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

    Bhaiya C++ road map for project development

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

    every other educator: beginner to advanced
    this guy: noob to pro

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

    Is anyone have good source for react in which I master the react hooks and build strong logic over react😅

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

    Cohort for freely is also available sir people are selling do case on them
    Ps also tell how to disable downloding of media
    In react app

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

    next video on NEXT JS please for open source

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

    For mern same roadmap is suitable harkirat bro

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

      I think harkirat bro nowadays mern is more suitable than just reactjs dev

  • @indimerz
    @indimerz 3 місяці тому +3

    do we write backend in nextjs project or separately? as it it a full stack framework i think backend is included in same project

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

      Yes we can write api's in nextjs.

  • @user-oz3hc6lj2e
    @user-oz3hc6lj2e Місяць тому

    should i learn react with typescript or javascript ?

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

    Harkirat when will the course 0-100 will start again?

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

    so msny frameworks to learn web development ,i am a professional chef 20 years experience trying to change career to software engineer i just want a clean clear roadmap which to learn ,i am also learning other old languages like java, c# ,c++ and python so many things to learn im overwhelmed but i know tech changes so fast but i just want to enter in this field for the first time with no stress and someone to guide me as i really want to be a software engineer

  • @user-sc1jo4qd1i
    @user-sc1jo4qd1i 3 місяці тому

    Anything for django??

  • @darshan.t.sdeekshith6694
    @darshan.t.sdeekshith6694 3 місяці тому

    Now should we consider next over react?

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

    Can you make one for the backend in nextjs

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

    Live class ke beech mai video upload ho rhi hai :)
    Prop Drilling pad ke aata hoon xD

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

    node js ka bhi bnado

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

    want a roadmap for mern stack

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

    Kya me dsa and react side by side kr sakta hu

  • @aniwayindia
    @aniwayindia 3 місяці тому +1

    cyber security ke upar video lao sir

  • @MURARISHARMA-vs6kq
    @MURARISHARMA-vs6kq 3 місяці тому

    World 🌎 International relations please sir 🙏🙏 ....?????

  • @user-ok1do2ol3f
    @user-ok1do2ol3f 3 місяці тому

    How much time to spend on frontend and start with backend .. as I still I feel lots of things to explore in react.. should I learn next-js ?

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

      never jump on next without knowing react

    • @user-ok1do2ol3f
      @user-ok1do2ol3f 3 місяці тому

      @@skilz9525 I know react at intermediate level... so I am confused between what to start next... next-js or node??

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

      @@user-ok1do2ol3f havent you made any full stack project in MERN ? do that first before jumping on next

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

    The video quality is 10k : )

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

    Everyone talking about front end... But Where is backend? ... Expressjs

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

    There is no payment and country option in your course for Nepalese.

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

    First viewer😂😂

  • @imkir4n
    @imkir4n 3 місяці тому +2

    Developers ❎ React developers ✅

    • @imkir4n
      @imkir4n 3 місяці тому +1

      Don't be just a react dev.

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

      @@imkir4n bhai logon ko itna toh seekh lene do, tier 3 wale toh HTML seekh ke hi khush ho jaate hain

  • @anything-op1oj
    @anything-op1oj 3 місяці тому

    Bro i want to buy your course but paisa nhi h

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

    Reduce o to 100 dev cohort ..lots are wanted to join but dur to price they cant..

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

    Own hook like write document.title

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

    Why no one talks about django and only js based framework for backend?

    • @_devenderpal_
      @_devenderpal_ 3 місяці тому +1

      nodejs is popular nowadays, thats what the trend is. many startups also prefer both frontend and backend in js. but i know django and fastapi are also important backend frameworks.

  • @DeepakKumar-uz4xy
    @DeepakKumar-uz4xy 3 місяці тому +1

    Bhai defi ki video shoot hogyi kya?

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

    Kia main abhi apka course 0-1 join kr sakta hoon

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

    Harkirat be like
    Jaldi se roadmap bna deta hu views milenge

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

    ok

  • @chandbasha5392
    @chandbasha5392 3 місяці тому +1

    Hi @Harkirat bhaiya I have requested refund ...as I am unable to follow and I have an emergency issue I can't concentrate or follow now ...I have sent a mail requesting refund ...please process my refund as soon as possible

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

    React Native roadmap

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

    Do you think artificial intelligence tools will completely take away our jobs? Do you think I should continue studying?

  • @krsnabantai
    @krsnabantai 3 місяці тому +1

    6:02 bro said same thing 3 times

  • @urjasvi
    @urjasvi 3 місяці тому +1

    what if I am only interested in backend development ?
    what if frontend does not interests me at all ?
    what is the roadmap for folks like me ?
    would really appreciate you Harkirat if you can please create a video around this topic.