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.
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
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 and local state management via Hooks.
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
- HTML5 & CSS3 with JavaScript
- JavaScript 2
- PHP Programming
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.
React Training Course
Course Contents - DAY 1
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
Course Contents - DAY 2
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
Course Contents - DAY 3
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
Course Contents - DAY 4
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
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.
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
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 and local state management via Hooks.
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
- HTML5 & CSS3 with JavaScript
- JavaScript 2
- PHP Programming
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.
React Training Course
Course Contents - DAY 1
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
Course Contents - DAY 2
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
Course Contents - DAY 3
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
Course Contents - DAY 4
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