React

Course Code: REACT

Duration: 4 days

 
 

React Course Overview

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, hooks, 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.

Course 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 and local state management via Hooks.

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.

Skills Gained

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 local state using Hooks as an alternative to classes
  • 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

React Training Course

Course Introduction

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

Session 1: INTRODUCTION

  • Understanding React
  • Using Babel
  • Create-React-App
  • Setup & Project Structure

Session 2: MODERN JAVASCRIPT

  • Single Page Applications
  • Transpilers & Polyfills
  • ES6 Features
  • Primitive & Reference Types
  • Template Literals
  • Destructuring
  • Let, Const & Var
  • Arrow Functions
  • Understanding Classes
  • Decorators
  • Spread and Rest Operators
  • Default Parameters and Values
  • Exports and Imports
  • Modules
  • Array Functions
  • Promises
  • Generator Functions
  • Sets and Maps
  • Functional JavaScript
  • Typescript

Session 3: JSX & ELEMENT RENDERING

  • Virtual DOM
  • JSX
  • Lists and Keys

Session 4: COMPONENTS & PROPS

  • What is a Component
  • Functional vs. Class Components
  • React Props
  • State in Brief
  • Typechecking
  • Composition & Inheritance

React Training Course

Session 5: STATE & LIFECYCLE

  • State vs. Props
  • Adding State
  • Lifting State Up
  • Component Lifecycle
  • Component Lifecycle Methods
  • Immutability

Session 6: EVENT HANDLING

  • Handler Assignment
  • Binding to this
  • Passing Arguments to Event Handlers
  • Custom Components & Events
  • Synthetic Event

Session 7: FORMS

  • Controlled Components
  • Uncontrolled Components
  • Using Refs
  • Forms JSX Summary
  • Validation
  • Form Libraries

Session 8: REACT ROUTER

  • Using react-router
  • Core Components

React Training Course

Session 9: HOOKS

  • Motivation: Stateful Logic Re-Use
  • Functional Vs Class Components Refactored
  • Local State Without A Class: Internals
  • Standard Hooks
  • Custom Hooks: The Anticipated Future
  • The (Only) Rules of Hooks

Session 10: FURTHER REACT

  • Testing React
  • React Performance
  • Production Build/Deploy
  • Refs & DOM
  • React Patterns
  • Authentication
  • JSON Web Token
  • Third Party Components

React Training Course

Session 11: FLUX

  • Flux vs MVC
  • Flux Main Components
  • Flux Flow in Action
  • Flux Utils
  • Flux Implementations

Session 12: INTRODUCING REDUX

  • Redux: Inspired by Flux
  • Core Redux: Actions, Action Creators, Reducers, Store
  • Redux Data Flow

Session 13: REDUX & REACT

  • Introduction and Setup Environment
  • Components of React Redux
  • React Data Flow
  • Redux Recipes
  • Redux DevTools

Session 14: FURTHER REDUX

  • Middleware
  • Redux Thunk
  • Redux Saga
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.

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

Course Reviews

This is the 2nd course that I have attended with Stuart and they have both been excellent His friendly relaxed delivery style with a focus on learning through coding (whether with him or independently has been excellent. He was always happy to go back over topics that any candidates didn't not understand. Overall highly recommended.

Carl - Senior Developer - September 2021


Stuart proved to be very knowledgeable in the subject area. He was able to create a valid case study, taking the students through all the required steps whilst providing masses of detail. I really enjoyed this course and was very happy with Stuart's teaching style and the openness and helpfulness he displayed in answering questions posed to him. Excellent Stuff!! Many thanks to Stuart.

Derek - Technical Architect - September 2021


Excellent course, very well delivered. Thanks Stuart!

Leon - November 2020


Stuart was charming and engaging once again. Looking forward to my next course with him.

Michael - Web Developer - November 2020


Very good react course taught very well by Stuart. The course material and work being taught was very relevant to myself as I am currently using react in production code. Would definitely recommend as Stuart is very knowledgeable and able to expand on topics when asked in more detail.

Craig - Senior Software Engineer


Another great course, massively improved my knowledge on React from this.

Edward - Software Developer


Public Scheduled Events

Classroom & Live Virtual Instructor-Led Training

Duration: 4 days

Price: £1,900.00 exc. VAT 


Start Date Options Spaces  
07 Dec 2021
StayAhead Virtual Courses available 
Spaces Book Now 
11 Jan 2022
StayAhead Virtual Courses available 
Spaces Book Now 
28 Mar 2022
StayAhead Virtual Courses available 
Spaces Book Now 
24 May 2022
StayAhead Virtual Courses available 
Spaces Book Now 
01 Aug 2022
StayAhead Virtual Courses available 
Spaces Book Now 
04 Oct 2022
StayAhead Virtual Courses available 
Spaces Book Now 
 

Live Virtual Classroom

 
Join live instructor-led classroom training from the comfort of your home or office.
All the convenience and benefits of the classroom experience without the hassle and costs of travel and accommodation.
 
 



Our Customers Include

 
missing image
missing image
missing image
missing image
missing image
missing image
missing image
missing image
missing image
missing image
missing image
missing image
missing image
missing image
missing image
missing image
missing image
missing image
missing image
missing image
missing image
missing image
missing image
missing image
 
 



Our Course Curriculum

 
 
 
 
Facebook LinkedIn Twitter Instagram E-Mail
 
+44 (0)20 7600 6116
Enquiries@StayAhead.com
Copyright © 2021 StayAhead Training Ltd
Cookies   /   Privacy Policy