Are New Frameworks Replacing React?

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

Key Takeaways

The video discusses the current state of React and its position in the market, with the introduction of new frameworks like Svelte and Solid, and the upcoming features in React such as server components. It also mentions the React Simplified Course, which covers everything needed to know about React.

Full Transcript

it seems like every other day in the JavaScript ecosystem a new library or framework comes along and shakes up how everything is done things like spelled drastically changed how front-end Frameworks work because they made things so much easier and the way that they compiled things beforehand really changed up the ecosystem for front-end Frameworks and there's lots of other things that have come out since then that really start to shake things up and you start to realize wow many of these Frameworks are actually doing things better or differently than react is react getting too old is it falling behind is it becoming old news a lot of people are starting to think react is dying but is it really the short answer is no reacts not dying it's not going anywhere anytime soon but it's a lot more complicated than you'd think foreign 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 one of the many reasons people think that react is starting to die is because they see charts like this where if you look at react you can see since 2019 in this particular graph is starting to decline well first of all we need to understand what this graph is even looking at to figure out if this is even a meaningful decline or if it has any value and then we also need to look at the actual percentage values as you can see it's only gone from 89 to 83 and 83 percent is still quite High depending on what we're measuring in this case I'm looking at the retention graph which if we look down here retention is just the number of people that would use react again divided by the total number of people that responded and essentially it's saying the people that said would not use again so 83 percent of all people that took the state of JS survey in 2022 said that they would use react again and that's a quite good indicator even though it has declined from 89 that's still saying that essentially four-fifths of all people that use react would use react again now you will notice there are are a few other Frameworks that are higher rated one of them I mentioned at the beginning is spelled they have a lot of really cool improvements that they added to it on top of react that just make it easier to use which is why I can see a lot of people wanting to use felt over top of it solid is another one that has a lot of things added into it just to make it easier to use and that's one thing that react does not have going for it in general doing things in react is a little bit more verbose than other you know Frameworks such as felt or such as solid now just based on this graph alone though it's hard to say that react is dying I mean 83 is already incredibly dominant with people wanting to come back and use it again which is great and if you compare this value to other Frameworks that I would actually say I would consider are dying if we look down here like angular and Ember these are Frameworks that are on the way down they're definitely declining as you can see they went from really high you know 60 plus percent market share all the way down to 40 and Embers even worse they went from 40 something percent all the way down to below 20 so these are things I would consider that are you know on the decline and dine as you can see they have drastic drops between years like this is a 25 dip in people that would want to come back and use it again it's a really big change well with react it's like a couple percentage points either way each year also this graph doesn't explain everything if we go over and we look at for example awareness this says that pretty much every single person that took this survey knows what react is same thing for angular view which makes sense those are the top three big players and they've been around for a long time usage I think is the big one though if we look here react is by far and away the dominant winner and has been and every year this survey has been taken 82 percent of all developers use react well the next highest is actually angular at 49 which you may think that's kind of interesting because if we look at the retention graph angular is definitely dying but there are going to be jobs for angular for a long long time because companies built their entire business on angular so they need to have angular devs to continue to develop that code base so obviously there's going to be jobs for angular for a very long time to come I mean there's a reason there's jobs for kobold developers even though nobody actually writes code in kobold anymore for new projects but there are all things written in it so they need Developers for those jobs now I'm not saying react is obviously declining but even if it was declining obviously there's still going to be tons of react jobs out there because tons of people are using react I mean 82 of all developers are using react which means you know potentially 80 of companies are probably using react in some way if they're using a front-end framework now it's great to know that even if react was declining that there's going to be jobs for it out there just like there are for angular but obviously if react isn't a down client you don't want to actually spend time learning it just to realize that your skills are pigeonholing you into an older technology that has limited growth potential so what I want to do in the second half of this video is I want to talk about why I don't think react is actually going to die and why I think some of the new things coming to react are really going to revitalize it and make it even more popular than it already is so to do a good comparison between react and another language like spelled I'm going to be using some code from fireship this is actually based on a video he did a while ago where he made the same exact application in 10 different Frameworks I'm just going to be using react and svelte but I'll link that video in the description and cards for you if you want to check out the full video of him going through all of this but if we look here in the react version if you're used to react this is pretty straightforward stuff we have some state that we're using we're using a reference here for certain stuff we have this effect right here to do some loading of data and then we also have this effect right here which is going to be adding some data into local storage for us then if we go down a little ways you can see that we actually have the jsx that's rendering all this information out for us overall this application is super straightforward it's not super complex but if you want to do really basic things inside of react it requires you to know a lot of really rather complex things requires you to know how you state works it requires you to how to use effect works which are both complex Concepts and also it requires you to do certain things like if you wanted to actually use this input value instead of using a ref I would need to set the value here to you know our input value and then I would need to make sure that I also have an on change on here because we only have one-way data binding so then I would need to say set input value to e.target that value so there's kind of a lot of boilerplate when you want to do this kind stuff we just go back here to what he had before there we go also if we wanted to be able to update our to-do's the proper way because right now the way that they're doing it with fireship he's actually doing it in a way that could lead to bugs we would need to use the actual function version inside of here instead so we would do the function version that has the previous to-do's and then we can come in here and essentially just return this there we go and this will just be our previous to-do's like that if we wanted to make sure that we were doing this properly and also this local storage to set the items we need to either be inside of here somewhere or it would need to go inside of its own use effect that depends on our to-do's changing and again you can see there's a lot of complexities and a lot of things that you need to understand about react in order to write what's really a rather simple application now if we look at these felt application you'll notice that the code is much simpler if I open this up in the source folder there are literally two files and this file is essentially empty so there's really only one file in this entire application as you can see this file is small I mean there's not very much inside of here and all of it is rather simple we have our you know mounting here so that's handling our different life cycle methods we have some variables up here for storing information and we're just kind of treating this like a normal JavaScript application we're just saying update this variable update local storage and it's just automatically going to re-render and do everything for us just by changing around these variables so it's very easy to get started because it works more like normal JavaScript I don't need to understand how immutability works I don't need to understand how all these crazy hooks work I don't need to understand how the virtual Dom works and all these other things like compiling and bundling all I need to know is just how to modify some variables and it's just going to do everything automatically for me it's kind of magic these features that spelled bring along and some of the other Frameworks bring along that make writing your code easier are some of the things that react really lacks and that's one of the reasons that people think react is kind of doomed and going downhill because it doesn't have all these nice easy to use features but the one thing that react does have that most of these other Frameworks does is not only a robust layer of libraries you can use on top of it tons of actual support from people using it but it's also extremely customizable and it's going to work for almost any situation you need one bad thing about things like svelt that have a lot of magic is they become difficult to actually do certain things because sometimes the magic is a little bit difficult to understand and you need to really understand it at a low level in order to do certain things the right way well with react since it's a little bit more low level on its own it's a lot easier to do some of those more customizable things now that on its own isn't enough to make react the winner and this case but there is a new feature coming out for react called server components which I really think is going to Skyrocket react let me just close out of this real quick you can see I have the documentation pulled up for next JS the nice thing about server components is they're going to be in pretty much any framework you use whether it's next JS remix Blitz it doesn't matter whatever you're going to be using with react for your full stack framework is going to include something related to server components and as these become more and more fleshed out more and more Frameworks are going to include it but server components essentially give you a way to really easily render out components on the back end and then serve them to the client side and it's going to get rid of a lot of the really annoying parts of react because like I said doing that to use State and use effect stuff is kind of annoying but it's not too bad it's fairly easy to work around a lot of times libraries take care of all that for you but what is really annoying with react is making sure you deal with all of the data fetching and stuff that you need to deal with so you have to fetch data from the server on the client you have to deal with making sure it's in sync dealing with loading States error States and so on all of that is really annoying a lot lot of the newer libraries kind of take care of that for you where they make it a little bit easier to do and that's kind of what server components is doing for react it's making it so that you don't have to worry about doing all this data fetching on the client you do all the fetching on the actual server and then you just send down the information you need over onto the client so as you can see here you kind of have your server stuff that does all your server stuff and then you have separate stuff that runs on the client for handling the different interactivity of your application if you've been around for a while in the web development world you may realize this looks just like a normal web application like way back in the PHP days and I think that's actually a good thing because react is going more towards that you know server client kind of relationship instead of pushing everything to the client we're now pulling back and taking the stuff that should be done on the server and putting it back on the server which makes writing your overall application much easier to do and as you can see if we just keep going here it just does a lot of stuff for you as you can see there's a clear separation between what should be done on a server and what should be done on the client and this makes writing your code easier and makes connecting the two easier and overall it's going to make a lot of the boilerplate Annoying difficult stuff that react has to make you do to do all that data fetching and syncing up all your state and it's going to get rid of a large majority of that this is why I think that react is definitely here to stay if you asked me maybe a year ago you know what are some of these other Frameworks going to take over I was like hey you know what some of these Frameworks are really cool they're doing a lot of great things that react should think about or should think about doing and now react has seen what a lot of those Frameworks are doing and they're saying you know what we have our own way of handling this kind of stuff we're going to clean up react make it easier to use make it more of a server client relationship deal with all that server side generation for you these things that these other framers have been doing for a while react is now finally getting around to adding that into their own framework and it's going to make it so that react lasts so much longer as well so if you've been holding off on learning react because you're worried it's going to get overtaken by something else don't worry react is the number one right now and it's going to continue to be number one for quite some time and if you want to actually learn react I highly recommend checking out my full react course covers every single thing you need to know about react to go from knowing nothing to be in an intermediate react developer I'm going to have a link in the description to that course right now the course isn't quite complete so I have an email field you can just enter your email and I'll let you know as soon as it's done but if you're watching this far enough in the future it may already be done so if you're interested in learning react I highly recommend you check out that course Linked In the description below with that said thank you very much for watching and have a good day

Original Description

React Simplified Course: https://reactsimplified.com React was one of the first frameworks to adopt the modern component model which is one of the reasons it is so popular today. React did many things to simplify frontend development, but now there are tons of new frameworks that can do everything React can, but with even more features and quality of life improvements. Does this mean React is doomed to become obsolete? 📚 Materials/References: React Simplified Course: https://reactsimplified.com Fireship 10 Frameworks Video: https://youtu.be/cuHDQhDhvPE 🌎 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:52 - React Trends 04:30 - React vs Svelte 08:00 - Future of React #ReactJS #WDS #FrontendFramework
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 video discusses the current state of React and its position in the market, with the introduction of new frameworks and upcoming features in React. It also mentions the React Simplified Course, which covers everything needed to know about React. By watching this video, you can learn about the trends in front-end frameworks and how to build applications with React.

Key Takeaways
  1. Learn about the current state of React
  2. Compare React with other frameworks like Svelte and Solid
  3. Understand the concept of server components in React
  4. Use server components to render components on the back end and serve them to the client side
  5. Handle data fetching and syncing up state with server components
  6. Take the React Simplified Course to learn more about React
💡 Server components are a new feature coming to React that will make it more competitive with other frameworks, allowing for easy rendering of components on the back end and serving to the client side.

Related Reads

📰
Starting the Frontend for a Full-Stack E-commerce Store (Auth Store, Axios, and Public vs. Protected Routing)
Learn to set up the frontend for a full-stack e-commerce store using Auth Store, Axios, and public vs. protected routing
Dev.to · Chinwuba
📰
Practice Frontend Typeahead Interviews With AbortController and ARIA
Improve your frontend interview skills by practicing typeahead searches with AbortController and ARIA, learning to handle debounce, cancellation, keyboard navigation, and accessibility features.
Dev.to · Karuha
📰
Building Maintainable Frontend Systems
Learn to build maintainable frontend systems for long-term success by following practical guidelines and best practices
Dev.to · Ufomadu Nnaemeka
📰
Using the Publish–Subscribe Pattern in React with Native Browser Events
Learn to simplify component communication in React using the publish-subscribe pattern with native browser events
Medium · JavaScript

Chapters (4)

Introduction
0:52 React Trends
4:30 React vs Svelte
8:00 Future of React
Up next
Elementor Angie Ai Plugin Tutorial
Quick Tips - Web Desiign & Ai Tools
Watch →