ReactRefactor

ReactRefactor is a personal project aimed at keeping my React skills sharp by refactoring class components into modern functional components using hooks. This repository serves as a playground for practicing and mastering the latest React concepts, focusing on transitioning from older class-based components to functional ones.

Table of Contents

• ReactRefactor
  • Table of Contents
  • Overview
  • Installation
  • Components
  • Project Goals
  • Usage
  • Contributing

Overview

This project contains a variety of React class components that I've written and then refactored into functional components. It includes basic examples like counters and forms, as well as more interactive ones like a todo list and user profile. The aim is to stay up-to-date with React's best practices and gain deeper familiarity with hooks such as useState, useEffect, and more.

Installation

To run this project locally, clone the repository and install the dependencies:

git clone https://github.com/your-username/ReactRefactor.git
cd app
npm install || yarn

Components

Here are the components available for refactoring practice:

1. Counter - A simple counter with increment and decrement functionality.
2. Todo List - Allows users to add, view, and manage tasks.
3. User Profile - Simulates fetching user data and displaying it.
4. Weather - Displays a simulated temperature reading.
5. Toggle - A basic on/off toggle button.
6. Form - A controlled form handling user input.
7. Click Counter - Counts the number of button clicks.
8. Message - Displays a simple message.
9. Color Picker - Changes text color based on user selection.
10. List Display - Renders a list of items.

Each component is implemented as a class component and then refactored into a functional component, providing a side-by-side comparison for learning purposes.

Project Goals

• Practice Refactoring: Gain confidence in converting class components to functional components.
• Master Hooks: Deepen understanding of hooks like useState, useEffect, and custom hooks.
• Stay Updated: Keep up with modern React practices and ES6+ JavaScript.
• Code for Fun: Enjoy coding and experimenting with different approaches without the pressure of deadlines or external requirements.

Usage

To run the project locally and see the components in action, use the following command:

npm start || yarn start

Navigate to http://localhost:3000 in your browser to view the app. You can explore each component's functionality and refactoring approach directly from the app.

Contributing

While this is a personal project, if you'd like to suggest improvements or share additional refactoring ideas, feel free to open a pull request or create an issue.