React

This 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 to give practical hands-on experience with the techniques covered.

More details

More info

This course is aimed at:

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.

You will need:

  • to know how to build and style simple web pages using HTML & CSS
  • to know how to 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

You will learn:

  • 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

Course Content:

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

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

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

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

£ 1,850.00 ex.vat

Data sheet

Course Duration 4 Days
Location London