Developing web apps with React

What is 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.

• The Evolution of Web Development
• Components Everywhere
• The React Tooling Kit

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. It is optional, but recommended nonetheless. This module talks about the how, which and when of expressions in a React application. We'll explore what Babel does, how html tags and components are combined and how a JavaScript expression gets evaluated.

• React App Structure
• What is JSX
• JavaScript Expressions
• JSX Tips and Tricks

Components

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
• Interactivity
• Multiple (child) components
• Transferring Props
• Form Components

Component Lifecycle and Performance

React gives us hooks to execute code at different points in the component lifecycle. A lot of performance gains can be made by using lifecycle hooks to your advantage, and in this chapter, you'll learn all about it.

• Component Lifecycle
• Lifecycle Methods
• Loading Data into a component
• React's Virtual DOM
• Tweaking Performance
• Using PureComponent for extra performance gains

Structuring a React Application

How do you structure your application so it fits the React way of thinking?

• Create a design
• Make components for every part
• Fill up the design with a static version
• Add interaction to your application

React In-Depth

React has a couple of tricks up its sleeve to make sure applications can be created in the way they do. In this chapter we'll look at some things that can make your life as a developer a lot easier.

• Refs
• Ref Callback
• Property Types

Component Composition

In React we'll use components for everything. Sometimes components need to be adding functionality or state to child components while simultaneously hiding this from the developer using the component. Here we'll look at how we can accomplish this.

• Imperative vs Declarative in React
• Compound Components with cloneElement
• Compound Components with Context
• Higher Order Components
• Render Props
• Controlled Components

SPA with React

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.

• Towards Single Page Applications
• Introducing React Router
• Nested Routes
• Advanced Usage

Redux

Flux is a great solution. However, for developers it had a couple of issues. This chapter will explore what these issues are and shows Redux. A data flow pattern based on Flux that goes a couple of steps beyond.

• What is Redux?
• Actors
• Tools

Asynchronous Actions with Redux

In most cases a Single Page Application only becomes interesting when you start adding some api calls. When you're using Redux, it's not always clear where to add these calls. Asynchronous actions can provide us exactly with this kind of functionality.

• Asynchronous Actions
• Middleware

Redux and React-Router

Combining Redux with a Routing framework can provide nice results, for predictability and replay options for a developer. We'll look at how to combine the most used Routing library, React-Router, with Redux.

• Refreshing React-Router
• How to use React-Router in combination 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

React Native

Building Mobile Apps for Android and iOS can be done with the help of React Native. This platform will translate your javascript application so you can deploy it on both platforms. The major benefit being a shared codebase for those platforms.

• What is React Native?
• How do I use it?