React fundamentals


React is a framework used to build responsive, reactive and engaging user interfaces. In this course we introduce the framework and cover all the main aspects of building web based interfaces that interact with a back-end API. Through practical examples and exercises, developers will become confident with React and how to use it effectively.

Duration: 4 days

Who is it for: This course is for developers who need to be able to use React to building web user interfaces.

Layout: This course is a mixture of lectures and hands on exercises designed to reinforce the topics learnt


  • Understand the principles of Single Page Applications (SPAs)
  • Functional Programming in practice
  • Components
  • REST
  • Forms
  • Routing
  • Testing
  • Hooks
  • Redux


What is ReactJS?

  • Single Page Applications
  • Node and node_modules
  • Transpiling

Modern Javascript

  • Arrow Functions
  • The Spread Operator
  • Destructuring
  • Imports and exports

Elements and JSX

  • The Virtual DOM
  • Basics of JSX

Introducing Components

  • What are components?
  • Creating components
  • Using components
  • Component properties
  • Component styling

Component Events and State

  • HTML events within components
  • Why state is needed
  • The useState hook

Sharing data between components

  • Passing stateful data to children
  • Changing part of a stateful variable
  • Changing a parent’s stateful data

Loops and conditional rendering

  • Working with arrays in JSX
  • Conditional Rendering


  • The React Developer Tools plugin
  • Debugging basics

Getting ready for REST

  • HTTP verbs and status codes
  • REST principles
  • REST api standards

Making REST calls

  • The fetch function
  • Working with promises
  • Axios
  • Error handling


  • Why we need state with forms
  • Creating forms
  • Form validation

Reducer functions

  • The useReducer hook

Building React applications

  • Building the application
  • Using Envrionment variables


  • The need for routing
  • Internal links
  • 404 pages
  • URL parameters
  • Query strings


  • Testing libraries in React
  • Creating test functions
  • Rendering components
  • Reading the screen
  • Finding elements
  • Assertions
  • User actions + changing state
  • Mocks

Global state

  • The useContext hook
  • Providing the context

Introduction to Redux

  • What is Redux?
  • Redux classic
  • Action creators
  • Thunks
  • Redux toolkit

React Hooks and performance optimization

  • The rules of hooks
  • How useState works
  • useRef
  • memo, useCallback and useMemo
  • useTransition
  • creating custom hooks

Course Contact Form

"*" indicates required fields

By submitting this form, you agree to our Privacy Policy.
This field is for validation purposes and should be left unchanged.