Ever dabbled in web development? If so, you've likely come across terms like "libraries" and "frameworks." Both are tools that developers use, but they serve different purposes. Let's break it down before diving into React!
Libraries: Imagine a toolbox filled with specialized tools for specific tasks. That's essentially what a library is. It provides a collection of pre-written code snippets (functions, classes) that developers can integrate into their projects to achieve particular functionalities. They offer flexibility and allow developers to choose the tools they need.
Example: Lodash (JavaScript Library)
// Shuffle an array using Lodash
const numbers = [1, 2, 3, 4, 5];
const shuffledNumbers = _.shuffle(numbers);
console.log(shuffledNumbers); // Output: [..., shuffled order of numbers]
Frameworks: Think of a framework as a pre-built structure, like a house frame. It provides a foundation and core functionalities that developers can build upon. Frameworks often dictate a specific way of doing things, offering a more structured approach to development.
Example: Django (Python Framework)
# Create a basic view function in Django
def hello_world(request):
return render(request, 'hello.html', {'message': 'Hello, World!'})
Now, the star of the show: React!
React is a library, not a framework. It focuses on building user interfaces (UI) with reusable components. These components are like building blocks that developers can combine to create complex interfaces. React offers a declarative way of describing what the UI should look like, leaving the "how" to React itself.
This flexibility allows developers to choose other libraries for routing, state management, and other functionalities, creating a custom development stack.
Reasons React is a Library:
- Focuses on a specific aspect (UI)
- Offers flexibility in choosing other tools
- Requires developers to make more decisions
Test Your Knowledge!
Which of the following best describes a library?
a) Provides a complete structure for development
b) Offers pre-written code for specific tasksTrue or False: Frameworks offer more flexibility than libraries.
Remember, understanding the distinction between libraries and frameworks can help you choose the right tools for your projects. Keep coding and exploring new technologies to enhance your skills!
whether you're using a library or a framework, the key to great work is passion and dedication. Happy coding! 🧑💻
Motivational Quote:
"Every great developer you know got there by solving problems they were unqualified to solve until they actually did it." → Patrick McKenzie
Top comments (7)
React is a library.
There are other libraries out there that play nicely with react.
Some for routing, some for state management, etc.
Typically, you'll see these libraries with react in a project which may make it seem like a framework.
But react is a library.
React-Native for example, is a framework.
It allows devs to spin up new applications for hybrid mobile development. There's a lot more foundation in place to help you build an app. A lot of opinions on how you should do it too.
This article is misleading.
First, your definition of a framework is lacking, since it misses the points of inversion of control and imposing certain patterns on the code within, replacing them with the ambiguous "pre-build structure" – by that definition, component libraries would be frameworks and frameworks would be libraries.
Second, you apply that definition to react out of its context of react-dom, -native etc. React itself does nothing but converting JSX based pragma calls into an immutable object structure and provides a few hooks to manage internal state, which is hardly useful I on its own. So yes, the package react is a library as part of a framework that mostly consists of this package and a render runtime that in lack of a better name should also be called react. It also lacks reasonable application state management, so external libraries to fill that shortcomings are recommended.
Great explanation and important to know the difference!
It's also a common interview question haha.
It's a UI framework.
It's very opinionated about how things are done.
You can't easily mix it with vanilla Dom manipulation, as it will aggressively undo the changes you make, and you can't even manipulate data outside of it's strict structures.
React is not pick and choose. Once you enter react, it's all react or you'll be bitten.
Frameworks: Don't call me, I'll call you (eg: Rails or Django)
Library: I will call you myself and use you only when I need to (eg: Export PDF)
React in particular is weird because it started out as just "the V in MVC", then it mutated into a massive framework, and now it wants to step aside allowing things like Next.js and Remix to be the framework, but React is still pretty forcing (you cannot change it easily once you adopt it).
I think they like to call it a meta-framework. It has qualities of both, and it can surely be confusing, especially to new devs trying to make sense of it, when it actually just grew organically.
Please explain:
How do you choose to build part of your application using Svelte, while another part is using React and the rest is done using common HTML?
As far as I know, React is a king on it´s own island, so this might be a reason to call it "framework"
Does it matter what it is, if it gets the job done?