React is still the best JavaScript framework to use for frontend web development in 2022, the framework features many out of the box tools that makes it a breeze to work with. React was created by Jordan Walke at Facebook in 2013. Since then react has grown to become the most used JavaScript framework right now. There are many amazing features of react that makes it a dream to work with, the amazing superpowers of react hooks, or allowing you to just write functional component or the huge community and tons of resources built around react.
At this stage of frontend web application development, there are lots of options you could pick from to get the job done, some claim to be more structured while others claim to be more efficient. You might not totally buy this idea but relax, other frameworks might do a thing or two better than React, but personally I think when it comes to overall performance react outshines most JavaScript frame works I’ve used, the development experience with react is nothing short of superb.
You like Object Oriented approach to building your UI? React has class based components, if you like prefer a functional approach react allows you to use functional components. Let’s explore in detail some of the features that makes react the King of JavaScript UI frameworks.
React Uses Plain JavaScript.
This is often an overlooked part of react, the fact that a react file is a simple JavaScript file that exports a class or a function. Let’s simplify this so you’ll understand how easy it is to get started with react.
If you have npm installed you just have to run ‘npx create-react-app app-name’. That command will bootstrap a starter template react app that you can begin editing immediately. You can easily add your own react component by creating a new JavaScript file that exports a function or a class inside the ‘src’ folder.
export default function Component() {
return(<h1>Hello World</> )
}
The code snippet above just illustrates how easy it is to get started with react, we just export a function that returns some JSX. Nothing too complex there, except you are not acquainted with JSX.
JSX is a react extension to JavaScript that allows us to write HTML in JavaScript files, do not however think that JSX is just a smile templating language. The use of JSX allows us to keep our component logic and UI in a single file without bloating it. JSX allows us to interpret JavaScript expression and statements by wrapping it in curly braces, it actually compiles first and is faster than the actual JavaScript we write outside JSX.
It is best to consider JSX in another article.
React Supports Class Based or Functional Components
With react there is more than one approach to compose your UI. If you like complexity, forgive my sarcasm then you can use class based components. A class component is Just a class that extends React.Component, it has a render method that is called to build and return our UI.
import { Component } from "react";
class App extends Component {
render() {
let message = 'Hello World!';
return (
<h1>{ message }</h1>
);
}
}
export default App;
Some things should be simple and straightforward so I prefer using functional components. You just declare and export a function that returns our UI as we did in the earlier example. So whatever style you are comfortable with , react has got you.
React Hooks
This is one of the holy grail of react. React hooks just makes your work so much easier, react hooks are designed to simplify difficult tasks like re-rendering the UI, managing state, picking an element from the DOM and lots more. There is a hook for most things you want and if there isn’t any react hook that meets your need then you can also build your own custom hook.
import { useState } from 'react';
const [ count, setCount ] = useState(0);
function App() {
return (
<div>
<p>
You pressed <b>{ count }</b>
</p>
<button
onClick={setCount(count++)}>
update count
</button>
</div>
);
};
export default App;
We used a very simple react hook here that allows us to update the state of a component and re render the UI anytime there is a state change. Now most people would say, there are other frameworks that makes state management a built in feature, say for instance Svelte or Angular which is reactive by default, but this way is more concise when compared to using vanilla JavaScript or even jQuery.
This ensures that there is less broiler plate code, we would have written more code if this was done without hooks or from a class based component. Hooks also eliminate the need for listening to multiple life cycle events on components, the hook manages all that behind the scene for you.
React is Extendable
This is one of the great aspects of react, the fact that you can easily integrate react with any JavaScript library or framework. You can be sure that most JavaScript modules will work out of the box when added to your react app. Giving you a good starting point that you can play with. You can add as much as you like or you can keep it is simple as you like, it's all down to you to decide.
There are many other framework that are built on top of react, take for instance NextJs, Gatsby, etc.
NextJs is a framework for full stack web app development, NextJS allows us to build for both the server and the frontend from the same codebase, React does not ship apps that can be indexed by SEO bots, but NextJS solves this approach in many efficient ways. Server side rendered applications, pre built HTML templates that can be rendered on the client.
Gatsby is another awesome alternative to NextJS, it basically offers the same features as NextJS and it shouldn't be taken lightly.
React supports Multiple UI Design approach
React also supports multiple approach when it comes to application architecture and and design structure. It is up to you to chose the design and development approach to building your application, you want a data driven system or you want a state driven system?
All that react presents to us is a bare bones for building our application, we get to decide how we are going to use react to build our web app. You decide how you want to structure your components and how you want it to interact with your application state. Your components could be tightly coupled to your application state if that's what works for you.
React has a small learning curve
There is almost zero learning curve for JavaScript developers when they come to start using react and good JavaScript engineer should find it easy to get started with, as compared to learning Typescript because you want to use Angular, don’t get me wrong, TypeScript is an awesome tool and I totally love using it. But the learning curve wasn’t smooth from a beginners perspective.
Since react is basically plain JavaScript, if you are already familiar with using JavaScript, you will find it quite simple to learn react. This does not imply that react is timid, it is advanced enough for the professional while presenting itself in a very simple manner to the beginner.
React has a super strong community
It has the backing of Facebook and an ecosystem of over 100M developers who work with react daily. React is loved amongst the JavaScript ecosystem and remains the most downloaded JavaScript UI library on npm with over 14,534,124 npm downloads.
Leave your thoughts on react and Let me know if you have other frameworks you think comes close or even beats react. I’d love to to see a Thing or two.
Top comments (63)
React might be great for some. Not to rain on your parade but it's really not a framework, despite what people are claiming it to be. It's a library. Like jquery.
And there are tons of libraries that are of similar functionality. Like vue, svelte, or if you like actual frameworks, angular.
I've recently been charmed by svelte but for work, nothing beats angular for spas
Since hooks and context, React can be seen as a framework, not as rigid as angular but still, you don't really need anything else.
Hooks and context have nothing to do with "framework". React is a UI library due to lack of concrete architecture IMO.
Cambridge dictionary: framework
What you're trying to say, it doesn't fit the angular definition of itself and angular calls itself a framework, so everything else is now not a framework? Thats not how words work :P Angular is a different kind of very opinionated framework. Opinionated frameworks are nice if everyone has the same opinion, which was (more or less) briefly the case when angular was first introduced, because it made 2-way data binding easy. Something which was hard(er) in other frameworks of the time like Backbone.js.
React very much defines a supporting structure around which something can be built. The built-in hooks are part of that structure. For an incomplete reference, take a look here: reactjs.org/docs/react-api.html or look at the typedefs for the React object to see what supporting structure React defines :P
Why are we even having this discussion? The trends are extremely obvious, angular is done. 2021.stateofjs.com/en-US/libraries... angular hasnt been popular even before Russia invaded Crimea :B You might as well try to defend ember.js 😅
IMO it's a (light) framework because you don't have to add anything to write full featured applications et scale. I mention hooks because before them we needed a state management tool like redux.
Furthermore React enforce an opiniated unidirectional flowed component based architecture.
@brense I didn't mentioned Angular and its definition of framework, also I didn't defend any framework at all - just talk about React itself.
From my perspective React was and still is a library which solve exactly one problem - playing with VirtualDOM (and side effects) and translating it to changes in DOM. Of course you can write whole application around React but you can do it also around any other library like e.g. jQuery which solve also one problem.
Any other typicall problems like communication with API, state management, routing are solved not by React but 3rd-party libraries which in many cases just integrate other 3rd-party libraries with React (e.g. Redux).
When it comes to architecture/structure topic, React just reacts on certain side effects and run composed functions if something has been changed to modify VirtualDOM and DOM after all. I don't see here anything about supporting structure.
I'm not sure how API communication and state management or routing translate to "structure" for you... IMHO those are domain specific choices. Some business logic doesnt even need routing or API calls...
React doesnt tell you how you should structure your code, thats not the definition of a framework. A framework IS a supporting structure ontop of which you can build. Which is exactly what React is. A framework that tells you how YOU should structure whatever you're building is opinionated and will ultimately fail because it can't keep up with rapid changes in software development.
It´s possible to mix angular and react in the same front-end project? React and vue, react and svelte? So you can call it a library. If not, react can be called a framework?
Well technically anything is possible, but no, generally it's not a practice to include React in an angular project or vise versa etc.
I have actually built UIs with Angular. I even learned Angular before i learned react. Angular is a great framework, and it allows you to build very robust applications. I also like the Angular CLI too.
However apps that I built with Angular ends up being quite large, angular also enforces a strict application structure.
You have to learn TypeScript, if you don't already know how to use it, then you have to learn how to work with Observables, 😥.
Svelte comes close, i like how simple it is to get started with, it has an elegant syntax and a great state management solution which is built in.
Then Again i find myself running back to react, because some libraries I'd like to use doesn't really works out of the box, svelte has a great community but its nowhere near what react has.
Again like I said earlier, in some aspects some frameworks are better, however when it comes to overall performance remains dominant.
Svelte plays very well with JS, this is a oldest arguments users from angular and react often pull from their books. If you really run back to react then you did not research and spend enough time to optimize with just JS.
Great comment until you attempted to pass your opinion as fact. The, arguably, big three vue, react and Angular do a fine job.
PS. Svelte is a compiler 😉
Angular is just a piece of shit. Imagine a Java/Node backend developer and I hate Angular. You write too much to get a ridiculous result.
The only reason to use React is probably the large community. I use it at work, but I really don't like it. It's not the fastest thing in the world, it uses JSX (which is an abomination), it encourages unstructured messy code...
I've also used VueJS and RiotJS (less well known, but has been around about as long as React - and seems to have been a large influence on Svelte) - and they are both much nicer to work with than React.
I'm interested to hear why JSX is an abomination, because I cannot see why.
btw, people who do spaghetti code will do spaghetti code in any language / framework. Even the more strict ones, they just love 🍝.
As anything in JS, with great freedom comes great responsibility. 😉
For me, JSX harks back to the bad old days of PHP and ASP where logic and layout were horribly intertwined. JSX actively encourages this way of working once again - it's just awful. And yes, I know the mess is purely down to the way people are using it... but I've seen many other frameworks that keep this separation to a much greater degree - promoting much neater, coherent code.
JSX isn't bad, but I see @jonrandy 's point.
I think since the first days of app development anywhere, there has been the constant learnings of "don't put your business logic in your views."
I don't use Angular as my first pick of a tool, but partly the reason many devs don't like it is because it forces them to actually use a MVC (varient) pattern. Since hooks came around, I see more and more code just thrown into hooks and shoved into view components.
This makes the code harder to test in unit tests and automation. It makes it hader to refactor or update later. It makes it harder to debug. But it sure is easier to code on the first pass.
Like all coding languages though, JSX can be great. React expects the developer to properly architect the app. If you take the time to build your logic in isolated modules (that can still be called in a hook) you end up with the "contollers" and "services" in Angular. Unless you are building a portfolio website or something crazy simple - a proper React app/site is going to be just as big and heavy as an Angular site.
Not to boder but you can't compare library to framework angular expose tons of ways to optimize the application, sure is hard to learn but once you done it it's more easy than react. And to back up my words I work with react on cz it's the popular one and teach angular to students so I have to know them both
React is easy to learn but hard to mastering. As a developer who worked a bit with React, Angular and Vue I think that the first one is the hardest one after all.
Usually community of React is discussing about hooks, contexts and other few features of library. They talk about UI libraries, forms handling etc. but there is much less discussions about architecture and good patterns at all (not only from React perspective).
As a developer who has to develop and maintain React project which has been written with "react-way" thinking before I become a team member, I must say that there is nothing worse thing than programming without focus on programming and framework/library-agnostic good patterns.
As a React developers we should talk more about decoupled business logic which is not handled by e.g. hooks but only integrated within them with UI, clean architecture and other good practices.
Yeah, good point. That's what we do when we generate the React code at Quest. We decouple the presentation and the business logic, so the presentation is generated automatically from the design and the business logic can custom-coded.
So true!
I totally agree, but unfortunately the fact that it enables such an awful mixture of layout and logic can, and does, result in hideously coupled code. Again, I know it's down to how it's used and I have seen it very occasionally used well, but I think JSX is headed in wayyy the wrong direction.
Let's be honest, the number one reason people use React is because it's the popular option. There are so many better options out there that are not React which are much better. You don't hear about them as much because everyone is concerned with job security and not challenging the status quo.
React is PHP in the browser, evident by the fact it allows you to mix business logic and markup like PHP. It explains a lot that Facebook are behind it and they're a well-known PHP shop.
You are completely right and not those things are just decorators and and pure classes you can actually drop zone drop rxjs and make it even less. Soon or later they ll face big problems not only write components and functionality and that's it. Once learn how Angular provide solutions they apply for all js libs. I teach thinkers after that if they want react or what workspace will require 3h video will be enough, but principles will remain.
@lukeshiru You can use Promises in Angular, Observables was mainly introduced while support for Promises was still being added in to browsers. As for things like Services, that's a standard feature in many languages and frameworks, it's a standard pattern that is worth learning. React has plenty of its own things that it does that are definitely not pure JS. Just look at JSX which has become so entwined with React that it's often difficult to find any pure React JS code these days in online examples or tutorials.
I've been using Angular for 6+ years (ever since it Angular 2 was in beta) but I've been using JS for a lot longer, so it's not entirely true that developers will always look for the Angular way of doing something. Personally, I've always put any language first, the frameworks and libraries come after. That goes for any language/framework/library combination.
One of the reasons I like Angular is the ability to write large scale applications. The last one I worked on in my previous role was over 40,000 lines of code and contained some very complicated functionality. That scale would have been possible with React, but the effort involved to ensure the code was clean and followed SOLID practices would have been far greater.
Angular isn't overengineered, it's just engineered. It's aimed at application development, and large scale projects. Most often, front end web projects are smaller and simpler, so I can see why it might seem that Angular is _always _the wrong choice. However, what Angular does give is a robust introduction into well-architected code, which is invaluable for front end devs who want to scale their applications into larger systems on the back end. React serves a different purpose, but that doesn't necessarily make it automatically better in all scenarios.
React is very popular. That alone makes it a great career choice. Its time will persist just like JQuery, which is still the most popular. But both probably have met their match with Webcomponents and WASM. These two are the future. But that's just my opinion. Zuckerberg is yucky too.
Let's just all let JQuery die off. sigh
No regrets of rewriting a big Vue site to React. I would probably rewrite it to the next best thing if it provides strong benefits and gains a bigger market share. Until that happens I'll happily ride the React train into the sunset.
Great article ! I would add react is one of the only front-end framework which promote immutability and functional description of the UI (with plain JavaScript, not another weird HTML-like DSL)
Some comments may only be visible to logged-in visitors. Sign in to view all comments.