Call Us: +32 2 466 00 16
Email: info@u2u.be
Follow Us:

Developing web apps with React

2days
Training code
UREACT
Book this course

What is React

Web applications are built these days 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.

  • MVVM
  • Components
  • Extras...

Structuring Applications towards Components

When you try to create a new web application in a component based architecture, there are a few steps that can help you. In this module we'll explore these steps so we can turn the raw html design into an application of components.

  • The React way of thinking

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.

  • What is JSX and why should I use it?
  • Parsers or Transpilers
  • HTML Tags vs React Components
  • Creating Components
  • JavaScript Expressions

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
  • Interactivity
  • How does component state work
  • Multiple (child) components
  • Transferring Props
  • Form Components
  • Component Lifecycle

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 module we'll look at React Router, which will make sure that navigation is automatically bound to components.

  • What is React Router?
  • Route Configuration
  • Route Matching
  • Advanced Usage

React Internals

React has a couple of tricks up its sleeve to make sure applications can be created in the way they do. The Virtual DOM is a major part of how React tries to render html. It is an in-memory representation which is then used to compare with potential changes when the state gets updated. There are a couple of best practices we can do to speed this comparison process up, so we'll also have a look at the shouldComponentUpdate lifecycle hook and immutability.

  • Refs
  • Ref Callback
  • Virtual DOM
  • Advanced Performance

Addons

The people at React have created some addons that can be used for often used concepts. For example: the animation addon allows for animations when showing and hiding new elements. We'll look at some addons that are useful from time to time.

  • Animation
  • Keyed Fragments
  • PureComponent
  • Property Types

Flux

Flux is a data flow pattern invented by the team at Facebook. It is a way of solving an old problem they had with the inbox notifications. Flux allows for a clearer and nicer way of showing how data flows through an application and can solve issues when the flow is a bit obscured.

  • What is Flux?
  • Action
  • Dispatcher
  • Store
  • View

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

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
  • CommonJS?
  • Mocking

Many javascript frameworks have tried to solve the problem of synchronizing data with a highly interactive UI. The two-way binding approach has sailed well with Angular JS (1.6), Knockout, Backbone, ... 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.

This course targets professional web developers who are familiar with JavaScript (ES5, ES2015+) and HTML and are looking for ways to improve their productivity with React. The main focus is getting started in the React world with the help of a step by step introduction to the framework.

© 2018 U2U All rights reserved.