Learn and understand React - the practical tutorial

This introduces the topics that will be covered in the course and explains the motivation behind the course.

There are now countless UI frameworks for JavaScript - so why should it be React of all things? In addition to the undisputed popularity of this library, there are also a few more profound reasons that speak in favor of React.

In this lesson, we set up the development environment and use npm create vite to create our first React app in no time at all.

After we created a "fresh" React app in the last lesson, the aim here is to understand the structure of this app and explain how React can be embedded in a website.

A little refresher on var vs. let/const.

Destructuring enables the targeted extraction of elements from objects and arrays. On closer inspection, there are many possible applications that make JS code more elegant and compact.

Functions are essential in JS and were previously only declared and defined using the keyword function. ES6 introduces an elegant and short notation that makes the code more readable and offers a solution to a tiresome problem with this.

Modules have been used in NodeJs from the very beginning, but initially it relied exclusively on the CommonJs module format with require. Since ES6, there has been a module definition in the standard and thus the new import/export keywords. This format is now supported by almost all (new) JS libraries and NodeJs can also handle it in the latest versions.

With JSX you describe the UI of a component and integrate JS expressions into it. The project file for the video contains the finished code for this tutorial section.

Custom React components can be written very easily using functions that return JSX.

This lesson explains how data and JavaScript expressions can be integrated into JSX.

Without a state that can change, it is almost impossible to implement a meaningful app. In React, useState is normally used for this. This lesson introduces this hook and explains its use.

Props are used to transfer data to child components. Here we explain exactly how this is done and what you need to pay attention to.

If props change dynamically, the corresponding render function of the component is called again.

This explains how the to-do app will be structured. The video is accompanied by a project file containing the finished code for this tutorial section.

If a child component wants to communicate something to the parent component, this is done via a callback prop.

To-dos should also be completed at some point. Here we discuss how this works in the code.

The appearance of a UI is undoubtedly important. That's why I explain here how this works with the Emotion library and how you can use the Prop className with it. The style attribute, with which you can style each element separately in detail, is also discussed.

The to-dos can be divided into two groups by filtering the to-do array.

Of course, you also need to be able to delete to-dos. Here we explain how this works using array filtering.

Up to now, we have always "wrapped" components in DIVs. In certain cases, however, this can be dispensed with.

Now it gets interesting: To-dos can be easily saved persistently in the browser memory and, of course, loaded again so that they "survive" the reloading of the page.

Side effects can be integrated with useEffect. The mounting of a component can also be handled with this function.

Brief summary of our to-do app and latest improvements.

The video player app is created with create vite and it is explained how the app should be structured. The project file attached to the video contains the finished code for the video player.

DOM elements can be referenced with the ref attribute and accessed with useRef. Here we do this with the video element.

We create the actual video player, which already has buttons for play, pause and stop.

As you never need Play and Pause at the same time, we combine them into one button.

The video element's own controls also control the video, but this means that our status for the play/pause button is not adjusted accordingly. We fix this by using event handlers on the video element.

We can also change the volume using a separate control.

Jumping to any position in the video (Seek) is surprisingly easy to accomplish by setting the currentTime property.

The length of the video is only determined after the video metadata has been loaded, which is why we have to wait for the right event.

The playlist is realized by a list, which can be implemented with the HTML element select.

We use useEffect here to react to the change of the src-propand reset the state of the video player.

The playlist is transformed from fixed entries to an array.

Now the editing of the video list comes into play: We add the addition of video entries.

What you add, you must also be able to delete again. We do this in a similar way to the to-do app by filtering.

The playlist should not only serve as a "bookmark list", but also automatically play the videos one after the other. This will be realized in this lesson.

For the impatient: Buttons for the next and previous video.

A special treatment for the first and last video is implemented: the Next and Previous buttons should be deactivated accordingly.

Now we save and load our playlist. This is done in the browser's local storage in the same way as in the To-do app.

You can watch the original videos used as examples in the video player app here (all CC attribution license, see the corresponding websites):

Elephants dream: https://orange.blender.org/
Big Buck Bunny: https://peach.blender.org/
Sintel: https://durian.blender.org/

Using the useJsonFetch hookas an example, this section explains how to write your own hook functions.

Changing state with the setter of useState can be tricky. But with useImmer it is no longer a problem.

The UI is built faster and reacts more quickly to user input if the render functions are not called unnecessarily. memo can be used to prevent components from being rendered if their props do not change.

With useCallback you can prevent the unnecessary rendering of child components when callback propsare used.

Complex calculations within the render functions should only be carried out if necessary. With useMemo, the results of these calculations can be cached, taking into account the dependencies.

I summarize the results of the course here and give tips on what the participants should look at after the course.