0345 4506120

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

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

 

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