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

LinkedIn Learning

React for Web Designers

via LinkedIn Learning

Go to class Write review
Boot.dev Ad

Learn Backend Development Part-Time, Online

Learn More → CourseHorse Ad

Give the Gift That Unlocks Potential

Learn More →

Overview

Coursera Flash Sale
40% Off Coursera Plus for 3 Months!
Grab it
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.6 rating at LinkedIn Learning based on 119 ratings

Start your review of React for Web Designers

Go to class

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Sign up for free
Someone learning on their laptop while sitting on the floor.