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 App Structure
- What is JSX
- JSX Tips and Tricks
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
- 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
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
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.
- Ref Callback
- Property Types
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?
Jest and React
- What is Jest?
- Creating tests with Jest
- Asynchronous Methods
- Testing React components using snapshots
But there might be a better way: Facebook has re-envisioned the problem and React was born. React implements a one-way reactive data flow, which is more intuitive and avoids lots of boilerplate code.
In this 2-day training developers will learn how to use React and its component based development to create rich and dynamic websites.