Try for free!
Subscribe and stream all our courses
from just USD19.00 per month
Start my free trial
from just USD19.00 per month
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.
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 | |