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

React for Web Designers

via LinkedIn Learning

Go to class Write review

Details

Go to class

Provider

LinkedIn Learning
Pricing

Free Trial Available
Languages

English
Certificate

Certificate Available
Duration & workload

2-3 hours
Sessions

On-Demand

Found in

Overview

Learn how to incorporate React in real-world web designs. Discover how to manage real-time data, interact with external APIs, and more.

Syllabus

Introduction

Add React to your web designer toolbox
What you should know
Using the exercise files

1. Introducing React

What is React and what is it good for?
React Toolbox: ES6, JSX, and more
React concepts and jargon
Everything is components and elements
Our React build process
React and CSS: A special relationship
Installing React Developer Tools

2. First Project: Customizer

Installing React on an existing site
Identifying your components and data
Set up first simple component
Start using JSX with the help of Babel
Attaching a data source
Create a new component with array data
Implement props
Implement state with the useState hook
Add the color selector component
Change options, see reactions
Challenge: Activate the color selector
Solution

3. Second Project: Directory Browser

Use the mockup, make a plan
Scaffold initial components
Functional components
Build the filters form
Forms in React: Controlled or not
Wire up the filters form
Respond to filter form updates
Animating with ReactTransitionGroup
Challenge: Better usability and animation
Solution: Better usability and animation

4. Third Project: Status Updater

Use live data from a RESTful API
Inspecting your starting React code
First API call with useEffect hook
Using conditional rendering
Bring form fields under control
Let form post to the API
Lifting state for data visibility
Completing the status updater

Conclusion

Next steps: React, React Native, and JS

Taught by

Joe Chellman

Reviews

4.0 rating, based on 1 Class Central review

Start your review of React for Web Designers

Sushant Raj Dangal

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.