Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/eugenia1984/react-desde-cero-con-midudev

Curso de React desde Cero con MiduDev
https://github.com/eugenia1984/react-desde-cero-con-midudev

javascript react reactjs redux typescript

Last synced: about 2 months ago
JSON representation

Curso de React desde Cero con MiduDev

Awesome Lists containing this project

README 

        
#  React desde cero con MiduDev



---



Curso de **React desde Cero** con **MiduDev** (Miguel Angel Duran), todos los Miércoles en su canal de Twich, a partir del Miércoles 11 de Enero de 2023.



:computer: -> [Repositorio en GitHub de MiduDev](https://github.com/midudev/aprendiendo-react)



---



## :computer: CLASES PRÁCTICAS - PROYECTOS



En la carpeta **proyect** encontrarás los **proyectos** realizados.



## ⌨️ ¿Cuáles son los proyectos ?



- **Clase 1**:



[Ejercicio de botón "Me gusta" con JavaScript Vanilla](https://github.com/eugenia1984/React-desde-cero-con-MiduDev/tree/main/01_ejercicio_con_vanilla_js).









-> Dentro de la carpeta [**projects**](https://github.com/eugenia1984/React-desde-cero-con-MiduDev/tree/main/projects) van a estar todos los proyectos de **React**, creados con **vite**



[**1er proyecto : componente de Twitter**](https://github.com/eugenia1984/React-desde-cero-con-MiduDev/tree/main/projects/01-twitter-followers) <- acá podes ver el codigo






- **Clase 2**:



[**2do proyecto: Tic-Tac-Toe**](https://github.com/eugenia1984/React-desde-cero-con-MiduDev/tree/main/projects/02-tic-tac-toe) <- acá podes ver el codigo






:computer: -> [Lo podes ver desplegado aca](https://tic-tac-toe-mec.netlify.app/)



[**3er proyecto : Mouse follower**](https://github.com/eugenia1984/React-desde-cero-con-MiduDev/tree/main/projects/03-mouse-follower) <- acá podes ver el codigo



tic tac toetic tac toetic tac toe



- **Clase 3**:



[**4to proyecto: Prueba técnica con Promesas, fetching y testing E2E - Hacer un fetchig para obtener una frase y una imagen**](https://github.com/eugenia1984/React-desde-cero-con-MiduDev/tree/main/projects/04-react-prueba-tecnica) <- acá podes ver el codigo



-Temas: useState - useEffect - fetching de datos - promesas



 cat app



- **Clase 4**:



[**5to proyecto: Prueba técnica para Juniors con formularios - aplicación para buscar películas utilizando una API**](https://github.com/eugenia1984/React-desde-cero-con-MiduDev/tree/main/projects/05-react-buscador-peliculas) <- acá podes ver el codigo



app to search movies



:tv: -> Para ver el deploy [https://movie-s-search.netlify.app/](https://movie-s-search.netlify.app/)



-Temas: React Hooks (useRef, useMemo, useCallback), cómo manejar formularios (manera controlada y no controlada) y hacer debounce.



- **Clase 5**:



[**6to proyecto: Prueba técnica para Juniors - Creación de un ecommerce con carrito de compras**](https://github.com/eugenia1984/React-desde-cero-con-MiduDev/tree/main/projects/06-shopping-cart) <- acá podes ver el codigo



app ecommerce



:tv: -> Para ver el deploy [https://euge-e-commerce.netlify.app/](https://euge-e-commerce.netlify.app/)



-Temas: useContext, useReducer, useId



- **Clase 6**:



[**7mo proyecto: Creación de un React Router desde cero**](https://github.com/eugenia1984/React-desde-cero-con-MiduDev/tree/main/projects/07-mini-router) <- acá podes ver el codigo



- Home page:



home page



- About Page:



about page



- Not found(404) page:



not founf page



- **Clase 7**:



[**8vo proyecto: TODO APP**](https://github.com/eugenia1984/React-desde-cero-con-MiduDev/tree/main/projects/08-todo-app) <- acá podes ver el codigo



todo list with typescript



- **Clase 8**:



[**9no proyecto: : Crear un Google Translate con ChatGPT y TypeScript**](https://github.com/eugenia1984/React-desde-cero-con-MiduDev/tree/main/projects/09-code-editor) <- acá podes ver el codigo



google translator with react and typescript



Temas: **Web Speech API**. **Bootstrap** y **React Bootstrap** (estilos y componentes), **openai** (traducciones), un **custom hook** para hacer un **debounce** ( por el llamado a la API de la traducción por cada letra que va introduciendo), para testing: **vitest**, **happy-dom** y **testing-library**.



- **Clase 9**:



[**10mo proyecto: Crear un CRUD con Redux Toolkit y TypeScript**](https://github.com/eugenia1984/React-desde-cero-con-MiduDev/tree/main/projects/10-crud-redux) <- acá podes ver el codigo



todo list with typescript



-Temas: Rome(para no usar ESLint). [**Tremor**](https://www.tremor.so/).



---



- **Clase 10**:



**11ro Proyecto: Prueba Técnica con TypeScript y React**



todo list with typescript



---



- **Clase 11**:



**12do Proyecto: Sistema de comentarios con React Query**: React Query + Paginación + Infinite Scroll



- **Clase 12**:



**3ro Proyecto:  JavaScript Quiz con Zustand y TypeScript**



---



## :book: TEMAS:



**React 18**:



- Requerimientos ¿qué se debe tener instalado?



- ¿Qué es React? ¿Por qué React?



- Introducción a **JSX**, la sintaxis que ayuda a trbajar con React.



- **Components**(Componentes).



- **props**.



- **State**(estados).



- **Eventos**.



- **Hooks**, con ejemplos prácticos, para ver cuándo utilizarlos y saber para qué sirven.



- Estructuras de carpetas, para organizar con buenas prácticas los proyectos.



- Desarrollar un pequeño **enrutado** desde el nivel más básico, para poder navegar entre páginas, creando nuestro pequeño react-router. Y se irá aumentando en complejidad.



- **Context**, estado global (con context API de React y con dependencias como Redux Toolkit ).



- **Server Side Rendering**(renderizar REact desde el servidor), sin frameworks, desde cero.



- ¿Cómo utilizar **TypeScript** con React? ¿Cómo migrar código a TS? Instalamos TypeScript. ¿Qué tener en cuenta? Buenas prácticas.



- ¿Cómo **Dockerizar** la aplicación de React? ¿Cómo podemos conseguir ejecutar la aplicación de React en cualquier servidor?



- **Testing**: con **React Testing Library**, **Testing End to End** con **PlayWright**. Un pequeño ejercicio con **TDD**.



- **Mejoras de rendimiento**: ¿cómo se puede hacer **lazy loading**? Imports dinámicos. ¿Cómo mejorar el rendimiento de las aplicaciones en React? ¿Qué tener en cuenta? ¿Cómo encontrar errores en las aplicaciones que hacen que vaya lento con React?



- **React Query** ¿Cómo utilizar esta dependencia para eliminar un montón de código que se utilizó en proyectos anerires?



- Crear los propios **custom hooks**.



---



## 🛠️ TECNOLOGÍAS 🛠️



- icono de HTML **HTML5**



- icono de CSS **CSS3**



- icono de JavaSCript **JavaScript**



- icono de React **React**



- icono de vite[**Vite**](https://vitejs.dev/)



- [**playwright**](https://playwright.dev/)



#### Recursos:



- [icono de hero icons

  **Hero Icons**](https://heroicons.com/) para íconos svg y JSX.



- [icono de unavatar.io

  **unavatar.io**](https://unavatar.io/)



- [**Water.css**](https://watercss.kognise.dev/), framework class less.



- [**SimpleCSS**](https://simplecss.org/), framework class less.



- [icono de JSON formatter extension de Chrome

  **JSON Formatter**](https://chrome.google.com/webstore/detail/json-formatter-viewer-and/infnlhnhibphpaljmnnadaldibggkokb): extensión de Chrome, para ver más claros los JSON.



- [just-debouce-it](https://www.npmjs.com/package/just-debounce-it?activeTab=readme) para hacer un debounce.



- [**path-to-regexp**](https://www.npmjs.com/package/path-to-regexp),para poder hacer rutas dinamicas(/:id, por ejemplo) en el proyecto 7 donde creo el mini-router, lo usa **express** y muchas librerías más.



- [**vitest**](https://vitest.dev/), para hacer test.



- [**happy-dom**](https://www.npmjs.com/package/happy-dom), para simular un navegador y poder hacer test.



- [**testing-library-react**](https://testing-library.com/docs/react-testing-library/intro/#:~:text=The%20React%20Testing%20Library%20is,that%20encourages%20better%20testing%20practices.)



- [**SWC**](https://swc.rs/), similar a Babel.



- [**jsonbin**](https://jsonbin.io/)



- [**todomvc-app-css**](https://www.npmjs.com/package/todomvc-app-css)



- [**repositorio: typescript-cheatsheets/react**](https://github.com/typescript-cheatsheets/react)



- [**React Bootstrap**](https://react-bootstrap.github.io/)



- **openai**, en el proyecto del traductor.



- [**Rome**](https://rome.tools/)



- [**Tremor**](https://www.tremor.so/) 



- [**Sonner**](https://sonner.emilkowal.ski/) para notificaciones.



- [**API randomuser**](https://randomuser.me/) para una prueba técnica



- [**https://quicktype.io/**](https://quicktype.io/) para hacer el tipado de TS a partir de un JSON



---



## :tv: CLASES:



- [**Clase 1**](https://github.com/eugenia1984/React-desde-cero-con-MiduDev/blob/main/clase01.md) -> ⭐ ¿Qué conocimientos hay que tener? ⭐ ¿Qué se debe tener ya instalado? ⭐ ¿Qué es Reactjs? ⭐ Webs para despejar dudas ⭐ Un poco de historia ⭐ ¿Por qué aprender React ? ⭐ Ejercicio práctico (de JS Vanilla a React) ⭐ JSX ⭐ ¿Cómo crear proyectos ? ⭐ [**1er proyecto**](https://github.com/eugenia1984/React-desde-cero-con-MiduDev/blob/main/projects/01-twitter-followers), hacemos la primer práctica con React, donde creamos parte de **la interfaz de Twitter donde vemos los usuarios y se siguen o dejan de seguir**, temas que se ver: props, desestructuración, hook useState (es estado, cómo actualizarlo), renderizado condicional(con ternario), imperativo vs declarativo, programación funcional, virtual DOM, renderización de listas.



- [**Clase 2**](https://github.com/eugenia1984/React-desde-cero-con-MiduDev/blob/main/clase02.md) -> ⭐ [**2do proyecto: de Tic-Tac-Toe (Tres en línea)**](https://github.com/eugenia1984/React-desde-cero-con-MiduDev/blob/main/projects/02-tic-tac-toe), viendo: crear un proyecto con **vite**, ¿cómo incializar el localStorage?, ¿cómo utilizar el localStorage para inicializar un estado?, ¿cómo inicializar un estado?, ¿cómo utilizar los eventos onClick? ⭐ Hook useEffect ⭐ [**3er proyecto: Mouse follower**](https://github.com/eugenia1984/React-desde-cero-con-MiduDev/blob/main/projects/03-mouse-follower), para utilizar el hook useEffect ⭐ React Developer Tools



- [**Clase 3**](https://github.com/eugenia1984/React-desde-cero-con-MiduDev/blob/main/clase03.md), viendo: ⭐ Prueba técnica de React para Juniors con **Fetching de datos**, **Testing** con **playwright**, Manejo de estados y **Custom Hooks**. :star: [**4to proyecto: Hacer un fetchig para obtener una frase y una imagen**](https://github.com/eugenia1984/React-desde-cero-con-MiduDev/tree/main/projects/04-react-prueba-tecnica) durante la Prueba técnica con Promesas, fetching y testing E2E



- [**Clase 4**](https://github.com/eugenia1984/React-desde-cero-con-MiduDev/blob/main/clase04.md), hacemos una **prueba tecnica para Juniors, con formularios - aplicación para buscar películas utilizando una API**, viendo: ⭐ **React Hooks**: useRef, useMemo, useCallback, como manejar formularios (manera controlada y no controlada) y hacer debounce. :star: [**5to proyecto - Buscados de peliculas**](https://github.com/eugenia1984/React-desde-cero-con-MiduDev/tree/main/projects/05-react-buscador-peliculas)



- [**Clase 5**](https://github.com/eugenia1984/React-desde-cero-con-MiduDev/blob/main/clase05.md) -> ⭐ **React Hooks**: useContext, useReducer, useId :star: [**6to proyecto: Creación de un ecommerce con carrito de compras**](https://github.com/eugenia1984/React-desde-cero-con-MiduDev/tree/main/projects/06-shopping-cart)



- [**Clase 6**](https://github.com/eugenia1984/React-desde-cero-con-MiduDev/blob/main/clase06.md) -> ⭐ Lazy **Loading** :star: [**7mo proyecto**: Creación de un React Router desde cero](https://github.com/eugenia1984/React-desde-cero-con-MiduDev/tree/main/projects/07-mini-router): window.location.pathname, window.history.pushState, Children, `{lazy}`, ``. Dependencia: path-to-regexp. Vitest, para testear. Happy-dom, para testear. React Testing Library, para testear.



- [**Clase 7**](https://github.com/eugenia1984/React-desde-cero-con-MiduDev/blob/main/clase07.md) ->⭐ React + **TypeScript** (Día 01): props y state :star: [**8vo proyecto**: **TODO APP**](https://github.com/eugenia1984/React-desde-cero-con-MiduDev/tree/main/projects/08-todo-app) :star: **TS**: `JSX.Element` vs `React.FC`, interface de Props(que pueden a su vez **extender**) para tener `React.FC`, **type** vs **interface**, type con **Omit** ó **Pick**, **as const**(solo lectura), Object.entries() para transformar a array, `crypto.randomUUID()` para crear un id unico.



- [**clase 8**](https://github.com/eugenia1984/React-desde-cero-con-MiduDev/blob/main/clase08.md) -> React + TypeScript + ChatGPT ⭐ [**9no proyecto: Crear un Google Translate con ChatGPT y TypeScript**](https://github.com/eugenia1984/React-desde-cero-con-MiduDev/tree/main/projects/09-code-editor). **Web Speech API** para que al hacer click en el icono del megafono se escuche el texto del recuadro. **Bootstrap** y **React Bootstrap**, para hacer más rápido los estilos. **openai** para las traducciones. Un **custom hook** para hacer un **debounce** asi no hace el llamado a la API de la traducción por cada letra que va introduciendo. Para testing: **vitest**, **happy-dom** y **testing-library**



- [**Clase 9**](https://github.com/eugenia1984/React-desde-cero-con-MiduDev/blob/main/clase09.md) -> React Redux Toolkit + Rome Tools ⭐ [**10mo proyecto**: Crear un CRUD con Redux Toolkit y TypeScript](https://github.com/eugenia1984/React-desde-cero-con-MiduDev/tree/main/projects/10-crud-redux). [**Rome**](https://rome.tools/), en reemplazo de ESLint. [**Tremor**](https://www.tremor.so/) para tener componentes ya armados, como : formularios, gráficas, dashboards. **React-Redux** y **Redux-Toolkit**. **Persistencia** con **middleware**. [**Sonner**](https://sonner.emilkowal.ski/) para las notificaciones.



- [**Clase 10**](https://github.com/eugenia1984/React-desde-cero-con-MiduDev/blob/main/clase10.md) -> ⭐ **11ro Proyecto: Prueba Técnica con TypeScript y React**. Utilizando la API [https://randomuser.me/](https://randomuser.me/) y [**https://quicktype.io/**](https://quicktype.io/) para tipar con TS a partir del JSON



- **Clase 11** -> ⭐ **12do Proyecto: Sistema de comentarios con React Query**:  React Query + Paginación + Infinite Scroll



- **Clase 12** -> ⭐ **13ro Proyecto:  JavaScript Quiz con Zustand y TypeScript**



---



## 🎁 POR FAVOR:



- Comparte este proyecto con otros 📢

- Invita una cerveza 🍺 o un café ☕ a alguien del equipo.

- Muchas gracias 🤓.



---



## NOTAS:



Agradezco su interés en este proyecto ⌨️ con ❤️ de [María Eugenia Costa](https://github.com/eugenia1984) 😊 y sígueme en [LinkedIn - maria-eugenia-costa](https://www.linkedin.com/in/maria-eugenia-costa/)



---