Interactive React for the Web

Course details

React has been a cornerstone of the web for many years, and remains one of the most-used JavaScript frameworks. In this course, learn how to think about applications using components, the fundamental building block of a React project. Over several small projects, instructor Joe Chellman shows you how to manage the interactive data in each one, and use code to declare how pieces should change in response to one another. Learning React opens doors to many opportunities, whether one ends up actually using it on projects themselves or not.

Learning objectives
Create highly interactive pieces of larger website projects using React.
Join a team working on a larger React project and get up and going more quickly.
Conceptualize an interactive project in a component-oriented fashion.

Concepts

0. Introduction

01 - React is powerful and popular
02 - How to use the exercise files on GitHub Codespaces

1. What Is React

03 - Introducing React - What is it, and what is it good for
04 - The React tool box - Modern JavaScript and more
05 - Important React terminology
06 - The Pieces - Data, components, and elements
07 - Our build process on Codespaces
08 - How CSS can be used in React
09 - Installing and using React Developer Tools

2. First Project - Product Customizer

10 - Installing React using script tags
11 - Adding in JSX for simpler code
12 - Identifying components and data
13 - Create a new component and array of data
14 - Introducing props to pass along data
15 - Introducing the useState hook to manage local data
16 - Adding a color selector
17 - Implementing an event handler to update state
18 - Solution - Activate color selector

3. Second Project - Directory Browser

19 - Making decisions based on the mock-up
20 - Understanding the initial code and scaffolding components
21 - Adding components to display our people data source
22 - Creating a filters form
23 - Deciding whether to make forms controlled
24 - Making the filter form update state
25 - Collapsing form state into a single object
26 - Updating directory results based on active filters
27 - Using animation to enhance visual feedback
28 - Solution - Make the form better and animate more

4. Third Project - Publishing Status Updates

29 - Consuming live data using a REST API
30 - Inspecting the starting code
31 - Making our first API call in a useEffect hook
32 - Providing feedback via conditional rendering
33 - Wiring up the status form to post an update
34 - Posting a new message to the API
35 - Lifting state to make data usable throughout the app
36 - Update the message list from local state after posting
37 - Breaking a large file into separate components
38 - Solution - Make the date and time editable

Conclusion

39 - Next steps