A collection of small React JS projects—perfect for beginners looking to grasp core concepts like components, hooks, and state management while building real, hands-on apps. Ideal for strengthening fundamentals and growing a portfolio.
- 📝 Projects Included
- 🚀 Getting Started
- 🛠 Tech Stack
- 📁 Project Structure
- 🎯 What You'll Learn
- 🤝 Contribute
- 📄 License
- 📬 Connect with Me
Here’s a sample of the beginner-friendly projects you’ll find in this repo—designed to help you practice React fundamentals and build real skills:
- To-Do List App – Add, delete, and mark tasks complete.
- Calculator – Implement addition, subtraction, multiplication, and division.
- Counter App – Simple increment/decrement and reset functionality.
- Weather App – Fetch and display live weather using an API.
- Quiz App – Multiple-choice questions with score tracking.
- Notes App – Create, edit, and delete notes—persisted locally.
- Movie Search App – Search for movies using the OMDb API.
(Feel free to adjust the list to reflect actual projects in your repo)
To launch and explore these projects on your machine:
- Clone the repository
git clone https://github.com/Cirarshi/Js-React-Projects.git cd Js-React-Projects - Install dependencies
npm install- Run a specific project
cd project-folder-name npm start - View it in your browser Open http://localhost:3000 to see the app in action!
Here's what powers the projects in this repository:
| 🧩 Category | 🚀 Tools & Technologies |
|---|---|
| ⚛️ Framework | React (Create React App) |
| 🎨 Styling | Tailwind CSS / Plain CSS / CSS Modules (varies by project) |
| 🔄 State Management | React Hooks – useState, useEffect |
| 🌐 API Integration | fetch API or Axios |
| 🧪 Testing (optional) | Jest / React Testing Library |
| 🛑 Routing (if used) | React Router DOM |
📝 Note: Each project may vary slightly in tech stack depending on its functionality and purpose.
Js‑React‑Projects/
├── project-1/
│ ├── public/
│ │ └── index.html
│ └── src/
│ ├── App.jsx
│ └── index.jsx
├── project-2/
│ └── ... same structure
│ ...
└── README.mdEach folder represents an independent React project—so you can effortlessly hop into any one of them and explore or run it standalone.
- Components & Props — Break UI into reusable pieces
- React Hooks — Manage state and side effects cleanly
- Event Handling — Respond to user interaction like clicks
- Conditional Rendering — Show/hide UI elements smartly
- API Integration — Fetch and display live data (weather, movies…)
- State Management — Keep your app interactive and dynamic
- Local Storage — Persist user data between sessions
These projects reinforce essential React skills—empowering you to build from simple counters to dynamic, API‑driven applications.
Contributions are welcome! Here's how to help:
- ⭐Star the repo.
- 🍴Fork and clone the repo.
- Create a branch
git checkout -b feature/new-project
- **Add your project **
- Commit and push
git commit -m "feat: add new React project" git push origin feature/new-project - Submit a Pull Request and describe your addition.
Feel free to explore, modify, and share—with attribution.
GitHub: @Cirarshi
LinkedIn: https://www.linkedin.com/in/utkarsh-kapoor-6b3200127/