The React Docs Are Wrong (If You Are Trying To Learn React)

Web Dev Simplified · Beginner ·🌐 Frontend Engineering ·3y ago

Key Takeaways

The React documentation is criticized for suggesting to start with Next.js, making it harder for beginners to learn React, and instead recommends learning React on its own first using tools like Veet, and then simplifying the learning process as much as possible.

Full Transcript

react finally launched their new documentation and took it out of beta recently which is amazing because the new docs are so much better than the old docs but there's one massive problem with the new documentation and this problem makes it more difficult for every single person to learn react if you haven't worked with react before or you know very little about react this problem in the react docs is going to make your Learning Journey just that much harder [Music] welcome back to web dev simplified my name is Kyle and my job is to simplify the web for you so you can start building your dream project sooner and to get started all I have is the home page of the react documentation open I'll link it down in the description for you but obviously if we're just starting out learning react obviously clicking learn react is going to make the most sense so if we click here it brings us to the quick start documentation now this page is great it explains tons of Concepts and react with really good examples overall I really love this section the documentation but you'll notice there's nothing in here about how to actually install react or start working with react it just jumps you right into like what react is and how all the things work inside of it so I personally think you should start with the installation but either way we can click over on installation to figure out how we should get started with react and you can see that there's a bunch of different ways to get started they recommend just using something inside the browser so you don't have to install anything personally I don't like this route just because you're not really using The Full Experience because obviously if you wanted to play something production you need to know how to install and use react on your own computer so I'm not a huge fan of this route but it's perfectly okay and usable they also recommend this way where you can just download an HTML page with react being imported again not a fan so I'd recommend you know start a new react project this makes the most sense if you want to build an app here we go let's click on this documentation and this is where I have a large problem with the documentation it says right here if you want to build a new app or website using react what you want to do is you're going to want to use one of the react powered Frameworks and they list a few down here for example you have next you have remix you have Gatsby and it mentions a few other different Alternatives as well and this is great I mean if you want to build a large scale production application inside of react it doesn't even have to be that large just any type of production ready application in react using a framework like next.js is going to be an awesome way to do it because it includes things like routing data fetching and so on they mention that in the documentation but if you're just learning react and all you care about is actually learning react there's nothing in here that is going to help you downloading and using next means that now you have to learn next and react to the same time and it become really difficult to separate what's in next and what's in react this is another problem I find where people try to jump from no JavaScript skill right into learning react it's hard to separate what is react specific and what is Javascript specific it's the same thing if you jump straight from JavaScript into next JS it's a really hard to separate what's react and what is next.js and fine there's a lot of overlap between them and for the most part you may be working in xjs that's okay and even if you know you'll only ever use nexjs and never use react on its own it still makes it more difficult to learn react because now you have to learn all of react which is already really confusing and then on top of that you have to learn all of next JS at the exact same time this is why personally if you're just getting started learning react I do not recommend using any framework at all instead I recommend using Veet now they do mention I will give them this they do mention using something like the inside of this section right here on how to use react without a framework and if you expand this it gives you a really long explanation and essentially it does you should really not use this unless your app has really unusual constraints not served well by Frameworks I personally don't think that's a great reason not to use Veet or you know parcel whatever else you want to be using it's essentially saying don't use this except for under very very very specific Niche use cases that most people probably won't run into and it's you know hidden away inside of this drop down to even be able to see it you have to scroll all the way to the bottom just to get a recommendation honestly if you're building a larger scale application use next that makes a lot of sense but if you're learning react the best way to learn react is to use just react and nothing else and I think Veet personally is the best way to do that so I would recommend using Veet with react and then once you have a react app up and running on your computer in V you can follow along with the documentation completely and it's going to be so much easier because if you have a next application you have all that other next related code in there and it can become really difficult to follow along with learning react when you have all that other code in the way I believe so strongly that the best way to learn react is by breaking it down and learning it on its own first before jumping into a framework that I built my entire react course which literally just launched yesterday around the idea of using Veet and learning react on its own before you jump into a framework like next JS as you can see the content in this course covers everything you need to know about react and then it jumps into some more complex topics like security testing clean code best practices that kind of stuff before finally after learning everything there is to know about react jumping into the world of nextges and figure out how to build applications with next JS I personally believe the best way to learn something is to simplify it as much as possible as you can already tell by my channel name so with my react course I tried to simplify everything by learning just react and at the beginning it's just learning small sections of react and slowly adding more and more and more on until you're finally ready to jump into next.js and you can build applications with confidence now if that sounds interesting to you and you want to learn in a simplified way I highly recommend you go down in the description option and click on the link to my react course it launched just yesterday like I mentioned but it's only going to be available for one week from the launch date so it's only got six more days after the day of this video going live and the reason I'm doing that is because I only currently have the first half of the course finished the second half of the course I'm going to be working on over the next coming weeks and months and I'm going to be releasing that as I go to anyone that purchases the course so if you purchase the course now you're not only going to get it at a severely discounted rate but you're also going to be able to access the new content as soon as I finish recording it and uploading it for you so you get Early Access and a discounted rate but again it's only going to be up for a week before I take it down and then in a few months when I finish the entire course it'll be back up permanently so if you're watching this video after the fact I would recommend still clicking on that link checking out the course it may be fully finished and released by then and if not I'll have an email field where you can sign up and I'll let you know as soon as it releases now I know economically it may not make sense for you to buy a course at this time so I want to give you some free alternatives to my course as well the react documentation like I mentioned is actually really really good if you just don't use next and instead use beat if you're first starting out learning react the rest of the documentation is really good and really helpful also I obviously have tons of free videos on YouTube on react and I actually have a completely free react hooks specific course that you can check out it'll be linked in the description as well that course only covers the react hooks it covers all of them but that's the only thing it covers so it requires you to at least have some base level of react before you take that course with that said thank you very much for watching this video and if you are at all interested in my react course I highly recommend you check it out before it closes down so you can get into that early bird discount

Original Description

React Simplified Course: https://reactsimplified.com Learning React is hard enough as is, but with the docs telling you to start with Next.js it makes learning React even harder. In this video I talk about why I think the docs are wrong and what I would do instead if I was just learning React. 📚 Materials/References: React Simplified Course: https://reactsimplified.com New React Docs: https://react.dev FREE React Hooks Simplified Course: https://courses.webdevsimplified.com/react-hooks-simplified 🌎 Find Me Here: My Blog: https://blog.webdevsimplified.com My Courses: https://courses.webdevsimplified.com Patreon: https://www.patreon.com/WebDevSimplified Twitter: https://twitter.com/DevSimplified Discord: https://discord.gg/7StTjnR GitHub: https://github.com/WebDevSimplified CodePen: https://codepen.io/WebDevSimplified ⏱️ Timestamps: 00:00 - Introduction 00:33 - React Docs Issue 04:08 - NEW React Course 06:00 - Free Alternatives #ReactJS #WDS #ReactDocs\
Watch on YouTube ↗ (saves to browser)
Sign in to unlock AI tutor explanation · ⚡30

Playlist

Uploads from Web Dev Simplified · Web Dev Simplified · 0 of 60

← Previous Next →
1 Introduction to Web Development || Setup || Part 1
Introduction to Web Development || Setup || Part 1
Web Dev Simplified
2 Introduction to Web Development || Understanding the Web || Part 2
Introduction to Web Development || Understanding the Web || Part 2
Web Dev Simplified
3 Introduction to HTML || Your First Web Page || Part 1
Introduction to HTML || Your First Web Page || Part 1
Web Dev Simplified
4 Introduction to HTML || Basic HTML Elements || Part 2
Introduction to HTML || Basic HTML Elements || Part 2
Web Dev Simplified
5 Introduction to HTML || Advanced HTML Elements || Part 3
Introduction to HTML || Advanced HTML Elements || Part 3
Web Dev Simplified
6 Introduction to HTML || Links and Inputs || Part 4
Introduction to HTML || Links and Inputs || Part 4
Web Dev Simplified
7 Learn Git in 20 Minutes
Learn Git in 20 Minutes
Web Dev Simplified
8 5 Must Know Sites For Web Developers
5 Must Know Sites For Web Developers
Web Dev Simplified
9 10 Best Visual Studio Code Extensions
10 Best Visual Studio Code Extensions
Web Dev Simplified
10 Learn CSS in 20 Minutes
Learn CSS in 20 Minutes
Web Dev Simplified
11 How to Style a Modern Website (Part One)
How to Style a Modern Website (Part One)
Web Dev Simplified
12 How to Style a Modern Website (Part Two)
How to Style a Modern Website (Part Two)
Web Dev Simplified
13 3D Flip Button Tutorial
3D Flip Button Tutorial
Web Dev Simplified
14 How to Style a Modern Website (Part Three)
How to Style a Modern Website (Part Three)
Web Dev Simplified
15 Animated Loading Spinner Tutorial
Animated Loading Spinner Tutorial
Web Dev Simplified
16 How to Write the Perfect Developer Resume
How to Write the Perfect Developer Resume
Web Dev Simplified
17 Animated Text Reveal Tutorial
Animated Text Reveal Tutorial
Web Dev Simplified
18 Learn Flexbox in 15 Minutes
Learn Flexbox in 15 Minutes
Web Dev Simplified
19 Custom Checkbox Tutorial
Custom Checkbox Tutorial
Web Dev Simplified
20 Start Contributing to Open Source (Hacktoberfest)
Start Contributing to Open Source (Hacktoberfest)
Web Dev Simplified
21 JavaScript Shopping Cart Tutorial for Beginners
JavaScript Shopping Cart Tutorial for Beginners
Web Dev Simplified
22 Responsive Video Background Tutorial
Responsive Video Background Tutorial
Web Dev Simplified
23 1,000 Subscriber Giveaway
1,000 Subscriber Giveaway
Web Dev Simplified
24 How To Prevent The Most Common Cross Site Scripting Attack
How To Prevent The Most Common Cross Site Scripting Attack
Web Dev Simplified
25 Transparent Login Form Tutorial
Transparent Login Form Tutorial
Web Dev Simplified
26 The Forgotten CSS Position
The Forgotten CSS Position
Web Dev Simplified
27 How to Code a Card Matching Game
How to Code a Card Matching Game
Web Dev Simplified
28 10 Must Install Visual Studio Code Extensions
10 Must Install Visual Studio Code Extensions
Web Dev Simplified
29 Learn CSS Grid in 20 Minutes
Learn CSS Grid in 20 Minutes
Web Dev Simplified
30 Learn JSON in 10 Minutes
Learn JSON in 10 Minutes
Web Dev Simplified
31 10 Essential Keyboard Shortcuts For Programmers
10 Essential Keyboard Shortcuts For Programmers
Web Dev Simplified
32 What Is The Fastest Way To Load JavaScript
What Is The Fastest Way To Load JavaScript
Web Dev Simplified
33 Differences Between Var, Let, and Const
Differences Between Var, Let, and Const
Web Dev Simplified
34 How To Install MySQL (Server and Workbench)
How To Install MySQL (Server and Workbench)
Web Dev Simplified
35 Learn SQL In 60 Minutes
Learn SQL In 60 Minutes
Web Dev Simplified
36 How To Solve SQL Problems
How To Solve SQL Problems
Web Dev Simplified
37 What Are Design Patterns?
What Are Design Patterns?
Web Dev Simplified
38 Null Object Pattern - Design Patterns
Null Object Pattern - Design Patterns
Web Dev Simplified
39 Your First Node.js Web Server
Your First Node.js Web Server
Web Dev Simplified
40 How To Setup Payments With Node.js And Stripe
How To Setup Payments With Node.js And Stripe
Web Dev Simplified
41 How To Learn Any New Programming Skill Fast
How To Learn Any New Programming Skill Fast
Web Dev Simplified
42 Asynchronous Vs Synchronous Programming
Asynchronous Vs Synchronous Programming
Web Dev Simplified
43 JavaScript ES6 Arrow Functions Tutorial
JavaScript ES6 Arrow Functions Tutorial
Web Dev Simplified
44 Are You Too Old To Learn Programming?
Are You Too Old To Learn Programming?
Web Dev Simplified
45 JavaScript Cookies vs Local Storage vs Session Storage
JavaScript Cookies vs Local Storage vs Session Storage
Web Dev Simplified
46 JavaScript Promises In 10 Minutes
JavaScript Promises In 10 Minutes
Web Dev Simplified
47 Builder Pattern - Design Patterns
Builder Pattern - Design Patterns
Web Dev Simplified
48 JavaScript == VS ===
JavaScript == VS ===
Web Dev Simplified
49 JavaScript ES6 Modules
JavaScript ES6 Modules
Web Dev Simplified
50 8 Must Know JavaScript Array Methods
8 Must Know JavaScript Array Methods
Web Dev Simplified
51 CSS Variables Tutorial
CSS Variables Tutorial
Web Dev Simplified
52 JavaScript Async Await
JavaScript Async Await
Web Dev Simplified
53 How To Choose Your First Programming Language
How To Choose Your First Programming Language
Web Dev Simplified
54 Easiest Way To Work With Web Fonts
Easiest Way To Work With Web Fonts
Web Dev Simplified
55 Singleton Pattern - Design Patterns
Singleton Pattern - Design Patterns
Web Dev Simplified
56 Responsive Navbar Tutorial
Responsive Navbar Tutorial
Web Dev Simplified
57 CSS Progress Bar Tutorial
CSS Progress Bar Tutorial
Web Dev Simplified
58 Learn GraphQL In 40 Minutes
Learn GraphQL In 40 Minutes
Web Dev Simplified
59 What is an API?
What is an API?
Web Dev Simplified
60 Learn How To Build A Website In 1 Hour!
Learn How To Build A Website In 1 Hour!
Web Dev Simplified

The React documentation is flawed in its approach to teaching React, and beginners should focus on learning React on its own before using a framework like Next.js. This video discusses the importance of simplifying the learning process and provides recommendations for tools and resources to learn React effectively.

Key Takeaways
  1. Start by learning React on its own without a framework
  2. Use tools like Veet to simplify the learning process
  3. Separate React-specific knowledge from JavaScript-specific knowledge
  4. Focus on understanding React hooks and their applications
  5. Simplify the learning process as much as possible
💡 Learning React is more effective when done on its own, without the added complexity of a framework like Next.js, and simplifying the learning process is crucial for beginners.

Related Reads

📰
The 5 Levels of Front End Engineering (And Where Most Developers Get Stuck)
Learn the 5 levels of front end engineering to improve your skills and avoid getting stuck in a career rut
Medium · Programming
📰
Browser-Based PDF Editing with Vue 3 and pdf-lib
Learn to build a browser-based PDF editor using Vue 3 and pdf-lib, enabling users to edit PDFs directly in the browser
Dev.to · sunshey
📰
Say Goodbye To Electron?
Learn about a new approach to building native applications without Electron, using frontend-style development
Medium · Programming
📰
Why Vanilla JS? In the article below, I am sharing my story of building SaaS product in vanilla js and explaining why I decided to go with this approach. https://guseyn.com/html/posts/why-vanilla-js.html
Learn why choosing Vanilla JS can be a great approach for building SaaS products and how it can simplify development
Dev.to · Guseyn Ismayylov

Chapters (4)

Introduction
0:33 React Docs Issue
4:08 NEW React Course
6:00 Free Alternatives
Up next
How To Build A Twitter Clone - React Next JS - Appwrite Crash Course
Adrian Twarog
Watch →