React Projects in Javascript

Welcome to my collection of React projects! These projects are built using various React features and libraries to demonstrate different concepts and best practices in React development. Each project is linked to a live demo, and you can explore them to get hands-on experience with React.

Projects Overview

Below is a table of the projects in this repository, along with their live demo links, deployment platforms, and the React libraries used.

Project Name	Live Demo	Source Code	Deployment Platform	Status
01 - Birthday Reminder	Live Demo	Source Code	Vercel	✅ Done
02 - Tours	Live Demo	Source Code	Vercel	✅ Done
03 - Reviews	Live Demo	Source Code	Vercel	✅ Done
04 - Accordion	Live Demo	Source Code	Vercel	✅ Done
05 - Menu	Live Demo	Source Code	Vercel	✅ Done
06 - Tabs	Live Demo	Source Code	Vercel	✅ Done
07 - Slider	Live Demo	Source Code	Vercel	✅ Done
08 - Lorem Ipsum	Live Demo	Source Code	Vercel	✅ Done
09 - Color Generator	Live Demo	Source Code	Vercel	✅ Done
10 - Grocery Bud	Live Demo	Source Code	Vercel	✅ Done
11 - Navbar	Live Demo	Source Code	Vercel	✅ Done
12 - Sidebar & Modal	Live Demo	Source Code	Vercel	✅ Done
13 - Stripe Submenus	Live Demo	Source Code	Vercel	✅ Done
14 - Cart	Live Demo	Source Code	Vercel	✅ Done
15 - Cocktails	Live Demo	Source Code	Vercel	✅ Done
16 - Markdown Preview	Live Demo	Source Code	Vercel	✅ Done
17 - Random Person	Live Demo	Source Code	Vercel	✅ Done
18 - Pagination	Live Demo	Source Code	Vercel	✅ Done
19 - Stock Photos	Live Demo	Source Code	Vercel	✅ Done
20 - Dark Mode	Live Demo	Source Code	Vercel	✅ Done
21 - Movie DB	Live Demo	Source Code	Vercel	✅ Done
22 - Hacker News	Live Demo	Source Code	Vercel	✅ Done
23 - Quiz	Live Demo	Source Code	Vercel	✅ Done

---

Features and Core Concepts

These projects cover a wide range of React topics and features, including:

• useState – State management within functional components
• useEffect – Managing side effects and lifecycle methods
• useContext – Sharing state across components
• useReducer – Complex state management
• useRef – Accessing and modifying DOM elements
• React Router – Routing between pages in single-page applications (SPA)
  • Route, Routes, Navigate, useNavigate
• React Hooks – Custom hooks and built-in hooks like useState, useEffect, useRef, etc.
• useCallback – Optimizing re-renders
• useMemo – Memoizing values for performance optimization
• useContext & useReducer – State management across components
• React Modal & Sidebar – Using React for modal and sidebar components
• React Router – Dynamic routing, navigation, and URL management
• Advanced Features – Complex integrations like state persistence, animations, etc.
• Deployment Platforms: AWS S3 + CloudFront, Netlify, Vercel

---

Getting Started

To get started with any of the projects in this repository, follow these steps:

1. Clone the repository

git clone [email protected]:Rurutia1027/react-js-projects.git

2. Navigate to the project folder

cd react-js-projects
# or any project you prefer
cd 01-birthday-reminder

3. Install the dependencies

npm install

4. Start the development server

npm start

• After deploying successfully, go http://localhost:3000 to check the web page.

---

Reference

• Youtube
• Github Repo

---

Contributing

Feel free to fork this repository, make changes, and submit pull requests if you’d like to contribute to the projects!

---

License

This repository is open-source and available under the MIT License.