Skip to content

Latest commit

 

History

History
136 lines (99 loc) · 8.19 KB

README.md

File metadata and controls

136 lines (99 loc) · 8.19 KB

🚀 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! 🚀