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 Maurice at Maurice@TheProblemSolver.nl.
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 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.
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.
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.
- 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.