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

Objectives

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

Modules

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

Debugging

• 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

Forms

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

Reducer functions

• The useReducer hook

Building React applications

• Building the application
• Using Envrionment variables

Routing

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

Testing

• 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