React JS Learning Projects ⚛️

This repository contains multiple small projects and components built while learning React.js.
The purpose of this repository is to practice React concepts and build simple interactive UI components.

These projects helped me understand component-based architecture, state management, event handling, and UI development using React.

---

🌐 Live Demo

You can view the live projects here:

Live Project Link
https://bishalbhat2002.github.io/React-JS-Learning-Projects/

---

📌 About This Repository

This repository contains basic mini-projects built during my React learning journey.
Each project focuses on practicing a specific concept or feature in React.

The projects are simple but useful for understanding how React applications work.

---

🚀 Mini Projects Included

Some of the projects available in this repository include:

• Frequently Asked Question component
• Random Color generator
• Star Rating Component
• Image Slider
• QR Code Generator
• View Pokemon - Data fetching through Pokemon API
• Counter using UseContext API
• Add to Cart using useContext API
• Counter using useReducer
• Changing properties of element using useRef hook
• Basic Form Validation
• Complex Form Validation
• QR Code with Screenshot - This allows QR code to be attached with screenshots
• Infinite Scroll feature using JS
• Infinite Scroll using IO (Intersection Observer)
• Infinite Scroll + Data Fetching (using IO)

More mini projects may be added in the future as part of continued learning.

---

🧠 Technologies Used

The projects were built using:

• React.js
• Tailwind CSS
• JavaScript
• HTML
• CSS

---

🎯 Purpose of This Repository

The goal of this repository is to:

• Practice React fundamentals
• Understand React components and props
• Learn state management
• Build interactive UI components
• Experiment with React + Tailwind CSS

---

⚙️ Running the Project Locally

If you want to run the project locally, follow these steps.

1️⃣ Clone the Repository

git clone https://github.com/bishalbhat2002/React-JS-Learning-Projects.git

2️⃣ Navigate to the Project Folder

cd React-JS-Learning-Projects

3️⃣ Install Dependencies

npm install

4️⃣ Run the Development Server

npm run dev

The project will start on:

http://localhost:5173

---

📚 Learning Focus

This repository helped practice concepts such as:

• React Components
• Props
• useState Hook
• useContext API
• useRef hook
• useEffect Hook
• Event Handling
• Conditional Rendering
• UI interactions
• Styling using Tailwind CSS, etc.

---

👨‍💻 Author

Bishal Bhat
BSc CSIT Student
Far-Western University
Mahendranagar, Kanchanpur, Nepal

---

⭐ Support

If you like this repository or find it useful, consider giving it a ⭐ on GitHub.