Refactor Widgets App

Project Overview

In this project, we'll refactor class components in a React application into function components using React Hooks. This transformation is a common task for React developers as the community has embraced hooks as the standard way to handle state and side effects in React components.

By the end of this tutorial, you'll understand how to:

• Use the useState Hook to convert state instance variables to function-based state variables
• Understand React lifecycle methods (componentDidMount, componentDidUpdate, componentWillUnmount) and their function component equivalents
• Use useEffect to replicate the behavior of those lifecycle methods
• Use useRef to create a ref that persists across renders
• Test your refactored components with React Testing Library

Project Setup

Before diving into the refactoring process, make sure you have:

1. Cloned the Widgets application starter
2. Run npm install to install all dependencies
3. Started the application with npm run dev to see the widgets displayed at http://localhost:5173

Testing

The project comes with test coverage using React Testing Library on a Jest framework. These tests will help ensure your refactoring doesn't break existing functionality.

Run npm test to start tests in watch mode. The tests will automatically run whenever you change a file.

• Press a to run all tests
• Press p to filter by a filename pattern

It's recommended to keep tests running in watch mode as you refactor to catch issues immediately.

Tutorial Structure

This tutorial is divided into five phases, each focusing on a specific component:

1. Phase 1: App Component - Introducing useState for basic state management
2. Phase 2: Folder Component - Working with props and component interaction
3. Phase 3: Weather Component - Using useEffect for API calls and data fetching
4. Phase 4: Clock Component - Working with intervals and cleanup
5. Phase 5: Autocomplete Component - Advanced state, refs, and component updates

Each phase builds on the concepts from the previous ones, gradually introducing more complex uses of React Hooks.