Modern web applications put a lot of focus on the client. But how did we get here? This module explores the
history of web development, explains the need for libraries like React, and shows you what exactly React is and
what you can do with it.
- The Evolution of Web Development
- Components Everywhere
- Combining React with other Libraries
- React Tooling
In this module, we take a look at how a React app is structured, the different ways to create components, and,
- React App Structure
- Class-based and Functional Components
- JSX Crash Course
- Databinding, Collections and Interactivity
- Working with Child components
- Styling React Components
- LAB: React Fundamentals
State and Props
To be able to reuse and split our application into logical parts, we need components. These components are what
we'll use to create interactivity in the application. Interactivity however, can only work if we keep track of the
state of the application. This chapter explores the data flow of a React application and how React components
communicate with each other.
- State in React Components
- Props and Data Flow
- Stateful and Stateless Components
- Transferring Props
- LAB: State and Props
With the Hooks API, we can now add state and other concepts to Functional components. In this module, you'll learn
the ins and outs of functional components and the hooks that make them great.
- Functional Components
- State Hook
- Effect Hook
- Things to Know when Using Hooks
- Building your own Custom Hooks
- LAB: React Hooks
Working with Forms
Forms are essential to any app that allows you to manage data. You need to do more than just data binding. You
need validation, automatic formatting, response to data changes and so on. React gives you all the tools you need
to do this, but there are also some interesting libraries around that can save you a lot of work.
- What's in a Form?
- Value Binding to State
- Controlled vs Uncontrolled Components
- Sanitizing and Validating Input
- Using Libraries to Manage your Forms
- LAB: React Hook Forms
Talking to the Server
Single Page applications are great! But where do they get their data? In this module, we'll explore how you can
access a Back-end from React, and how to implement handy features like caching and lazy loading
- Fetch API
- When and Where to Fetch Data?
- Using the Effect Hook
- LAB: Talking To the Server
As your application becomes more complex, the need for organization and architecture grows. In this module, we'll
see some nifty ways to share and reuse state and logic between different components
- Working with Context and the UseContext Hook
- Rendering Dynamic Content with Render Props
- Higher Order Components
- LAB: Building a Higher Order Component
Instead of hopping from one page to the next, you can design your website as a Single Page Application. This makes
your website feel and perform more like an application. SPAs have many advantages but are usually difficult to
implement. In this module, we take a look at React Router, the library of choice for client-side routing in React,
and the features in React Router that make data loading during navigation simple and intuitive.
- Introducing React Router
- Paths and Parameters
- Nesting Routes
- Data APIs in React Router
- Lazy Loading
- Component Lifecycle
- LAB: Building a Single Page Application with React-Router
Internally, React uses several clever techniques to minimize the amount of work required to update the UI. For
many applications, using React will lead to a fast user interface without doing much work to specifically optimize
for performance. Nevertheless, there are several ways you can speed up your React application when needed.
- Virtual DOM
- Using Memoization and the Callback Hook
- Avoiding Computational Work
- Avoiding Re-rendering
As Single Page Applications gain more and more features, they need to handle more and more state. Using a state
management pattern can help us keep things neat and tidy.
- Externalizing State from Components
- Redux: the State Management Pattern of Champions
- Mobx: a Simpler, more Lightweight Alternative to Redux
This chapter will explore Redux. A data flow pattern for enterprise applications.
- What is Redux?
- Actors: Store, Actions, Reducers
- View and Hooks
- Asynchronous Actions
- LAB: State Management with Redux
Jest and React
Because people need to create unit tests when writing code, the React team has created a library that makes it
easier. Jest is a unit testing framework based on Jasmine. It allows for a couple of features that are very
- What is Jest?
- Creating Tests with Jest
- Asynchronous Methods
- Testing React components using Snapshots