Libraries vs Frameworks & The React Ecosystem | Lecture 135 | React.JS 🔥
Summary
TLDRThis video script delves into the fundamental distinction between frameworks and libraries, using a relatable analogy of making sushi at home. It highlights React as a powerful JavaScript library, offering developers the freedom to choose the right tools and libraries to build robust applications. The script explores the vast React ecosystem, comprising numerous third-party libraries for routing, state management, styling, and more. It also introduces opinionated React frameworks like Next.js and Remix, which provide a more streamlined development experience by bundling pre-selected libraries and configurations. The video promises to equip learners with a solid understanding of React and its essential libraries, laying the groundwork for exploring advanced frameworks in the future.
Takeaways
- 🧩 React is a JavaScript library, not a framework, which means it provides building blocks for user interfaces, but does not include features like routing, styling, or HTTP request management out of the box.
- 🍣 Frameworks like Angular are like an all-in-one sushi kit, providing all the necessary ingredients, while React is like buying ingredients separately, offering more flexibility but requiring additional choices and setup.
- 🔌 React relies on a vast ecosystem of third-party libraries to add functionality like routing, state management, styling, and more, giving developers freedom to choose the libraries that best suit their needs.
- 🧰 Opinionated React frameworks like Next.js, Remix, and Gatsby build on top of React, providing pre-configured solutions for common requirements like routing, state management, and styling, improving developer experience and project setup speed.
- 🏗️ React frameworks can be considered full-stack frameworks, as they offer features that allow building complete web applications while using React as the base layer.
- 📚 Learning to use React effectively involves understanding and integrating its most important third-party libraries, which will be covered in detail throughout this course.
- 🌐 React's immense popularity has led to a vast ecosystem of third-party libraries for various needs, such as routing, HTTP requests, state management, styling, form handling, animations, and UI component libraries.
- ⚖️ Frameworks offer a batteries-included approach, providing a complete structure with tools and conventions, while libraries like React offer more freedom but require more decision-making and integration.
- 🔄 If a chosen third-party library changes or is no longer maintained, it may require finding a replacement in a React project, whereas frameworks provide a more stable, integrated solution.
- 🚀 Mastering React and its ecosystem of libraries is a prerequisite for effectively using opinionated React frameworks like Next.js, which will be covered in the later part of this course.
Q & A
What is the main difference between a framework and a library in the context of React?
-A framework like Angular is a complete structure that includes everything needed to build a large-scale application, while React is a library that primarily focuses on rendering components to the user interface (UI). React requires additional third-party libraries for features like routing, styling, and HTTP requests.
What are the advantages and disadvantages of using a framework versus a library?
-The advantage of a framework is that it comes with many features out-of-the-box, but the disadvantage is that you're stuck with the framework's tools and conventions, even if you don't agree with them. On the other hand, a library like React offers more flexibility and freedom to choose the third-party libraries you want, but this also requires more research and decision-making.
Can you build a React application without using any external libraries?
-Yes, it is possible to build React applications without using any external libraries, especially for small apps or while learning React. However, for larger, production-level applications, it is recommended to use third-party libraries for features like routing, state management, and styling.
What is the React ecosystem, and why is it important?
-The React ecosystem refers to the vast collection of third-party libraries available for React developers to use in their projects. This ecosystem is important because it allows developers to choose the best libraries for their specific application needs, such as routing, state management, styling, and more.
What are opinionated React frameworks, and why were they developed?
-Opinionated React frameworks like Next.js, Remix, and Gatsby were developed to address the overwhelming decision-making process involved in choosing and setting up multiple third-party libraries for a React application. These frameworks are built on top of React and include the developers' opinions on how to handle aspects like routing, state management, and styling.
What are some advantages of using an opinionated React framework?
-Using an opinionated React framework can make project development easier and faster, as many important decisions have already been made for you. It can also lead to a better overall developer experience, as the framework offloads much of the setup work and provides additional features like server-side rendering or static site generation.
Can you explain the analogy used in the script to differentiate between a framework and a library?
-The script uses the analogy of making sushi at home. Getting an all-in-one sushi kit is compared to using a framework, where everything is included but you're stuck with the provided ingredients (tools and conventions). Buying individual ingredients separately is compared to using a library like React, where you have the freedom to choose the best ingredients (third-party libraries) but also need to research and assemble them yourself.
What is the purpose of the section discussing React frameworks like Next.js in the script?
-The section discussing React frameworks like Next.js is included to introduce the concept of opinionated frameworks built on top of React, which can provide a more structured and feature-rich development experience compared to using React with individual third-party libraries. It serves as a preview for a later part of the course where one of these frameworks will be used for a larger project.
What are some examples of third-party libraries mentioned in the script that are commonly used with React?
-Some examples of third-party libraries mentioned in the script that are commonly used with React include React Router (for routing in single-page applications), React Query (for managing remote server state), Redux (for managing global application state), styled-components or Tailwind (for styling).
What is the main takeaway regarding the choice between using a framework or a library in a React project?
-The main takeaway is that both approaches have their advantages and disadvantages. Frameworks like Angular provide a more structured and opinionated approach with many features out-of-the-box, while React as a library offers more flexibility and freedom to choose third-party libraries but requires more decision-making and setup. The choice depends on the specific project requirements and the developer's preferences.
Outlines
🧩 React: A Library, Not a Framework
This paragraph explains the key difference between React and frameworks like Angular or Vue. React is a JavaScript library that provides a view layer for building user interfaces, unlike frameworks that offer an all-inclusive structure with built-in features like routing, styling, and HTTP management. Using React requires integrating separate third-party libraries for additional functionality, offering flexibility but also requiring more decision-making from developers.
🌳 The React Ecosystem and React Frameworks
React's popularity has led to a vast ecosystem of third-party libraries for various needs like routing, state management, styling, and UI components. While overwhelming for some developers, this flexibility allows tailoring applications to specific requirements. To simplify development, opinionated React frameworks like Next.js, Remix, and Gatsby have emerged, offering pre-configured solutions and offloading setup work. These frameworks extend React's functionality, often positioning themselves as full-stack solutions. The course will cover learning React itself and its essential libraries before exploring frameworks like Next.js in depth.
Mindmap
Keywords
💡Library
💡Framework
💡Ecosystem
💡Opinionated
💡Components
💡Single Page Application (SPA)
💡State Management
💡Server-side Rendering (SSR)
💡Static Site Generation (SSG)
💡Full Stack
Highlights
React is a library, not a framework, which means it provides developers with more freedom to choose the tools and libraries they want to use, but also requires more decision-making and setup.
The difference between a framework and a library is analogous to buying an all-in-one sushi kit (framework) versus buying individual ingredients (library).
Frameworks like Angular are 'batteries included' and come with built-in tools for routing, styling, HTTP requests, etc., while React requires developers to choose and integrate third-party libraries for these functionalities.
The freedom to choose libraries in React allows developers to pick the tools that best suit their application's requirements, but also requires more research and learning.
React has a huge ecosystem of third-party libraries for various needs like routing, state management, styling, forms, animations, and UI components.
Some of the most important libraries used with React include React Router, React Query, Redux, styled components, and Tailwind.
The need to choose and integrate many third-party libraries in React has led to the development of opinionated React frameworks like Next.js, Remix, and Gatsby.
React frameworks are built on top of React and extend its functionality by including opinions on how to handle routing, state management, styling, and more.
React frameworks offload setup work from developers by making decisions about which libraries to include, leading to a better developer experience and faster project development.
Many React frameworks offer additional advantages like server-side rendering and static site generation, and can be considered full-stack frameworks for building complete applications.
Mastering React and its most important third-party libraries is a prerequisite for learning and using React frameworks.
The course will cover building a large project using Next.js, a popular React framework, after mastering React and its ecosystem.
React's popularity has led to a vast ecosystem of third-party libraries for various needs like routing, HTTP requests, state management, styling, forms, animations, and UI components.
Choosing the right libraries and staying up-to-date with them is a responsibility for React developers.
React's flexibility and freedom come with the trade-off of decision fatigue and increased setup work for developers.
Transcripts
All right.
And now to finish off this section
let's talk about something entirely different.
So this lecture is not really
about how React works behind the scenes,
but more about what React actually is,
which is a library.
So for future React developers like you
it's important to understand what it means
that React itself is a library and not a framework.
And so let's now learn about the differences,
as well as the React ecosystem.
And to understand the difference
between a framework and a library,
let's start with an analogy.
So imagine that you want to make your own sushi
for the first time,
just like I did recently for the first time as well.
So, you have two choices about how you want to do it.
The first option is to just buy one
of those all in one sushi kits,
which will come with all the ingredients that you need
and so then you don't have to buy anything separately.
All you have to do is to assemble these ingredients
into your sushi.
However, there is also a downside to this
because now you are stuck with the ingredients
that are included in the kit that you bought.
So if you find out
that you don't like one of these ingredients,
then you still have to use it anyway.
Now, instead of getting an all in one kit,
you also have to option to buying
all the ingredients separately.
And so this will give you complete freedom
to choose only the best ingredients
and the ones that you like the most.
On the other hand,
all this freedom can give you decision fatigue
because now for each ingredient
you need to research which brand is the best option
and then you also have to go buy each
of the products separately.
And even worse,
if one of your selected brands changes or is no longer sold
then you need to start the whole process over.
Now, okay,
but probably at this point you're wondering,
"Why is he going on and on about sushi?"
Well, the reason is
that this analogy actually translates beautifully
into the difference between building a web application
using a framework or using a library.
So we could actually just replace the images here
and call it a day.
So, we could describe Angular, Vue, or Svelte, for example
as the all-in one kit
and React as buying separate ingredients.
And the pros and cons of building a web up
with each of these approaches
are basically exactly the same
as in making sushi at home.
Okay, but actually, let's now replace these terms
with their actual definitions
and actually learn what's the difference
between a framework and a library.
So, in the world of JavaScript
a framework is basically a complete structure
that includes everything that you need
in order to build a complete large scale application.
We can say that frameworks
like Angular are batteries included
because they include stuff like routing, styling,
HTTP requests for management,
and more all out of the box.
Now, the downside of this is that you're stuck
with the framework's tools and conventions
even if you don't like or agree with them.
However, that's actually not always bad.
And so this is not a real downside for some developers.
Now, on the other hand,
we have JavaScript libraries,
which are basically pieces of code
that developers share for other developers to use.
And the prime example here is of course, React,
which is what we call a view library,
view because all React does is to draw components
onto a user interface,
so onto a so-called view.
Now, if you want to build
a large scale single page application,
you will need to include many external third party libraries
for things like routing, styling, HTTP requests, and so on.
So all these functionalities are not part of React itself
unlike what happens with Angular and other frameworks.
And so this is how this notion
that React is a library ties into the analogy
of buying separate ingredients to make sushi.
Because to build a React app,
we have to choose all these separate libraries.
Now, don't get me wrong here.
We can actually build React apps with just React itself.
So, without using any libraries,
but that only makes sense for small apps
or while we are still learning React.
Now, being able to choose multiple libraries
in order to build your application
offers you incredible freedom
because you can choose exactly
the ones that you like the most.
And also every app will have different requirements.
And so each app will require a different combination
of libraries.
And so including all of them
in a framework might not even be necessary.
However, on the other hand,
the implication of this is that as a React developer,
you need to be able to find
and download all the right libraries
for your specific application.
And of course, on top of that
you then need to learn how to use these libraries
and even stay up to date with them over time.
But don't worry, it's actually not as bad as it may sound.
So, if you follow this course until the end
you will have a very good understanding
of the most important libraries that we usually include
into most React projects,
which leads me actually to the next point,
which is React's huge third party library ecosystem.
So, React's huge popularity has led to a really,
really large ecosystem of libraries that we can include
in our React projects for different needs like routing
for single page applications, making http requests,
managing remote server state,
managing global application state,
styling, managing forms, animations and transitions,
and even entire UI component libraries.
Now, I will not go over all of them here one by one
because that just takes too much time
and you can also just research them if you need.
So instead, I will show you which ones I consider
the most important libraries
and so these are the ones that we will use later
in the course.
So things like React Router, React Query,
Redux, styled components, or Tailwind.
Now, many React developers actually do feel overwhelmed
by having to take so many decisions and choosing
between so many third party libraries.
And so this fact, among some other reasons,
has led to the development
of multiple opinionated React frameworks
such as Nextjs, Remix or Gatsby.
So, Nextjs or Remix are React frameworks
because they are actually built on top of React.
So they basically extend React's functionality
and they are opinionated because other developers basically
included their own opinions into how to handle stuff
like routing, state management,
or styling into these frameworks.
So, where in a traditional React app,
we have to make decisions about what libraries to include
in an app built with a React framework.
Some of these important decisions
have already been taken away from you, the developer.
And so this makes project development much easier
and much faster,
and it can also lead
to a better overall developer experience.
Now, different frameworks specialize in different aspects,
but all of them offload much of the setup work from you.
Also, all of them offer many other advantages
besides just being opinionated,
such as server side rendering
or static site generation.
In fact, we can even describe many of these frameworks
as full stack React frameworks
because they include so many features
that we can actually build full stack apps with them,
all while using React as the base layer.
But anyway,
this is just a brief overview of React frameworks.
We will learn a lot more about this
in the last part of the course
where we will actually build a very large project
using Nextjs.
Now, this will not be included in the course at launch time,
but I will include it at a later point.
But at this point, I just wanted to let you know
that these frameworks exist
because of course we can only learn about them
once we really master React itself
and also its most important third party libraries.
Посмотреть больше похожих видео
What is React | Lecture 09 | React.JS 🔥
Master the React ecosystem in 2024
Components, Props and JSX in React | Sigma Web Development Course - Tutorial #106
How To Master React In 2024 (Complete Roadmap)
Diferença entre API, Biblioteca e Framework em Desenvolvimento de Software
Pure React vs Next.js | What’s Happening in React?
5.0 / 5 (0 votes)