All language subtitles for 15 - Diving Deeper Into the Code English

Let's take a closer look at the frontend, the client side, the browser side,

I will use these terms interchangeably by the way and that of course is powered by React,

specifically there, we build a React SPA, a single page application.

Now this simply means that React is in charge of re-rendering everything in the browser,

only one HTML

page, that single page that makes up this term single page application, is served from some server to the browser

in the end and thereafter, React takes over and whenever something needs to be drawn onto the screen

or whenever something needs to change on the screen or needs to be re-rendered, React will do that.

For that, we'll also handle frontend or client side routing with an extra library, react-router-dom

and this will help us render totally different React components, React is all about components, you

will by the way also get a React refresher in one of the next modules. So the React router will help

us render React components based on a path the user enters into the URL bar of the browser. So we

will have the feeling of having multiple pages but in the end, it's all React and therefore Javascript

re-rendering significant parts of our page, so of what the user sees when we change the URL or when

we get new data from the backend and so on.

Now in our React application, we also typically handle some frontend state, state in the end is data

you could say that influences what is shown on the screen and when our state changes,

chances are that we want our re-render parts of the screen. React is all about managing such state and

it has built-in mechanisms to automatically re-render the parts of the screen that need to change when

something changes.

Now for state management, we can use React state, in class based components we can use hooks, a relatively

kind of new feature in React and/or also for application-wide state, the Redux library.

Now as I mentioned, you will get a refresher on React later in the course but I will not dive into every

aspect of React, that would be enough for its own course

and indeed I do have such a standalone React course which I strongly recommend that you have a look

at before you dive into this course.

Now one other important part of your React application are of course all these components you build because

React is all about components and how you style those, so the styling is also part of the frontend

work or of the frontend application, that your application looks good.

Now as I mentioned, for the routing we'll use react-router-dom and there we can basically set up a

route configuration and then define which React components are rendered for which path. We can implement

state management with React hooks, with our custom hooks which will also build throughout this course and/or

with Redux and for components and styling,

we will build in this course some utility and UI components, though I will also say that throughout this

course, I will also provide some finished UI components to you and some finished styles so that we don't

spend the majority of the time of this course on writing basic button or input components and managing

the style of these components because that's really not the core of React and of this course and therefore

some finished components will be provided to you for this part, in general of course, we'll build

the entire React application from scratch though and this is what React is about, it's all related to

the frontend, how we update it and when things should change there.

Now let's have a look at the backend.