React Learning

Welcome to my React learning journey! 🚀

This repository contains my React learning projects and practice work, built while learning React from beginner to advanced concepts. New projects will be added as I continue learning and practicing React.

Projects

✅ 01 - Profile Card

A reusable React Profile Card component using:

• React Components
• Props
• useState
• CSS Styling

Technologies Used

• React
• Vite
• JavaScript (ES6+)
• HTML5
• CSS3
• Git & GitHub

✅ 02 - Counter App

A simple counter application built with React to practice state management.

Features:

• Increase count
• Decrease count
• Increase by 5
• Decrease by 5
• Reset counter

Concepts practiced:

• useState
• Event Handling
• State Updates
• React Components

Technologies

• React.js
• JavaScript
• HTML5
• CSS3
• Vite
• Git & GitHub

✅ 03 Functional State Update - React

A simple React project created to understand how functional state updates work with useState.

📌 Purpose

This project demonstrates how to update state based on its previous value using a functional updater.

The example uses an age counter where each button click increases the age by 15.

🚀 Concepts Learned

• useState Hook
• State and state updater functions
• Functional state updates
• Previous state value
• Event handling with onClick
• React component structure
• JSX
• Re-rendering when state changes

✅ 04 - Todo App

A simple and interactive Todo List application built with React.js as part of my React learning journey.

• Features
• Add new todos
• Edit existing todos
• Update todo items
• Delete todos
• Controlled input field
• Dynamic todo list rendering
• Conditional Add/Update button
• Custom CSS styling
• React Hook Used
• useState

This project uses the React useState hook for state management.

Three state variables are used:

• const [text, setText] = useState("");
• const [todos, setTodos] = useState([]);
• const [editIndex, setEditIndex] = useState(null);
• text — stores the current input value.
• todos — stores the list of todo items.
• editIndex — stores the index of the todo currently being edited.

✅ 05 Todo Listed Count Items

A simple React practice project built to understand useState, state management, event handling, list rendering, editing, deleting, and maintaining a dynamic item count.

• Features
• Add new items
• Edit existing items
• Update items
• Delete items
• Dynamic item counter
• Controlled input field
• Dynamic list rendering
• Conditional Add/Update button
• Custom CSS styling
• ⚛️ React Hook Used
• useState

This project uses React's useState hook to manage multiple pieces of application state.

• const [count, setCount] = useState(0);
• const [text, setText] = useState("");
• const [todos, setTodos] = useState([]);
• const [editIndex, setEditIndex] = useState(null);

✅ 06 - Color Changer

A simple React project that changes the background color randomly when the button is clicked.

Features

• Random background color generation
• Displays the current color
• Interactive button
• Dynamic background styling

React Concepts Used

• useState
• Event handling with onClick
• Dynamic inline CSS
• JavaScript Math.random()
• Array indexing

Technologies

• React.js
• JavaScript
• CSS3
• Vite

Learning Purpose

This project was created to practice React state management, event handling, random values, and dynamic styling using the useState hook.

✅ 07 - Character Counter

A simple React project that counts the number of characters typed into a textarea in real time.

Features

• Real-time character counting
• Controlled textarea input
• Clear text button
• Dynamic UI updates

React Concepts Used

• useState
• onChange event handling
• Controlled components
• e.target.value
• .length property
• Dynamic rendering

Technologies

• React.js
• JavaScript
• CSS3
• Vite

Learning Purpose

This project was created to practice React state management, controlled inputs, event handling, and dynamic UI updates.

✅ 08 - Search Filter

A simple React project that filters a list of fruits based on the user's search query in real time.

Features

• Real-time search filtering
• Case-insensitive search
• Displays matching results
• Shows "No results found" when there are no matches

React Concepts Used

• useState
• Controlled input
• onChange event handling
• filter()
• map()
• toLowerCase()
• includes()
• Conditional rendering

Technologies

• React.js
• JavaScript
• CSS3
• Vite

Learning Purpose

This project was created to practice React state management, array filtering, controlled inputs, and conditional rendering.

✅ 09 - Dark / Light Mode

A simple React project that allows users to switch between Dark Mode and Light Mode.

Features

• Toggle between Dark and Light themes
• Displays the current theme
• Dynamic CSS classes
• Interactive theme switch button

React Concepts Used

• useState
• Boolean state
• onClick event handling
• Conditional rendering
• Dynamic className
• State-based UI updates

Technologies

• React.js
• JavaScript
• CSS3
• Vite

Learning Purpose

This project was created to practice React state management, boolean values, conditional rendering, dynamic styling, and event handling.

✅ 10 - Digital Clock

A simple React project that displays the current time and date and updates the clock every second.

Features

• Real-time digital clock
• Displays current date
• Automatically updates every second
• Clean and simple UI

React Concepts Used

• useState
• useEffect
• setInterval()
• clearInterval()
• new Date()
• toLocaleTimeString()
• toLocaleDateString()
• Effect cleanup function

Technologies

• React.js
• JavaScript
• CSS3
• Vite

Learning Purpose

This project was created to practice React state management, the useEffect hook, timers, cleanup functions, and working with JavaScript Date objects.

✅ 11 - Weather App

A simple React weather application that fetches real-time weather information for a searched city using the OpenWeatherMap API.

Features

• Search weather by city name
• Displays current temperature
• Shows weather condition and icon
• Displays feels-like temperature
• Shows humidity and wind speed
• Loading and error handling

React Concepts Used

• useState
• Controlled input
• onChange event handling
• fetch()
• Promises (then() / catch())
• Conditional rendering
• API data handling
• Dynamic rendering

Technologies

• React.js
• JavaScript
• CSS3
• OpenWeatherMap API
• Vite

Learning Purpose

This project was created to practice React state management, API integration, asynchronous data fetching, conditional rendering, error handling, and working with API responses.

✅ 12 - useRef Examples

This section contains two simple React projects created to the useRef Hook.

1. Auto Focus Input

A simple React application that automatically focuses on the input field when the component loads. It also allows the user to focus the input by clicking a button.

Features

• Automatically focuses the input on page load
• Focus input using a button
• Uses useRef to access the DOM element
• Uses useEffect for initial focus

React Concepts Used

• useRef
• useEffect
• DOM element reference
• inputRef.current.focus()
• Event handling

---

2. useRef Counter

A simple counter example that uses useRef to keep track of how many times a button has been clicked.

Instead of using useState, the click count is stored inside useRef.

Features

• Counts button clicks
• Displays the click count using an alert
• Demonstrates how useRef can store a mutable value
• Shows that changing ref.current does not cause a re-render

React Concepts Used

• useRef
• ref.current
• Event handling
• Mutable values
• Difference between useRef and useState

Technologies

• React.js
• JavaScript
• CSS3
• Vite

Learning Purpose

These projects were created to understand how the React useRef Hook works, how it can be used to access DOM elements, and how it can store values without causing a component re-render.

Author

Zeeshan Ahmad Frontend Developer