🚀 React Tutorials and Projects - John Smilga

This repository documents my learning journey through John Smilga's React course on Udemy. The course provides a comprehensive path to mastering modern React development through hands-on projects.

📚 Course Progression

✅ Completed

• React Fundamentals: Core concepts, JSX, components, props, events
• Advanced React: Forms, controlled inputs, Uncontrolled inputs, context API, custom hooks, performance optimization: memoization, useMemo, useCallback, suspense API.
• API Integration: Axios for HTTP requests, React Query for state management
• CMS Integration: Contentful for dynamic content management

🔜 Coming Soon

• React Router: Advanced routing and navigation
• Redux Toolkit: State management for larger applications
• Tailwind CSS: Utility-first CSS framework integration
• TypeScript: Type safety in React applications
• React with TypeScript: Building type-safe React components
• Next.js: Server-side rendering and static site generation

Each section includes practical, real-world projects to reinforce learning through application.

📂 Repository Structure

📦 js-react-course
├── 📂 01-fundamentals
├── 📂 02-backroads-project
├── 📂 03-advanced-react
├── 📂 04-fundamentals-projects
│   ├── 📂 01-birthday-buddy
│   ├── 📂 02-tours
│   ├── 📂 03-reviews
│   ├── 📂 04-accordion
│   ├── 📂 05-menu
│   ├── 📂 08-lorem-ipsum
│   ├── 📂 09-color-generator
│   ├── 📂 10-grocery-bud
│   ├── 📂 11-navbar
│   ├── 📂 12-sidebar-modal
│   ├── 📂 14-cart
├── 📂 05-axios
├── 📂 06-react-query
├── 📂 07-unsplash-images
├── 📂 08-contentful-cms

🛠 How to Run Locally

If you want to run any of these projects locally, follow these steps:

1. Clone this repository:

   git clone https://github.com/alberto-rj/js-react-course.git
   cd js-react-course

2. Navigate to the desired project directory:

   cd 04-fundamentals-projects/01-birthday-buddy

3. Install dependencies:

   npm install

4. Start the project:

   npm run dev

The project will run at http://localhost:5173 in your browser.

🌍 Backroads Project

This early project focuses on applying React fundamentals by converting a static HTML template into a component-based React application.

Project	Key Learnings	Live Demo
Backroads Project	Converting a static HTML homepage into a dynamic React app, Component structure, Props usage, Conditional rendering	🔗 Preview

📌 Fundamental Projects

Each project focuses on essential React concepts, making it useful for beginners who want to practice or developers looking to explore specific implementations.

#	Project	Key Learnings	Live Demo
01	Birthday Reminder	useState, Conditional Rendering	🔗 Preview
02	Tours	useState, useEffect, Conditional Rendering	🔗 Preview
03	Reviews	useState	🔗 Preview
04	Accordion	useState, Conditional Rendering	🔗 Preview
05	Menu	useState, useEffect, useContext, createContext, Lists and Keys	🔗 Preview
08	Lorem Ipsum	useState, Lists and Keys, Events, Forms (Controlled Inputs)	🔗 Preview
09	Color Generator	useState, Conditional Rendering, Higher-Order Components, Lists and Keys	🔗 Preview
10	Grocery Bud	useState, Conditional Rendering, Lists and Keys, Events, Controlled and Uncontrolled Inputs	🔗 Preview
11	Navbar	useState, useEffect, useRef, Events	🔗 Preview
12	Modal and Sidebar	useState, useContext, Context API, Custom Hooks	🔗 Preview
14	Cart	useReducer, Context API, Custom Hooks	🔗 Preview

📡 Axios and React Query

Project	Key Learnings	Live Demo
Axios	Efficiently handling API requests using Axios	❌ No live demo
React Query	Managing asynchronous state and caching with React Query	❌ No live demo
Unsplash Images	Implementing an image search API into a React app	🔗 Preview

📦 Contentful CMS

Project	Key Learnings	Live Demo
Contentful CMS	Fetching and displaying dynamic content from Contentful	🔗 Preview

🤝 Contributing

If you would like to contribute, feel free to:

• Suggest improvements to the structure or code.
• Add new features based on existing projects.
• Report issues or bugs.

🎯 Notes

• These projects were built following the course content and can be enhanced with new features.
• The purpose of this repository is to serve as a learning guide for anyone who wants to practice React progressively.

---

Feel free to explore and contribute! 🚀