React fundamentals

Contact Us for Dates
4 days practical workshop for up to 12 people.

Contact us for Onsite Price

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.

Layout

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

Training Course Objectives

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

Who it is for

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

Training Course Prerequisites

  • Familiarity with HTML, CSS and JavaScript programming

Chapters

Chapter 1 What is ReactJS?

  • Single Page Applications
  • Node and node_modules
  • Transpiling

Chapter 2 Modern Javascript

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

Chapter 3 Elements and JSX

  • The Virtual DOM
  • Basics of JSX

Chapter 4 Introducing Components

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

Chapter 5 Component Events and State

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

Chapter 6 Sharing data between components

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

Chapter 7 Loops and conditional rendering

  • Working with arrays in JSX
  • Conditional Rendering

Chapter 8 Debugging

  • The React Developer Tools plugin
  • Debugging basics

Chapter 9 Getting ready for REST

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

Chapter 10 Making REST calls

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

Chapter 11 Forms

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

Chapter 12 Reducer functions

  • The useReducer hook

Chapter 13 Building React applications

  • Building the application
  • Using Envrionment variables

Chapter 14 Routing

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

Chapter 15 Testing

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

Chapter 16 Global state

  • The useContext hook
  • Providing the context

Chapter 17 Introduction to Redux

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

Chapter 18 React Hooks and performance optimization

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