‫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.