Is React a framework or library? - This is the question that started many disputes among developer communities, and in this article, we will answer it, providing the best pro and con arguments.
As a software development company specialized in web development and mobile app development, we did not manage to avoid this question internally. Our web developers discussed this topic so intensively that they were on the edge of letting their keyboards out of their hands. That's why we thought of creating a complete guide for you, in which we point out the key differences between these two and what React really is.
So let's roll on.
1.What is the difference between a framework and a library? 2. What Is React? 3. What is React Native? 4. Is React a framework or library? 5. Is React the best library? 6. Advantages of using React library 7. Disadvantages of using React library 8. Conclusion
Woah! That's quite a definition. But what exactly are those routine programming features and tasks? Well, those are functionalities you would otherwise need a third party library to achieve. Think of dependency injection, authentication, or routing inside a web application.
As a js library, its main focus is to work with state management and render the state to a virtual DOM, which gets copied to the actual DOM.
While using React alone, you can build a simple web application. In order to use the full power of React, you'd need to use additional libraries such as React Navigation or React Router that work in an opinionated way.
Looking on the official react website, we get the following definition:
That should answer the question and not cause any other debates, right? Well, not exactly; the debate over "Is React a framework or library?" is as strong as ever.
Over the years, developers, software engineers and developer communities came with pros and cons related to the status of React as a library or React as a framework. Let's analyze them together.
|React as a library||React as a framework|
|Follows the UNIX philosophy “Make each program do one thing well”. And that’s exactly what to expect from a library like React: it does one thing and it does it well.||React and the few libraries that are around it’s ecosystem such as React Navigation offer all the tools required to build a client-side application most of the time.|
|React can be easily plugged into an existing technology stack - and that’s the definition of a library.||Because of its state and lifecycle on the components you inverted the control to React.|
So, is React a framework or library? After countless research and debates between my colleagues and me, we decided that React is a js library that works similarly to a js framework.
React Native is a framework for building native apps using React. It can be used to develop applications that target anything from Android, iOS devices to Windows systems.
In React Native you can build your own mobile applications fast - like, lightning-fast.
We want to show you what you could create, so we made a small guide for a game we developed - rock, paper, scissors!
Rock, Paper, Scissors Game in just 100 lines of code!
We start by splitting our screen into three parts - at 20%, 40% 40% heights:
Then we declare some states to hold a countdown, a winner and the number of games played:
And modify our first part to display them:
But, hmm, it's not really a game if the player does not interact with anything, is it? In the second part of the screen, we want to let the player choose one of the three options: rock, paper, or scissors. So let's do that.
We simply create three buttons. When one is pressed, we update a state with the value from the corresponding button. Simple right?
So first, let’s create a state that holds our players choice:
Now, let's go ahead and create our buttons. We'll use some emojis to make them more flashy.
That looks like something.
So we can only press the button when the game has not started (timer = 3) or the timer reached 0, and we want to restart the game. We increment the number of games played by 1 with setGames(games +1), and we add our player option with setPlayerChose("rock"); We could create a component for this but for the sake of this example, let's just copy it for our paper and scissors buttons.
We're getting somewhere. But when the player selects an option, the countdown should count to 0; then the device should choose an option and see who wins.
So first, let's make the countdown be 3 when the player starts a new game (remember, games go up by 1 each time the player picks an option):
Easy-peasy! Now let's make the counter go down to 0 when the player picks an option:
Now, what's left for the device to pick up an option and see who wins! And it has to do it when the counter reaches 0.
So first, let’s have it pick it’s option:
And display that option to the user:
Only one thing remains, and that's to announce the winner!
And now if we play...
Oh! We've been defeated! That's not good. Give them a few years, and who knows what will happen. But maybe you can win.
You can test the game online or on your own phone by scanning the QR code under "My device" on the right side of the screen.
Library. And yes, it is. This might be a bit biased since me and my colleagues like React - a lot - but let's try to see it from a more objective perspective.
When choosing the right libraries and frameworks to build your mobile app or web app, it's important to look over a couple of aspects, and one of them is their popularity. It's important that a framework is popular so that it has a well-established dev community around it. If you were to search on google or StackOverflow a question regarding some specific functionality or bug inside the framework, you'd most likely want to see other people who might have encountered the issue and found a solution. If we think of Angular vs React, the second one is definitely more popular.
Another measure is the number of jobs each framework offers, and here, React is king. Looking over a comparison on Google Trends between React jobs, Angular jobs, Vue jobs, and React Native jobs in the last twelve months, we see that React is holding the first place:
One of the most significant advantages we see when using React are its functional components. With the introduction of React Hooks in 2018, it's possible to write entire web applications, or mobile applications, with just functions posing as React components.
Those are the main two reasons we put in front when someone is asking: "Why React?". There are many others: the virtual DOM, a great dev community, amazing developer tools, and a huge ecosystem.
JSX - wait, wasn't that an advantage? Well, it's a bit tricky. JSX has been seen as one of the greatest advantages of using React but also a disadvantage as it may violate the separation of concerns.
Another disadvantage is the fast pace at which the js library is evolving. The frontend development teams might be reticent in adopting all those new changes while keeping their skills updated with the new ways of doing things. Fast updates might also lead to poorly written documentation - another reason why application developers might find it hard to keep their React skills up-to-date.
We can split React apps into two main categories: web apps and mobile apps.
From the web apps out there, the most notable one - and the creator of React - is Facebook. Instagram is another great example of a web application written entirely in React. And when talking about react app giants, Netflix does not fall back. They even posted a blog post named "Netflix Likes React"in which they share their reasons for adopting React: Startup Speed, Runtime Performance, and Modularity. Other notable web apps include DropBox, WhatsApp Web, and Yahoo! Mail.
For mobile applications, there are even more big names that use React. And they don't even have to build entire applications using React Native, just the functionalities they need. If we take a look at the official React Native website, we see names such as Oculus, Shopify, Discord, Skype, and even Tesla.
As a software development company that developed multiple web apps and mobile apps over the past years, we've used React a lot. Here are a couple of applications we've built with it: FeetUP - a fitness app for inverted yoga, SEDUCO - a course management system or Nylah - an Affiliate marketing platform.
Is React worth learning? Hell yes.
If you're looking to start a career in software development by developing some basic web apps or mobile apps, React is simply just an amazing tool to get you started.
A simple search on Linkedin or other job-posting platforms will show you a huge number of job opportunities for React. And it doesn't look like it's going to die anytime soon.
If you're curious to see how much a react app will cost, make sure, you're using our App Cost Calculator to get an estimate.
calculator Find out how much will
it cost to build an app Estimate my app