Developers often get confused with React when it is compared to Angular or Vue, as Angular and Vue are JavaScript frameworks but react is not.

But the question is why?

Let us first understand what is a library and a framework. The Difference between a library and a framework will open the doors for us to understand why React JS is a library, not a framework.

Library

A library is a collection of pre-written codes that can be used to simplify tasks. For example, we use jQuery (a JavaScript library) instead of vanilla JavaScript to manipulate DOM more easily and efficiently (writing fewer lines of code).

Technically, it is a set of pre-defined functions and classes that developers can use to simplify their work and speed up the development process.

You can integrate libraries into existing projects to add additional functionalities. It means your code or application uses the library.

Framework

A framework is like a “foundation” on which developers build applications.

It means a framework provides us an eco-system or structure along with reusable pieces of code to deal with complex development challenges easily.

For example, if we are creating an application using next.js or Laravel, then we work within their infrastructure i.e. we cannot put a file anywhere as we want or change anything as we wish. They provide us ways to manage routing, do authentication, manipulate databases, provide folders to put our public files (HTML, CSS, js, static assets like images), etc.

A framework can even contain libraries.

Key Difference between a library and a framework

The main difference between a framework and a library lies in a term called ”inversion of control”.

When you use a library, you are in charge of the flow of the application. You are choosing when and where to call the library.

But when you use a framework, the framework is in charge of the flow. It provides some places for you to put your code, and it will call your code when required.

Detailed Explanation – library vs framework

Let’s get back to React JS

It does not provide the complete “eco-system” to develop an application not even provide a design system.

It lacks a lot of built-in features and heavily depends on third-party packages, like for routing you need to use react-router, to deal with forms you need to select one package among Redux-Forms, Formiq, or Final-Form, etc., for making API calls you need to decide whether to use AXIOS or fetch API and thus, it makes React confusing and time-consuming.

Also, there is no “right” way to do something in React, not even style guides are present, which means every project can look totally different.

So, it is our responsibility to develop an opinion about how to build a project in React and especially what other libraries we gonna use with it as mentioned above. Of course, we need to use third-party libraries to tackle lots of problems like dealing with forms, routing, styles, API calls, etc., and without them React is incomplete.

React is referred to as “unopinionated” because of there are lots of options to do something and we have to choose our tools (packages) carefully and create a proper design system for a specific project.

That is why React is called a library, not a framework!

A framework provides you a proper eco-system to do something which means you cannot write or place anything anywhere, everything is built according to a design pattern.

For Example, Next.js is a framework of React JS which provides a lot of built-in features like routing, server-side rendering, image optimization, and much more which you can do in React JS too, but you need to write a lot of extra codes.

A framework specifies a pattern like where you will put routing files, component files, pages files, etc. Next.js provides a proper place to put your files accordingly and has a design pattern that makes it a framework.

This article is not written to make you hate React JS, but to tell you that it is too much flexible, i.e., you have a lot of options to achieve something and you can integrate a lot of third-party packages to extend the features of an application to the next level!

React provides feasibility to developers to develop their applications using whatever they want but when it comes to a framework, you are bound to use what has been provided to you by the framework itself, whether you like it or not.

Hence, if you want to take full advantage of React then you must be aware of third-party packages and learn them to use in React.

Thank you for your time!