Black Friday 2024: 25+ Ways to Save on Online Learning

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

egghead.io

Build a React App with the Hooks API

via egghead.io

Go to class Write review

Overview

In this collection, we build a minimal flashcard application using React, primarily focusing on function components and the hooks API. To make sure we can understand and maintain existing code, there are also a few lessons toward the end that use class components so you can get familiar with the syntax. We cover important React concepts, and sprinkle in libraries that are pretty standard in the ecosystem like @reach/router, Jest, and React testing library. We start with create-react-app so we can get right into it without worrying about configuring tooling. There's a separate course for that here

Syllabus

  • Bootstrap a new React project with npx and create-react-app
  • Render a UI with JSX in a React Function Component
  • Apply Styles to a UI in JSX
  • Create a Reusable React Component
  • Maintain State in a React Component with the useState Hook
  • Test Component Rendering with Jest and Testing Library
  • Test Component Interactions with Jest and Testing Library
  • Load Data from an API with React.useEffect
  • Display UI for List Items in JSX with Map
  • Setup an API Proxy in Create React App
  • Refactor API Calls into a Service Function
  • Mock Modules in a React Component Test
  • Remove Items in a List Without Mutating the Source Array
  • Create a Form with Controlled Inputs in React
  • Handle Form Submissions in React
  • Refactor React Components with Prop Spreading and Destructuring
  • Conditionally Render Components in React
  • Make a React Form Component that Handles Inserts and Updates
  • Avoid Duplicate id Attributes when Reusing Form Components
  • Support Multiple Views in a Single Page Application with @reach/router
  • Create a React Component Using the Class Syntax
  • Render UI Based on Props and State in a Class Component
  • Manage State and Respond to User Events in a Class Component
  • Cycle Through an Array of Values with the Modulus Operator

Taught by

Andy Van Slaars

Reviews

4.7 rating at egghead.io based on 14 ratings

Start your review of Build a React App with the Hooks API

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.