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.
- 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-cms
If 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.git cd js-react-course -
Navigate to the desired project directory:
cd 04-fundamentals-projects/01-birthday-buddy -
Install dependencies:
npm install
-
Start the project:
npm run dev
The project will run at http://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! 🚀