Developing web apps with React

Introducting React

Web applications nowadays are built with the help of Databinding. We'll start by talking about the problems posed in a world without Databinding. The solution to these problems can be found in libraries and frameworks such as React. This module explores a short summary of features you find in React, and what we can do with it.

• The Evolution of Web Development
• Components Everywhere
• Combining React with other Libraries
• React Tooling

React Fundamentals

First of all, we'll get started by looking at how a React application is structured, and what it does. Then we'll learn about JSX. JSX is an optional syntax created by the people behind React. This module talks about the how, which and when of expressions in a React application, as well as introducing the concept of Components. We'll explore how html tags and components are combined and how a JavaScript expression gets evaluated.

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

• Components are State Machines
• How does Component State work
• Props and Data Flow
• Smart and Dumb Components
• LAB: State and Props

Hooks

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, respond 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 are refs and How do I use them Correctly?
• 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

Component Composition

As components become more complex, the need to organize them grows. In this module, we'll see some nifty ways to share and reuse state and logic between different components

• props.children
• Working with Context and the UseContext Hook
• Rendering Dynamic Content with Render Props
• Higher Order Components
• LAB: Building a Higher Order Component

Routing

Building a Single Page Application with React is not that hard. It all comes down to switching one component for another when navigation in the application happens. Navigation in a SPA is of course different than when we have multiple pages. In this chapter we'll look at React Router, which will make sure that navigation is automatically bound to components.

• Introducing React Router
• Paths and Parameters
• Nesting Routes
• Lazy Loading
• Component Lifecycle
• LAB: Building a Single Page Application with React-Router

Performance

Internally, React uses several clever techniques to minimize the number of costly DOM operations 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.

• Virtual DOM
• Using Memoization and the Callback Hook
• Avoiding Computational Work
• Avoiding Re-rendering
• Pitfalls

State Management

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

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
• Tools
• 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 test framework, based on Jasmine. It allows for a couple of features that are very welcome to the JavaScript unit testing world.

• What is Jest?
• Creating Tests with Jest
• Asynchronous Methods
• Mocking
• Testing React components using Snapshots