Overview Background information and pre-requisites Discussion on available courses Learning path I am taking with free and up-to-date resources Beyond React.js Conclusion Background So, after deciding to learn a technology, the first thing most of us do is dig the internet for resources be it Reddit, Twitter, Youtube etc. I used to waste a lot of time 2 years back on this. Yeah, I have improved now. I do some research/planning on the resources and focus on getting started fast Things are more complicated with React.js since the library has evolved a lot in the last few years and it's really hard to keep courses up-to-date. The aim of this blog is to save you time learning React by not spending a lot of time on finding resources and focusing on up-to-date resources. I had started learning the React.js library 4 weeks back after doing some research on resources. I had HTML/CSS and JS basics clear before starting with React. I am under a time constraint so I didn't spend a lot of time making projects with pure JS although it is recommended. Prerequisites Let's talk about some prerequisites. I don't want to go into a lot of details here as a simple will do the job. YouTube search If you don't know some concept, you can always just Google it or watch videos about it on Youtube aka follow . HTML/CSS basics, how the box model works, flexbox, some understanding of DOM, HTTP requests, ES6 features(let, const, arrow functions, classes) are the bare minimum. Lazy evaluation If you have basic HTML/CSS/JS knowledge under your sleeves, just start learning React and deal with things on the go. Available courses My first thought was to buy a Udemy course. The top three courses were mostly - Maximilian Schwarzmüller - React - The Complete Guide (incl Hooks, React Router, Redux) Andrew Mead - The Complete React Developer Course (w/ Hooks and Redux) Stephen Grider - Modern React with Redux You can check out this for comparison of the courses. blog In all of these, Stephen Grider's course was the most concise one from what I read on Twitter and Reddit. I bought the course. The Confusion Begins But I realized that most of the course was based on class-based components and the Redux part was also outdated. React in 2021 emphasizes on using functional components and hooks. It is good to know and use class-based components but hooks are the new standard. The minimum knowledge required to use Redux has significantly reduced. Andrew's course was not updated and Max's course was too long and focused  on 1-2 single projects. This is more of a personal opinion but  all of them have 30–40 hours of video content. (Although, it gives the flexibility to learn what you want to learn and provides good idea about the concepts you can learn) Also, the updates are mostly add-ons and patches in video content : Maximilian almost completely updated his course in 12/2021 according to some feedback received. He has re-recorded the lessons covering modern API and redux toolkit etc. UPDATE 1 (Jan 2022) Tweets on outdated courses An interesting . Check out the discussion on Twitter. thread Research Paid Off Luckily, I had already started learning React from Net Ninja's 2021 . (All links towards the end also) and finished this before buying the course. Watch time is under 4 hours (Coding along and pausing for other concepts surely takes way more time) Modern React Tutorial on Youtube So, some research and getting started with the latest YT content helped me avoid going through outdated stuff. This course was purely based on hooks and modern practices. It's crisp and clear and pretty much what the new docs cover. No class-based components. This playlist is not exhaustive but will teach most of the basics such that you can build your own projects. For async JS(HTTP, fetch, promises,async-await) also, Shaun(Net-Ninja) has a playlist which is amazing. Also, new are out . beta docs here Learning Path and Approach I am using mostly documentation, Youtube, and Google search/StackOverflow as my go-to. It's mostly finding a resource as you need and learning by doing (projects). Just for your information, I refunded the course. The course creators are great but the courses are not up-to-date. I occasionally look here for topics. from roadmap.sh Youtube Playlists by Net Ninja Modern React Tutorial on Youtube I would highly recommend this. Pure hooks and very good delivery. NetNinja recently launched a course so you might look into that. (React + Firebase). After this playlist, you should be able to build small-medium projects and should be able to navigate on your own in React world. I watched this playlist, searched and learned some more concepts, and filled the gaps. Now, I am mostly focusing on building projects on my own or following project-based tutorials. NetNinja has up-to-date playlists on Next.js and Material UI. Codevolution USP: You can find everything on React in the order of documentation with very clear explanations. I use this channel as a reference. You can find videos on topics like component life cycles, class-based components etc. It's a good idea to understand class-based too since you might have to refactor existing codebases in future. The instructor(Vishwas) was aware of Hooks when he created the videos. So, tutorials are mostly up-to-date. / Coding Addict Freecodecamp This tutorial by John Smilga is also up-to-date. I have watched some parts. He also has a 15 mini-projects tutorial where he tries to teach React along with standard frontend components. Javascript Mastery Up-to-date content, mostly projects. Additional Channel Mentions Web Dev Simplified - Short videos on React concepts Sonny Sangha - Advanced React js project streams Lama dev Pedro Tech Dipesh Malvia Thapa Technical (Hindi) CodeWithHarry (Hindi) Youtube will start recommending good videos soon! Pro Tip: Store videos related to topics you want in watch later list Websites - One of the best resources out there for MERN stack. FullStackOpen for JavaScript Javascript.info for Web Development Concepts and CSS Google Web Dev for HTML/CSS. InternettingIsHard Again, Google search will give you what you want. Beyond React Redux I am yet to learn about Redux since Context API does most of the job. But the path is clear now. Mark Erikson is a Redux maintainer. Check the tweet . here Youtube/Google search and Documentation will keep you updated. I am going to watch soon. this More React Frameworks or libraries like Material UI, Next.Js Backend Technologies This is up to you. Easy to use BaaS are Firebase and Supabase, or use Node.js, Express, MongoDB. Conclusion There is no need to get overwhelmed. Learning React is easier and more fun than it was a few years ago. Also, you don't have to learn everything. Just enough (Minimum viable knowledge) to create projects. Afterward, you can follow lazy-evaluation. It might be a good idea to follow your framework maintainers/team on Twitter and also be in contact with friends who have done internships/full time in the technology you are learning. Thank you for reading. Suggestions and feedback are welcome. Get hooked to React and make awesome web apps. Other tweet links https://twitter.com/nachoiacovino/status/1395468817061621762?s=20 https://twitter.com/phry/status/1444555616660475906?s=20 First Published here

Fetch

Google

Twitter

YouTube

2022 - HackerNoon Contributor of the Year - Frontend

2022 - HackerNoon Contributor of the Year - Learning

Nominated for 2022 - HackerNoon Contributor of the Year - Frontend

Nominated for 2022 - HackerNoon Contributor of the Year - Learning

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

How to Learn Enough React to be Dangerous

How to Learn Enough React to be Dangerous

Too Long; Didn't Read

People Mentioned

Companies Mentioned

Sankalp

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

How to Learn Enough React to be Dangerous

Too Long; Didn't Read

People Mentioned

Companies Mentioned

Sankalp

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES