Building Single Page Applications with React

The open-source React library from Facebook is becoming very popular. Not only is it used for the main Facebook website but lots of other major companies are adopting React. This class will introduce delegates to building web applications using React. Many developers think of React as just a View part of the Model View Controller pattern. With the proper understanding of React gained during this course you will understand its true powers.

The course doesn’t stop where React itself stops. It enables you to build rich Single Page Applications (SPA) using the popular React-Router library. You will also learn about architecting React applications using the Flux design pattern. We will do this using the popular Redux library.

Want to know more?

Would you like more information or a customized course for your company? Please contact me.

Target Audience

This course is intended for developers and architects who want to leverage React for their web applications.

Modules and topics

This three day course consists of 9 modules, each focussing on a specific topic. Each module consists of a lecture explaining the subject as well as a hands on lab where each participant uses the technology to build an application.

React introduction

React is a popular framework for creating browser based user interfaces. In this module you will learn how to get started with React. We will start with the basics of creating a React application and using the JSX syntax often used with React. Next you will learn different ways we can transpile our JSX code. You will use ECMAScript 2015 capabilities in the process. We will also take a closer look at the different ways of creating React components and their pros and cons. You will learn the different ways of working with properties, state and events. You will also learn how to work with raw DOM elements in the browser. Finally you will learn how to unit test your React components. After this module you will be able to start building React applications.

Tooling for Building React Applications

It is possible to write React applications without any extra tooling. This isn't common though. There is a rich ecosystem out there with tools to help you. With these developer tools you can write your application faster and more reliable. In this module you will learn how to configure an efficient tool chain for building React applications.It is possible to write React applications without any extra tooling. This isn't common though. There is a rich ecosystem out there with tools to help you. With these developer tools you can write your application faster and more reliable. In this module you will learn how to configure an efficient tool chain for building React applications.

The Flux Architecture

While React is a UI library that, unlike some other frameworks, allows for quite a bit of flexibility. To get the best results with React Facebook has added the Flux architecture. The Flux architecture helps developers using React. One of the important concepts of the Flux architecture is the Unidirectional Data Flow. In this module you will learn how to use the Unidirectional Data Flow principle. You will learn about Dispatchers, Actions and Stores to build your applications. We will take a look at some of the more popular Flux implementations and how to get started with them. After this module you will be able to architect more complex React applications.

Redux

Redux is the most popular state container for JavaScript applications. It is similar in architecture to Flux and serves the same purpose. These days Redux is the most popular Flux implementation. In this module you will learn how to build applications using Redux.

Data Entry Forms

There are few applications that do not need the user to enter data of some sort into the system. When building React components there are some choices on how to create data entry forms. In this module you will learn how to create data entry forms with React. You will learn how to validate data. Finally you will display validation messages when appropriate. In this module you will learn how to create excellent data entry forms.

Single Page Applications using React-Router

Single Page Applications (SPA) are popular these days and for a good reason. Often SPAs provide a much nicer experience for the end user. In this module you will learn how to get started with the React-Router library. Using this library you will turn your React applications into a SPA. We will also take a look at the pros and cons of single page applications. You will learn how to achieve the best result by using the Single Page Module or mini SPA pattern. After this module you will be able to build React Single Page Applications.

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

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.

Server-side Rendering

Rich JavaScript applications like React render the markup on the client. While this works just fine most of the time Rich Javascript applications execute in the browser on the client. While this works just fine most of the time 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.

Prerequisite experience

Six months of web development using HTML, ECMAScript 2015 and CSS.
Prior experience with React is not required.
A basic knowledge of using NPM packages is beneficial but not required.
A basic knowledge WebPack with Babel is also beneficial but not required.