‫So this section is all about React Router
‫and single-page applications.
‫And so let's start by understanding what these actually are.
‫So when we use routing in a web application,
‫we basically match different URLs
‫to different views in the user interface.
‫In the specific case of React,
‫we match each URL to a specific React component,
‫and we call each of these matches
‫between a URL and a component a route.
‫Then when one of those specific URLs gets visited,
‫the corresponding React component will be rendered.
‫For example, we could show this homepage,
‫so this home component,
‫whenever a user visits the route URL of example.com.
‫But when they go to /login on the same URL,
‫we then show the login component.
‫And if they log in successfully,
‫we can then redirect them to the /app path,
‫so to show them the app screen like this.
‫So in this example, we have three routes
‫that the user can visit,
‫the route URL, /login and /app,
‫which will all render different React components.
‫So basically, this enables users to navigate
‫between different screens of the application
‫by simply using links and the URL in the browser.
‫At the same time, routing like this
‫keeps the user interface nicely in sync
‫with the current browser URL,
‫which has a couple of nice advantages
‫that we're gonna discuss later.
‫Now, this type of routing that I just described here
‫only works this way on the client side,
‫so in the user's browser.
‫There is, of course, also routing on the server side,
‫but not in client side React applications
‫like the ones that we have been building
‫and that we will build in this section.
‫But anyway, most front-end frameworks
‫have these client side routing capabilities
‫baked right into the framework.
‫But React is different,
‫because it relies on third party packages
‫for many different functionalities,
‫and routing is one of them.
‫So in React, routing is usually handled
‫by this third party package called React Router.
‫And this is probably the most important
‫and most used React third party library out there.
‫So if you want to learn React development,
‫you need to learn React Router.
‫The reason for that is that routing is fundamental
‫for building something
‫that we call single-page applications.
‫So single-page applications, or SPAs for short,
‫are web applications that are executed entirely
‫on the client,
‫so only in the user's web browser.
‫And just like we discussed before,
‫single-page applications rely heavily
‫on the concept of routes
‫where different URLs correspond to different views.
‫And here is how single-page applications work.
‫Whenever a user clicks on a special link provided
‫by the Router, the URL in the browser simply changes.
‫In the case of React,
‫this job is usually done by React Router.
‫Now, changing the URL will then trigger
‫the DOM to be updated as a result.
‫And in single-page applications,
‫it's always JavaScript that will update the DOM
‫and therefore the page.
‫So usually on a normal webpage,
‫when we click on a link,
‫the browser will load a completely new page
‫and then show us that new page, right?
‫But single-page applications are completely different.
‫The page is simply updated by JavaScript,
‫which means that there will never be a complete page reload.
‫And that's the whole point of the single-page application.
‫It's the entire app in just one page.
‫So without any hard reloads.
‫This makes the web application feel
‫just like a native desktop or a mobile application,
‫which is really a fantastic user experience.
‫Now, going back to React, whenever the URL is changed,
‫React Router and React itself will update the DOM
‫by simply rendering the component
‫that corresponds to the new URL.
‫And then, of course, the whole cycle
‫can be repeated as many times as necessary.
‫So each time the user keeps clicking on a Router link,
‫that will change the URL and the component
‫that's being displayed on the screen,
‫all without reloading the page.
‫Now, it's quite common that some pages need
‫to display some external data,
‫but that's not a problem at all.
‫Whenever that happens, a component can just load
‫some additional data from a server,
‫usually from some kind of web API.
‫So while the single-page app itself runs entirely
‫on the client, it can always communicate
‫with a server in order to fetch some data that it needs,
‫just like we have been doing before in other applications.
‫What we cannot do is to load a completely new page,
‫because then it would no longer be a single-page app.
‫Now, we could actually say that all React apps
‫are in fact single-page applications,
‫because all of them are never reloaded, right?
‫So think of all the apps that we have built
‫up until this point.
‫They were all apps where React updated the Dom,
‫and so they didn't have to reload ever.
‫However, in a professional application,
‫that's just not enough.
‫So big and complex applications rely on your URLs
‫and need the routing capabilities
‫that I described in this lecture,
‫because only then,
‫they can become real single-page applications.
‫And so with that being said,
‫let's now finally go back to code
‫and start implementing our own
‫real single-page applications.