0845 450 6120

React

The React course comprises sessions dealing with setting up for and creating a React app, JSX and element rendering, components and props,  state and lifecycle, event handling, lists and keys, forms, composition and inheritance, React Router, Flux, and Redux. React Native is not covered on this course.

Exercises and examples are used throughout the course to give practical hands-on experience with the techniques covered.

The delegate will learn and acquire skills as follows:

  • Setting up a React project
  • Coding ES6 arrow functions and classes
  • Using Node, webpack, and Babel
  • Creating a React app
  • Embedding JSX tags in JavaScript code
  • Creating and rendering components
  • Managing component props and state
  • Managing a component's lifecycle
  • Event handling
  • Creating and rendering lists of components
  • Creating and extracting information from a form within a component
  • Creating composite components
  • Using React Router to build an SPA
  • Using Flux to manage application state
  • Using Redux to manage application state

Who will the Course Benefit?

The React course is designed for JavaScript developers who are interested in using React to build fast, single page, client-side web  applications.

Learning Objectives

This course aims to provide the delegate with the knowledge to be able to build a Single Page Application (SPA) composed of React components and incorporating  React Router. The delegate will also be exposed to application state containers including Flux and Redux.

Pre-Requisites

Requirements

Delegates should be able to:

  • Build and style simple web pages using HTML & CSS
  • Build JavaScript applications that exploit all fundamental elements of the language including variables and expressions, conditions and loops, functions, objects,  arrays, the DOM, and event handling

This knowledge can be gained by attendance on the pre-requisite HTML & CSS  and JavaScript 1 courses.

Pre-Requisite Courses

  • HTML & CSS
  • JavaScript 1

Notes:

  • Course technical content is subject to change without notice.
  • Course content is structured as sessions, this does not strictly map to course timings. Concepts, content and practicals often span sessions.

Course Content

Course Contents - DAY 1

Course Introduction

  • Administration and Course Materials
  • Course Structure and Agenda
  • Delegate and Trainer Introductions

Session 1: INTRODUCTION

  • Understanding React
  • Introduction to Node
  • Introduction to webpack
  • Introduction to Babel
  • A Simple React App
  • Development vs. Production

Session 2: ES6 & ESNEXT

  • ES6, ES7, ESNEXT
  • Arrow Functions, Class Syntax, Template Strings
  • Destructuring
  • Default Parameters
  • Rest & Spread Operators
  • Let, Const & Var
  • Functional Programming in JavaScript
  • Modules, Promises, Generators

Session 3: JSX & ELEMENT RENDERING

  • What is JSX
  • React.createElement
  • Expressions and Attributes
  • Children
  • User Input
  • The React DOM
  • ReactDOM.render
  • Element Immutability
  • Conditional Rendering
  • Null Rendering

Session 4: COMPONENTS & PROPS

  • What is a Component
  • Functional vs. Class Components
  • Components and Tags
  • Component Extraction
  • Read Only Props
  • Pure Functions

Course Contents - DAY 2

Session 5: STATE & LIFECYCLE

  • State vs. Props
  • Setting and Updating State
  • Mounting and Unmounting
  • State Dos and Don'ts
  • Top Down Data Flow
  • Lifting State Up
  • Immutability

Session 6: EVENT HANDLING

  • Handler Assignment
  • preventDefault
  • Binding this

Session 7: LISTS & KEYS

  • Component Lists using map
  • Component Keys
  • IDs and Indexes
  • JSX Inline Mapping

Session 8: FORMS

  • Controlled Components
  • textarea and select
  • Multiple Inputs
  • Uncontrolled Components
  • Data from Forms
  • Data Sources
  • Sub-Components

Course Contents - DAY 3

Session 9: COMPOSITION & INHERITANCE

  • Composition vs. Inheritance
  • Containment
  • Specialisation

Session 10: REACT ROUTER

  • SPAs
  • Links and Routes
  • URL Parameters
  • Authentication

Session 11: FURTHER REACT

  • Testing React
  • React Performance
  • Refs & DOM
  • Context API

Session 12: REACT IN PRACTICE

  • Thinking in React
  • React Patterns, including
    • Stateless function
    • Array as children
    • Function as children
    • Render callback
    • Higher-order component
    • State hoisting

Course Contents - DAY 4

Session 13: FLUX

  • Introducing Flux
  • Flux Structure and Participants
  • Unidirectional Data Flow
  • Flux Principles
    • Actions
    • Dispatchers
    • Stores
    • Views

Session 14: INTRODUCING REDUX

  • Introducing Redux
  • Redux: Inspired by Flux
  • Principles of Redux
  • Structure and Data Flow
  • Redux Standalone

Session 15: REDUX & REACT

  • React Redux Examples
  • Redux Basics
    • Actions
    • Reducers
    • Store
    • Data Flow
  • React Redux Recipes

Session 16: FURTHER REDUX

  • Refactoring to Redux
  • Asynchronous Redux
    • Actions
  • Async Redux Flow
  • Redux Middleware
    • Thunk
  • Redux and Routing
  • Redux-Saga
One Month
Two Months
Three Months
More than Three Months
PRINCE2 Foundation & Practitioner
MSP Foundation & Practitioner
APMP Certificate
ITIL Foundation
Scrum in One Day
Certified ScrumMaster
ISTQB Software Test Foundation
Microsoft Project
BCS Business Analysis Practice
Other - Please Specify Below

Online Courses

You may prefer an online course if you are looking for a flexible and cost-effective solution. Online courses allow you to study at your own pace, at a time that suits you.

We have the following eLearning options available:

Our Customers Include