Building user interfaces with React

Try for free!

Subscribe and stream all our courses
from just USD30.00 per month
Start my free trial

Building user interfaces with React

Become a full stack developer by adding React to your portfolio of skills

Contains around 8.5 hours of video - equivalent to a 2.5 day live training course

  • React is a modern and widely used javascript framework for building user interfaces. Full stack developers need to be able to work with at least one of these frameworks, and React is simpler and easier to learn than some of the alternatives (such as Angular)
  • We'll be covering functional React components, routing, Redux and integrating with a Spring Boot back-end.
Some basic HTML, CSS and simple Javascript will be useful for this course.

Contents

Having problems? check the errata

Introduction

What is React? 9m 24s Watch

Getting started with React

Setting up our first React application 5m 44s Watch
The React file structure 4m 45s Watch
Transpiling and running a React application 6m 11s Watch
Setting up a development environment 4m 25s Watch
Working with git 2m 32s Watch
How the React files fit together 3m 20s Watch

From Java to Javascript

The functional programming concept 9m 1s Watch
Variables 6m 46s Watch
Objects and object equality 8m 27s Watch
Strings and arrays 11m 46s Watch
Functions and the for loop 7m 44s Watch
Imports, exports and access modifiers 8m 27s Watch

Elements and JSX

The virtual DOM 4m 9s Watch
Creating elements 12m 4s Watch
JSX 9m 1s Watch
Javascript expressions, variables and attributes in JSX 5m 54s Watch

Introducing components

Creating components 6m 17s Watch
Using components 2m 44s Watch
Component properties 3m 22s Watch
Component styling 3m 27s Watch
Reusing components 1m 55s Watch
Components exercise 4m 42s Watch
Class based components 2m 11s Watch

Component events and state

Binding functions to component events 8m 26s Watch
The need for state 6m 21s Watch
Creating stateful variables 8m 49s Watch
Stateful variables exercise 6m 36s Watch

Communicating between components part 1

Passing stateful variables to a child component 6m 57s Watch
Changing a stateful variable from the child component 6m 32s Watch
Component communication best practice 1m 38s Watch

Loops and conditions

Rendering arrays of objects 13m 43s Watch
Conditional rendering 8m 7s Watch

Practice exercise 1

Challenge 2m 23s Watch
Solution walkthrough 11m 18s Watch

Debugging

The React developer tools plugin 2m 4s Watch
Breakpoints 3m 9s Watch

Making REST requests

The fetch function 13m 59s Watch
The response object 3m 6s Watch
Cross origin requests 6m 16s Watch
Creating a good user experience 8m 19s Watch
The useEffect hook 5m 11s Watch
Axios 4m 46s Watch
Handling errors 5m 13s Watch

Practice exercise 2

Challenge 4m 0s Watch
Solution walkthrough 20m 16s Watch

Working with forms

The need for state 6m 11s Watch
Preventing form submission 2m 33s Watch
Form validation 6m 0s Watch
Working with references 5m 7s Watch

Communicating between components part 2

State triangles 2m 30s Watch
Passing state 13m 57s Watch
Storing global variables with context 13m 49s Watch

Reducer functions

Manging more complex state with a reducer function 22m 8s Watch

React hooks

useEffect 6m 48s Watch
useMemo 15m 57s Watch
useCallback 5m 46s Watch

Routing

The need for routing 4m 17s Watch
How routing works in React 10m 24s Watch
Implementing 404 page not found 2m 24s Watch
Implementing parameters and query strings 27m 29s Watch

Testing

Reading the screen and assertions 12m 3s Watch
Testing exercise 5m 43s Watch
Simulating user interaction and working with promises 4m 20s Watch
Testing asynchronous events 6m 49s Watch
Mocking 5m 18s Watch

Getting started with Redux

What is redux 3m 42s Watch
Creating a store 9m 10s Watch
Reading and writing state 13m 13s Watch
Redux exercise 5m 0s Watch

Deployment

Deploying a React application 4m 56s Watch
Copyright ©2024 VirtualPairProgrammers.com