React

React capability for experienced developers

The React course is ideal if you’re a JavaScript developer who wants to progress from writing standalone scripts to building structured, maintainable front-end applications. You will learn how React supports reusable interface design, controlled data handling, routing and application state management. Through practical exercises, the course helps you apply these techniques to real development scenarios, improving your ability to build responsive user interfaces and contribute effectively within front-end or full-stack 

Learning objectives:
  • Set up React project structures  
  • Apply JavaScript features in React  
  • Build reusable interface components  
  • Control data between components  
  • Develop interactive forms  
  • Configure user navigation  
  • Use Hooks to manage logic  
  • Apply Flux and Redux principles 

Key facts

Certification

This course includes a certificate of completion. 

Who it’s for

This course is suitable for developers who want to build fast, interactive web applications using React. 

Prerequisites

You should be confident with HTML, CSS and JavaScript fundamentals, including functions, arrays, objects and the DOM. 

Exam information

This course does not include an exam. 

Optional extras

This course includes hands-on labs and access to learning materials for continued practice. 

Pre-course

No preparation work is required for this course. 

Course syllabus

Dive into the detail of the course by looking at the syllabus below. 

Day one
  • Session 1: Introduction
    • Understanding React
    • Using Babel
    • Create-React-App
    • Setup & project structure
Day one
  • 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
Day one
  • Session 3: JSX & Element Rendering
    • Virtual DOM
    • JSX
    • Lists and Keys
Day one
  • Session 4: Components & Props
    • What is a Component
    • Functional vs. Class Components
    • React Props
    • State in Brief
    • Typechecking
    • Composition & Inheritance
Day two
  • Session 5: State & Lifecycle
    • State vs. Props
    • Adding State
    • Lifting State Up
    • Component Lifecycle
    • Component Lifecycle Methods
    • Immutability
Day two
  • Session 6: Event Handling
    • Handler Assignment
    • Binding to this
    • Passing Arguments to Event Handlers
    • Custom Components & Events
    • Synthetic Event
Day two
  • Session 7: Forms
    • Controlled Components
    • Uncontrolled Components
    • Using Refs
    • Forms JSX Summary
    • Validation
    • Form Libraries
Day two
  • Session 8: React Router
    • Using react-router
    • Core Components
Day three
  • 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
Day three
  • Session 10: Further React
    • Testing React
    • React Performance
    • Production Build/Deploy
    • Refs & DOM
    • React Patterns
    • Authentication
    • JSON Web Token
    • Third Party Components
Day four
  • Session 11: Flux
    • Flux vs MVC
    • Flux Main Components
    • Flux Flow in Action
    • Flux Utils
    • Flux Implementations
Day four
  • Session 12: Introducing Redux
    • Redux: Inspired by Flux
    • Core Redux: Actions, Action Creators, Reducers, Store
    • Redux Data Flow
Day four
  • Session 13: Redux & React
    • Introduction and Setup Environment
    • Components of React Redux
    • React Data Flow
    • Redux Recipes
    • Redux DevTools
Day four
  • Session 14: Further Redux
    • Middleware
    • Redux Thunk
    • Redux Saga

FAQs

This four-day live virtual classroom React course helps JavaScript developers build the skills needed to create structured, maintainable front-end applications. You will work through practical React techniques, including component design, data handling, routing, forms, Hooks, Flux and Redux, with a focus on improving how you develop, adapt and support application interfaces. 

Is the React course right for me?

This course is designed for developers with JavaScript experience who want to build web applications using React. It is particularly relevant if you work in front-end or full-stack development and need to create interfaces that are easier to maintain, adapt and support. You should already be confident with HTML, CSS and JavaScript fundamentals before attending. 

What practical skills will I develop?

You’ll practice setting up React projects, creating reusable components, managing data through props and state, handling forms, configuring routing and working with Hooks, Flux and Redux. The focus is on applying these techniques in a way that supports clearer code structure, more reliable user interactions and better control over application behaviour. 

How will this course help my development work?

The course is built around practical coding exercises, enabling you to connect React concepts to everyday development tasks. You will learn how to structure interfaces, manage changing data and handle application behaviour more predictably. This can help you work more confidently on React projects and contribute more effectively within development teams. 

Do I need strong JavaScript knowledge first?

Yes. You should be comfortable with HTML, CSS and JavaScript fundamentals, including functions, arrays, objects and the DOM. The course includes modern JavaScript topics such as ES6 features, modules and arrow functions, but it is not intended as an introduction to programming or web development basics. 

How could this course benefit software testers?

Software testers who work with modern web applications can benefit from understanding how React interfaces are structured, updated and maintained. This course can help testers interpret front-end behaviour more confidently, discuss issues with developers in greater detail and strengthen their technical awareness of JavaScript-based application delivery. 

Why study with TSG?
25+ years' experience

Trusted by individuals, businesses and public sector organisations for over 25 years.

20,000+ learners trained

Join a network of learners focused on developing their software testing skills 

98% customer satisfaction

TSG trainers are frequently rated as ‘good’ or ‘excellent’ by our learners

We're here to help
Speak to our learning experts

Not sure which course or study option is right for you? Get in touch with our team of advisors for personalised guidance and support throughout your learning journey.

Business transformation
Looking to develop your business or team?

Need to upskill your team? Our bespoke development solutions are designed to enhance team performance, retain talent, and drive organisational excellence. One of our development consultants would love to chat.

Quote request

Please complete the form to ensure your quote is accurate and we will contact you soon.

Page {{ step }} of 2

Back Next