React and Redux

A great introduction into the ReactJS framework.

Overview

React.js is a 2nd generation web framework, created by Facebook to simplify the creation of complex browser based UI’s (aka. Single Page Applications). It offers a declarative, component based approach that enables the rapid creation of SPA’s without resorting to the custom attributes and dirty checking using by Angular 1.

The React component model can be implemented using ECMAScript 5, but is at its best when combined with the new class based syntax in ES2015. Until this becomes standard across browsers it is applied via the Babel transpiler and Webpack module builder. As React is solely a UI framework it needs to be combined with libraries for accessing remote services (such as Restful.js) and frameworks for managing application state (such as Redux and Flux).

This course introduces developers to all aspects of React.js development, including creating components, the Virtual DOM, JSX and state management. Options for configuring project setup for React/ES6 development are covered in depth. By the end of the course delegates will be able to build UI’s using React, test React components using Jest and Enzyme, interact with RESTful services and manipulate state predictably using Redux.

Outline

Introducing React.js

  • How Angular and React evolved from earlier frameworks
  • Overview of the React architecture and the Virtual DOM
  • The trade-offs between a Virtual DOM and dirty checking
  • Using the JSX syntax to create and intialise React Elements
  • Comparing coding in React to Angular 1 and Angular 2
  • Setting up a project for React development in WebStorm

Programming in ECMAScript 6

  • The let keyword and support for block scope
  • FP with Arrow Functions and the Lodash library
  • The class declaration syntax and inheritance
  • Destructuring items from arrays and objects
  • Making use of the map and set data structures
  • Enhancements to functions and creating generators
  • A standard model for proxies and promises
  • The for…of loop and spread operator

Getting Started with React

  • Creating basic components that use JSX
  • Using properties to pass data to components
  • Nesting and managing parent-child relationships
  • Transpiling both JSX and ES6 using Babel
  • Using Babel within Webpack via a loader
  • Configuring Webpack to hot swap your code
  • Adding Jest to unit test your components
  • Using snapshots for rapid unit test construction
  • Verifying component output with Enzyme

Building Single Page Web Applications

  • Using the lifecycle callbacks for React components
  • Persisting values using the state property
  • Designing hierarchies of components for complex UI’s
  • Using Restful.js to interact with RESTful servces
  • Modularising your design for unit and integration testing
  • Building and testing a complete SPA based Web App
  • Routing

Combining React.js with Redux

  • Problems when managing complex state in SPA’s
  • Using a framework to centralise and manage state
  • How Redux evolved from earlier libraries like Flux
  • Creating and using Stores, Actions and Reducers
  • Manipulating your data as a sequence of transitions
  • Asynchronous actions, thunks and Redux middleware
  • Adopting Redux Thunk as your default Redux middleware
  • Advantages of Redux Saga for more complex scenarios
  • Redux dev tools

Requirements

Delegates must be proficient JavaScript developers who have already developed Single Page Applications using frameworks like Dojo, jQuery and Angular.

Sign up and stay in the loop

Be the first to know about upcoming workshops, courses, talks and events

Learn more

Really enjoyed the course...slides and materials were great and it was always good to have the worked solution to fall back on. Good knowledgeable trainer.