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

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 reviews

Start your review of React for Web Designers

  • 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.

Never Stop Learning.

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