Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

Interactive React for the Web

via LinkedIn Learning

Write review

Details

Provider

LinkedIn Learning
Pricing

Free Trial Available
Languages

English
Certificate

Certificate Available
Effort

2 hours 53 minutes
Sessions

Self-Paced
Level

Beginner

Found in

DataCamp

Power BI Fundamentals - Create visualizations and dashboards from scratch

Coursera

AI, Data Science & Cloud Certificates from Google, IBM & Meta

Overview

Google, IBM & Meta Certificates – 40% Off

One Coursera Plus subscription covers most Professional Certificates on Coursera.

Unlock All Certificates

Learn how to build highly interactive web apps using React, one of the most popular JavaScript toolsets.

Syllabus

Introduction

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

1. What Is React?

Introducing React: What is it, and what is it good for?
The React tool box: Modern JavaScript and more
Important React terminology
The Pieces: Data, components, and elements
Our build process on Codespaces
How CSS can be used in React
Installing and using React Developer Tools

2. First Project: Product Customizer

Installing React using script tags
Adding in JSX for simpler code
Identifying components and data
Create a new component and array of data
Introducing props to pass along data
Introducing the useState hook to manage local data
Adding a color selector
Implementing an event handler to update state
Solution: Activate color selector

3. Second Project: Directory Browser

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

4. Third Project: Publishing Status Updates

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

Conclusion

Next steps

Taught by

Joe Chellman

Reviews

4.0 rating, based on 1 Class Central review

4.6 rating at LinkedIn Learning based on 14 ratings

Start your review of Interactive React for the Web

Sushant Raj Dangal
2

React is fantastic for building performant user interfaces. Our web app is snappy and great for our customers. React has the philosophy of doing one thing and doing it well which is the view layer of the application. This makes it incredibly intuitive and flexible for developers to use.