We will begin by using React in the simplest and most minimal way possible. You will quickly see the maintainability benefits of using components instead of “vanilla Javascript”.

Components are modular, encapsulated and composable pieces of UI, and React places a very heavy emphasis on them. In fact, in a React app, anything visible (and even many non-visible things) are defined as Components. We will learn about several different types of components, starting with the lightest, fastest and simplest ones.

With support for asynchronous component loading, dynamic routing, code-splitting and scroll-restoration, it is not surprising that React-Router is the most popular client-side routing library in the React ecosystem. We will get hands-on experience with React Router v4 in a variety of scenarios carefully designed to represent the use cases most developers face when building their own React apps.

Knowing how to build React components is just the beginning of our journey — it is important to know the best practices and patterns for using these tools effectively. In this unit, we will look at several architectural patterns that will serve you well as your app increase in complexity.

Preact has the same ES6 public API as React, but weigh in at just 3kb. It is a great choice for single-screen apps that do not have to deal with a lot of complexity. We will take a look at how Preact can be used as almost a drop-in replacement for React, and how we can use Preact’s own API directly for an even smaller app!