React
Course Outline
 
 


React Course Overview

Course Code: REACT

Duration: 4 days

S5

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

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.

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

Follow-On Courses

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 Contents

React Training Course

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

React Training Course

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

React Training Course

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

React Training Course

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
 


React

Duration: 4 days

RRP: £1,900.00 exc. VAT 


Upcoming Scheduled Events
Next 6 months

London
Start Date   Spaces Book
07 Jan 2019   Spaces StayAhead - Course Running Book
 
11 Mar 2019   Spaces StayAhead - Course Running Book
 
07 May 2019   Spaces StayAhead - Course Running Book
 
Virtual Events StayAhead Virtual Courses available You can attend your training virtually using the London dates shown above. Please contact us for more details on our Virtual training options or to discuss specific Virtual course dates to meet your requirements.
 

Course Reviews

It was a wonderful experience, I would definitely recommend taking this course for everyone. The instructor was lovely and helpful. I learned a lot in a very short time. Thank you

Sarah Ali - Software Engineer - September 2018


The trainer was very approachable and his explanations were clear and concise. The course was structured well giving us a couple of days to understand pure REACT before expanding with other libraries & frameworks.

Dean - Front End Web Developer - Finance - May 2018


 
 
 
Quick Search....
Home Let Us Call You Enquiry
 

 

Course Deliveries

Public Scheduled and Closed
Virtual
UK and Overseas

OUG

Oracle User Group - Membership Benefits

OUG

Certification

Our independent Oracle, Solaris & Red Hat Linux curriculums helps prepare delegates for official certification.

StayAhead
Flexibility

Cannot see a sutiable date?
Please call us and we will try an accommodateyour needs!




Our Course Curriculum

 
 
 
 
 



Our Ratings

Instructor
Quality
 

97.46%

Course
Practical
 

92.54%

Overall
Courseware
 

94.43%

Overall
Course
 

96.4%

+44 (0)20 7600 6116
Copyright © 2018 StayAhead Training Ltd
Cookies   /   Privacy Policy
sales@stayahead.com