Black belt React development

Invalid data source. Please correct the following errors:
  • The data source tag/idis missing or it is invalid

Course overview:

This course is for experienced React developers wanting to become even more proficient. You will build upon your existing React knowledge. After this course you will build even better components and applications.

Duration: 2 days

Learning objectives:

  • Learn how to create even better React components.
  • Use Storybook to build and test your components in isolation.
  • Understand the pros and cons of different ways to handle cross cutting concerns like Context, higher order components or render props.
  • Add proper error boundaries to your React application.
  • Find and fix performance problems in a React application using Chrome browser tooling, Profile, PureComponents, getDerivedStateFromProps and memoization.
  • Enable pre-rendering or server-side rendering of your React application.

Prerequisites:

Six months of web development using React.

A basic knowledge of using NPM packages.

A basic knowledge of WebPack with Babel.

Modules: 

  1. Building Better React Components

There are many best practices for building React components. You can build applications without following these best practices if you want. Yet you will find that you are a lot more effective if you do follow some proven design principles. In this module you will learn how to build better React components. These components are easier to test and more reliable. You will also learn about some of the more specialized React component classes such as Fragment and StrictMode. 

  1. Unit Testing

Most developers write unit tests for their code. With React that means writing unit tests for the React components you are writing. In this module you will learn how to use Jest to write good and maintainable unit tests. You will use Airbnb’s Enzyme to help create better unit tests. You will also learn how to use snapshot testing effectively. 

  1. Dealing with cross cutting concerns

Every application or library has to deal with cross-cutting concerns. In this module you will learn how to deal with these cross-cutting concerns. You will learn how to use various techniques such as Higher Order Components and Render Props. These provide extra functionality or data to other components. You will also learn how to share functionality throughout the component tree using the React Context API. Finally, you will learn how to do proper error handling in your application using React error boundaries. 

  1. Performance tuning of React applications

Even though React is really fast it’s still possible to run into performance issues. In this module you will learn how to track these down using the Chrome profiler, Profile components and various other tools. Then you will learn various techniques to fix performance problems such as using PureComponents, getDerivedStateFromProps or memoization. We will also take a look at specialized components libraries such as react-virtualized. 

  1. Using Storybook to develop components

Developing and testing individual components as part of a larger application can be tedious. Often you need to take extra steps to get the component into a specific state. In this module you will learn how to leverage Storybook to make component development easier. When done properly this makes the whole feedback cycle much shorter resulting in better and faster development. 

  1. Server-side Rendering

Rich JavaScript applications like React render the markup on the client. While this works fine most of the time Rich JavaScript applications execute in the browser on the client. Often this is fine but there are cases when this is not optimal. One of these is search engine optimization (SEO) where another program parses the markup returned. In this case of SEO the JavaScript is usually not executed. The SEO program will thus not find any content in your web site to index reducing your Google ratings. A second issue with client-side rendering is that the markup can only display after the execution. This means a user sees nothing before execution finishes. Using server side rendering you can render the initial markup on the server. Sending this markup to the client results in actual meaningful content delivered. This is beneficial regardless if the client is a search engine or an actual user with a browser. In this module you will learn how to configure server-side rendering.