Build a React App with the Hooks API

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

• 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