25,000+ Courses Nationwide
0203 908 2376

Building Web Applications with React and Redux

React is an open-source JavaScript library from Facebook used for building HTML5 web applications. In this training course, you learn how to develop a complete application by building high-performance User Interfaces (UIs) with JSX components targeting a virtual DOM, and creating Flux applications, which provide complementary architectural patterns to construct client-side application functionality. 

Key Features of this React and Redux Training:

  • After-course instructor coaching benefit
  • End-of-course exam included

Select specific date to see price, venue and full details.

Learning Objectives

  • Create an isomorphic web application using Facebook React and Redux
  • Compose a UI using React JavaScript and JSX components
  • Integrate React forms with Ajax and back-end REST services
  • Apply the Container/Presentational architecture to create applications
  • Integrate a variety of React extensions to create a modern application

Pre-Requisites

Experience developing web pages with JavaScript, HTML, and CSS at the level of:

  • JavaScript for Modern Web Development course

Course Content

Introduction and Overview

  • Features of React and Redux
  • Why the Virtual DOM makes React run fast
  • Configuring the development and build environment
  • Incorporating third-party components

Designing Custom React Components

Displaying React content
  • Employing React.createElement() and React.DOM.render()
  • Support well-designed components by leveraging imports
  • Dynamically generating the UI
Leveraging JSX for UI design
  • Coding custom component classes
  • Generating component output with the render method
  • Composing a JSX component hierarchy
  • Extending the hierarchy with the Container/Presentational design pattern
  • Understanding the differences between JSX and HTML

Activating React Components

Parameterizing components
  • Disambiguating component properties and state
  • Leveraging the children props to pass content dynamically
  • Inserting properties into rendered output with this.props
  • Improving maintainability and reliability with defaultProps and proptTypes
  • Centralising logic at the container level by passing functions as props
  • Integrating stateless functional components
Manipulating component state
  • Separating component state from component behaviour
  • Reading application data with this.state
  • Mutating data with this.setState()
  • Efficiently managing state to improve performance
  • Best practises for sharing state with createContext
Integrating into the component life cycle
  • Attaching and detaching logic and event handlers in componentDidMount and componentWillUnmount
  • Enhancing performance with componentShouldUpdate
Routing between components
  • Exploiting the react-router for semantic URLs
  • Mapping URL paths and parameters to components

Developing React Forms

Manipulating form input components
  • Working with interactive properties
  • Capturing form component updates with onChange
  • Exploiting controlled components
Implementing two-way binding
  • Applying the onChange / setState() convention
  • Reducing onChange clutter for clearner code

Centralising State with Redux

Modelling client-side data interactivity
  • Architecting loosely-coupled applications for extensibility
  • Managing state centrally
  • Interacting with data using actions, reducers, and stores
  • Defining reducers to correctly manage updates, deletes, and inserts
Coding a Redux application
  • Best practises when implementing Redux
  • Creating a Redux data store
  • Using the React-Redux Higher-Order Components
  • Sharing state between containers and presentational components
  • Integrating multiple stores/reducers in large applications to avoid complexity
  • Reviewing alternatives: Mbox, alt, Relay, Flux, and Reflux
Connecting React to RESTful services
  • Making Ajax calls from React using thunk and promises
  • Integrating isomorphic-fetch to support client and server-side access
  • Mapping CRUD access to REST actions
  • Reviewing alternatives

Analysing React Applications

Developer tools
  • Inspecting React components with browser extensions
  • Identifying and debugging rendering errors
Unit testing
  • Running tests with Jest
  • Isolating code under test with Enzyme
Performance testing
  • Establishing a baseline
  • Analysing performance with Flamegraphs
  • Optimising component reconciliation with key

Advanced Features

  • Building components with Hooks, useState, and useEffect
  • Extending your components with Higher Order Components

Related Courses

Privacy Notice

In order to provide you with the service requested we will need to retain and use your contact information in accordance with our Privacy Notice. If you choose to provide us with this information you explicitly consent to us using the information as necessary to provide the requested service to you. If you do not agree please do not proceed to request the service from us.

Marketing Permissions

Would you like to receive our newsletter and other information on products and services which we think will be of interest to you by email. We will always treat your information with care and in accordance with our Privacy Notice. You are free to withdraw this permission at any time.

 

We work with the best