How To Learn Enough React To Be Dangerous
source link: https://hackernoon.com/how-to-learn-enough-react-to-be-dangerous
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
How To Learn Enough React To Be Dangerous
Listen to this story
Upcoming Software engineer. Currently learning MERN stack Interested in Deep learning, System Design, Blockchain.
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 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.
Udemy courses are popular among programmers
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 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.
The worse thing is all of them have 30–40 hours of video content. Also, the updates are mostly add-ons and patches in video content
Tweets on outdated courses
Outdated courses
Tweet link in reference
An interesting thread. Check out the discussion on Twitter.
Redux toolkit reduces complexity significantly
Redux co-maintainer talking about outdated courses
Research Paid Off
Luckily, I had already started learning React from Net Ninja's 2021 Modern React Tutorial on Youtube . (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.
React roadmap from roadmap.sh
Youtube Playlists
Modern React Tutorial on Youtube 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.
Freecodecamp / 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 iactively gives/takes feedback on Redux on Twitter
Youtube/Google search and Documentation will keep you updated. I am going to watch this 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
Recommend
-
65
DoubleLocker ransomware: Evil offspring of dangerous Android banking TrojanBy Der...
-
34
LRtDW is a series of articles putting Rust features in context for low-level C programmers who maybe don't have a formal CS background — the sort of people who work on firmware, game engines, OS kernels, and the like. Basi...
-
11
Just Enough CSS Grid to be Dangerous Apr 28, 2020 • Tim VelettaTags: css
-
4
Equipped Enough to Learn > CEOWORLD magazineLearning has evolved further through digital literacy that entails assessing, experiencing and disseminating information in a digital world and can be differently utilized depending on discipline...
-
10
TikTok is now tagging dangerous ‘self-driving’ videos — but it’s not enoughShould such videos be uploaded at all?
-
5
Patrizia Calvia May 26, 2022 3 minute read...
-
2
javascripttip (3 Part Series) Follow me on
-
4
React YouTube Video
-
1
New developers: “How do I know what to learn and when I’ve learned ‘enough’ ?” A question frequently asked by new developers is what to learn, how much to...
-
7
Rails World 2023: Just enough Turbo Native to be dangerous Joe...
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK