- Notifications
You must be signed in to change notification settings - Fork0
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.
alberto-rj/js-react-course
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
This repository documents my learning journey throughJohn Smilga's React course on Udemy. The course provides a comprehensive path to mastering modern React development through hands-on projects.
- 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
- 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.
📦 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-cmsIf you want to run any of these projects locally, follow these steps:
Clone this repository:
git clone https://github.com/alberto-rj/js-react-course.gitcd js-react-courseNavigate to the desired project directory:
cd 04-fundamentals-projects/01-birthday-buddyInstall dependencies:
npm install
Start the project:
npm run dev
The project will run athttp://localhost:5173 in your browser.
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 |
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 |
| 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 |
| Project | Key Learnings | Live Demo |
|---|---|---|
| Contentful CMS | Fetching and displaying dynamic content from Contentful | 🔗 Preview |
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.
- 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! 🚀