Unveiling the Distinction: Frameworks vs. Libraries and Navigating React's Abundant Ecosystem

I noticed misconceptions about frameworks and libraries, so I'll try to explain the differences. 🔍

Note: REACT IS A LIBRARY AND NOT A FRAMEWORK!!! 🚫📦

What are Frameworks?

In the world of JavaScript, a framework (an all-in-one kit) is a complete structure that includes everything you need in order to build a large-scale application. It encompasses everything (like HTTP requests, Styling, Routing, Form Management, etc.) all out of the box.

However, the downside is that you're bound by the framework's tools and conventions (which is not always bad). Examples of Frameworks include Svelte, Vue, Angular, etc.

What are Libraries?

Basically, libraries are pieces of code that developers share with other developers to use. A good example is React, which we call a view library because all it does is draw components onto the user interface (UI).

However, if you want to build a large-scale single-page application, you'll need to include a lot of external libraries for things like HTTP requests, Styling, Routing, Form Management, etc.

Using a library gives you freedom; you can choose multiple 3rd-party libraries to build a complete application. The downside is that you need to research, download, learn, and stay up to date with multiple external libraries. 📚🕵️‍♂️

REACT'S 3RD PARTY LIBRARY ECOSYSTEM

Due to React's immense popularity, it has led to a vast ecosystem of libraries that we can include in our projects for various needs, such as:

Routing (for single-page applications SPA):

• React Router
• React Location etc.

Making HTTP Requests:

• Fetch()
• Axios etc.

Managing Remote Server State:

• React Query
• Apollo Client etc.
• SWR (Stale-While-Revalidate) etc.

Global State Management:

• Context API
• Redux
• Zustand etc.

Styling:

• CSS Modules
• Styled Components
• Tailwind CSS etc.

Form Management:

• React Hook Form
• Formik etc.

Animations/Transitions:

• Motion
• React Spring

Entire UI Components:

• Material UI
• Chakra UI
• Mantine

Due to the numerous library options for React application needs, developers saw a need to create frameworks on top of React, which include:

• Next.js
• Remix
• Gatsby

These are opinionated React frameworks. They offer many features such as server-side rendering (SSR), static state generation (SSG), and a better developer experience, among others. 🛠️🚀

If you found this helpful please leave a like, or feedback on your thoughts.