https://github.com/fraineralex/learning-react

🌱 Collection of 15 React projects with learning annotations.
https://github.com/fraineralex/learning-react

react-query reactjs redux typescript zustand

Last synced: about 1 month ago
JSON representation

🌱 Collection of 15 React projects with learning annotations.

• Host: GitHub
• URL: https://github.com/fraineralex/learning-react
• Owner: fraineralex
• Created: 2023-09-16T20:19:10.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2024-01-20T01:54:17.000Z (10 months ago)
• Last Synced: 2024-10-01T10:06:43.594Z (about 2 months ago)
• Topics: react-query, reactjs, redux, typescript, zustand
• Language: TypeScript
• Homepage: https://frainer-hacker-news.surge.sh
• Size: 497 KB
• Stars: 6
• Watchers: 1
• Forks: 1
• Open Issues: 9
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        




# Learning React ⚛️

**React** course taught by crack [midudev](https://github.com/midudev) from scratch based on projects.

**[Every Wednesday at 18PM 🇪🇸 on Twitch](https://twitch.tv/midudev)**



## 📹 Videos of the classes

- 01: [Introduction to React](https://www.youtube.com/watch?v=7iobxzd_2wY)

- 02: [React Hooks: useState and useEffect](https://www.youtube.com/watch?v=qkzcjwnueLA&feature=youtu.be)

- 03: [Technical test with what has been learned](https://www.youtube.com/watch?v=XYpadB4VadY&feature=youtu.be)

- 04: [Data Fetching and Custom Hooks](https://youtu.be/x-LcbVw99o8)

- 05: [React Hooks: useRef, useMemo, useCallback](https://youtu.be/GOEiMwDJ3lc)

- 06: [React Hooks: useContext, useReducer, useId](https://www.youtube.com/watch?v=B9tDYAZZxcE)

- 07: [React Router + Lazy Loading](https://www.youtube.com/watch?v=K2NcGYajvY4)

- 08: [React + TypeScript (Day 01): props and state](https://www.youtube.com/watch?v=4lAYfsq-2TE)

- 09: [React + TypeScript + ChatGPT - Google Translate Clone](https://www.youtube.com/watch?v=kZhabulNCUc)

- 10: [React Redux Toolkit + Rome Tools](https://www.youtube.com/watch?v=bEEjuwujbbU)

- 11: [Technical test of React with TypeScript](https://www.youtube.com/watch?v=mNJOWXc83Y4)

- 12: [React Query + Pagination + Infinite Scroll](https://www.youtube.com/watch?v=WKfVjQUa6nE)

- 13: [JavaScript Quiz with Zustand + TypeScript from scratch](https://www.youtube.com/watch?v=p2wF2wRjcN0)

- 14: Hacker News with TypeScript + SWR - Pending to upload

## ⌨️ React projects with code

| Number | Project | Code | Web |

| --- | --- | --- | --- |

| `01` | Twitter Follow Card | [Watch](projects/01-twitter-follow-card/) | [Visit](https://twitter-follow-card-example.surge.sh/) |

| `02` | Tic Tac Toe | [Watch](projects/02-tic-tac-toe/) | [Visit](https://tic-tac-toe-3x3.surge.sh/) |

| `03` | Mouse Follower | [Watch](projects/03-mouse-follower) | [Visit](https://mouse-follower.surge.sh) |

| `04` | React Technical test with promises, fetching and testing E2E | [Watch](projects/04-react-cats-app) | [Visit](https://cats-fact-app.surge.sh/) |

| `05` | Movie Search App using an API | [Watch](projects/05-react-movie-search) | [Visit](https://react-movie-search-engine.surge.sh/) |

| `06` | Ecommerce platform with shopping cart. | [Watch](projects/06-shopping-cart) | [Visit](https://frainer-shopping-cart.surge.sh/) |

| `07` | Creation of a React Router from scratch | [Watch](projects/07-frainer-router) | [Visit](https://www.npmjs.com/package/frainer-router) |

| `08` | To do App with TypeScript and animations | [Watch](projects/08-todo-app-typescript) | [Visit](https://frainer-todo-app.surge.sh/) |

| `09` | Creation of a Google Translate with TypeScript and openai API  | [Watch](projects/09-google-translate-clone/) | [Visit](https://frainer-google-translate.surge.sh/) |

| `10` | CRUD with Redux Toolkit and TypeScript | [Watch](projects/10-crud-redux/) | [Visit](https://frainer-redux-crud.surge.sh/) |

| `11` | Technical test with React and TypeScript | [Watch](projects/11-typescript-technical-test/) | [Visit](https://frainer-technical-test.surge.sh) |

| `12` | Technical test with React, TypeScript and React Query | [Watch](projects/12-typescript-with-react-query/) | [Visit](https://frainer-technical-test.surge.sh) |

| `13` | Comments system with React, TypeScript and React Query | [Watch](projects/13-comments-react-query) | [Visit](https://frainer-comments-app.surge.sh) |

| `14` |Programming Quizzes with Zustand and TypeScript | [Watch](projects/14-programming-quizzes-with-zustand/) | [Visit](https://programming-quizzes.surge.sh/) |

| `15` | Hacker News with TypeScript and SWR | [Watch](projects/15-hacker-news-with-typescript-and-swr) | [Visit](https://frainer-hacker-news.surge.sh/) |

## 📝 Annotations

All my annotations taken during the complete course, with code examples, completely in Spanish and with my personal opinion are found here ➡️ [annotations](anotaciones.md).