This repository contains a collection of beginner-friendly React projects that I built while learning React. These projects are based on the ideas from this freeCodeCamp article and helped me grasp essential React concepts like components, state, props, and hooks.
A simple React-based image slider that allows users to navigate through a set of images using next and previous buttons. Great for learning about state management and event handling.
An interactive FAQ section with collapsible answers. This project helps in understanding state toggling and conditional rendering in React.
A random quote generator that fetches and displays motivational quotes with the click of a button. Covers fetching data from APIs and updating the UI dynamically.
A simple shopping list app where users can add, remove, and mark items as purchased. Demonstrates CRUD operations and local state management.
A search tool that fetches user data from GitHub’s API and displays relevant details like profile picture, repositories, and followers. Useful for understanding API integration and handling asynchronous operations in React.
A basic video player with play, pause, and volume controls. This project covers media element handling and React event listeners.
A Body Mass Index (BMI) calculator that allows users to input their weight and height and receive a calculated BMI. Helps in learning controlled components and form handling in React.
- React.js
- JavaScript (ES6+)
- HTML & CSS
- React Hooks (useState, useEffect)
To run any project locally, follow these steps:
- Clone the repository:
git clone https://github.com/user007ash/Simple-React-Projects-FreeCodeCamp.git
- Navigate into the project folder:
cd project-folder-name - Install dependencies:
pnpm install
- Start the development server:
pnpm start
As a beginner, I wanted to apply what I learned through hands-on projects. Each project helped me understand core React concepts in a practical way. I’m sharing this repo so that other beginners can benefit from these examples and practice along!
If you find any improvements or have suggestions, feel free to open an issue or submit a pull request. Let's learn together! 🚀
If you're also learning React or have any questions, feel free to reach out!