How to Learn Enough React to be Dangerous

Overview

1. Background information and pre-requisites
2. Discussion on available courses
3. Learning path I am taking with free and up-to-date resources
4. Beyond React.js
5. 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 YouTube search will do the job.

If you don't know some concept, you can always just Google it or watch videos about it on Youtube aka follow Lazy evaluation. 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.

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 -

1. Maximilian Schwarzmüller - React - The Complete Guide (incl Hooks, React Router, Redux)

2. Andrew Mead - The Complete React Developer Course (w/ Hooks and Redux)

3. Stephen Grider - Modern React with Redux

   
   

You can check out this blog for comparison of the courses.

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

UPDATE 1 (Jan 2022) : 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.

Tweets on outdated courses

An interesting thread. Check out the discussion on Twitter.

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)

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 beta docs are out 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

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

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

FullStackOpen - One of the best resources out there for MERN stack.

Javascript.info for JavaScript

Google Web Dev for Web Development Concepts and CSS

InternettingIsHard for HTML/CSS.

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.

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