Is React.js a Frontend Framework?

"Well, yeah, it is. No doubt about it! 😎"

If this was your immediate response, then I'm here to offer a gentle correction. Contrary to common belief, React is categorized as a frontend library, not a framework.

"But wait, aren't libraries and frameworks essentially the same thing? A framework is just a bunch of bundled libraries, right? 🤔"

Hold on! Let's clear up this confusion and explore libraries and frameworks. 🚀

🟦 Both libraries and frameworks serve as pre-packaged code snippets created by developers to simplify the lives of fellow developers. But the main difference lies in the control of who-calls-who. You are in control of a library. A framework is in control of you. To be specific, your code calls a library but your code is called by a framework. ⚙️

📚 A library provides you with reusable codes and functions but does not specify where or how to use them. You can use them whenever you like, wherever you like. You just call the library.

⚙️ A framework, however, has some guidelines. A framework tells you how to use it and where to place your code. Then the framework calls your code.

✨ Allow me to simplify this distinction using an analogy.

Using a library resembles building a house, where you have full creative control. The blueprint, room arrangements, kitchen layout, wall colors, and lighting fixtures are of your choice. You simply enlist the help of builders, electricians, and the like, conveying your preferences to them. This is like the act of invoking library functions within your code as and where you desire.

In contrast, using a framework is similar to moving into an apartment. An apartment is pre-built with some guidelines. Modifying the apartment's structure or layout is a no-go; these elements are predetermined. You must abide by these rules while adding your personal touch through furniture, wall shades, curtains, and such. Similarly, within a framework, you put your code in specific places as defined by the framework and the framework calls your code.

I hope this analogy helped you get an idea of the two - library and framework. One is not wrong when one say “A framework is a collection of libraries”. Yes, a framework usually contains several libraries within it. But it is NOT JUST a collection of libraries.

Now, let's explore why React is classified as a library, while something like Next.js is a framework. Allow me to illustrate with a basic example involving routing.

In a basic React application, built-in functionalities like routing or data fetching are absent. Here, you possess the freedom to select your preferred approach. For instance, you can opt for React Router or any other alternative library for routing, along with fetch or Axios for data retrieval. React does not specify any routing methods.

Conversely, a comprehensive framework like Next.js provides precise instructions for aspects such as routing. For instance, Next.js employs a file-based routing system. You establish routes as folders, each of which must contain a page.tsx file to be publicly accessible. The contents of the page.tsx files are entirely up to you. So, Next.js tells you how to use routing and calls whatever code is present in the page.tsx of that route.

To summarize:

• Libraries and frameworks are both reusable codes that can be used to build websites.

• When using a library, your code is in control of the library. When using a framework, the framework is in control of your code.

• A framework tells the developer what they need, where they need it and when they need it. A library does not tell the developer anything. The developer uses whatever library they need, and calls it wherever they need it and whenever they need it.

That’s it for this one. Hope you learned the basic differences between a library and a framework with this post. Happy coding!✨