Original subtitles

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