https://github.com/eugenia1984/reactjs-build-a-food-managing-app

An Udemy React course to build a Food managing app
https://github.com/eugenia1984/reactjs-build-a-food-managing-app

react reactjs reactjs-components

Last synced: about 2 months ago
JSON representation

An Udemy React course to build a Food managing app

• Host: GitHub
• URL: https://github.com/eugenia1984/reactjs-build-a-food-managing-app
• Owner: eugenia1984
• Created: 2023-01-09T12:55:11.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2023-10-24T14:03:56.000Z (about 1 year ago)
• Last Synced: 2023-10-24T15:25:55.983Z (about 1 year ago)
• Topics: react, reactjs, reactjs-components
• Language: JavaScript
• Homepage:
• Size: 336 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
#  React JS Crash Course 2023 - Build A Food Managing App 

 (Udemy course)

---

## :book: ¿ Que hay en este curso?

Este curso enseña los conceptos de React, desde las bases, paso a paso.

### :star: ¿Qué se verá?

- Core basics: cómo funciona el **State**(estado) en React, cómo trabajar con los **métodos del ciclos de vida**.

- **Componentes Funcionales**

- **Props**(propiedades) y **state**(estados) 

- **Handle events**(manejadores de eventos)

- Traer data de APIS (fetch)

- Renderizar **listas** y **keys** (llaves)

- Qué es **useState**  y cómo manejar el state en un componente funcional.

- Hook **useEffect** y manejar efectos secundarios en componentes funcionales.

- Hook **useContext** y el manejo global del estado

- Hook **useReducer** y manejo complejo del estado

- Implementar una aplicación de comida de React desde cero

- Deployar la aplicación en **FireBase**

---

## ¿ Qué se crea? 

![image](https://user-images.githubusercontent.com/72580574/211315037-a5b6c8c8-a7a8-4536-881f-2449b84f8ab5.png)

- Se puede cambiar el tema (**light** / **dark**), para ver **context**, como crear /proveer / utilizar un contexto y el hook **useContext**. 

- Un buscador, que al tipear se busca una comida. En esta sección vemos **state** y el hook **useState** . Y al hacer click en el botón de buscar se hace **llamado a una API**, por lo que se ve como mostrar **loading state**.

- Una vez que está la bússqueda se ve una **lista** de **cards** y se ven las **props**(para pasar data del componente padre al componente hijo), también veo cómo se compunica el componente hijo con el componente padre.

- Hay un botón de **agregar a favoritos**, para lo que quedará guardado en el **local Storage** y se ve **useEffect** para manejar efectos secundarios.

- Una vez que se tiene cards en la parte de favoritos habrá otro recuadro de búsqueda y se ve el hook **useReducer** que se utiliza para manejar distintos estados de state complejos.

- La lista de las recetas que falten.

- **useCallBack** y **useMemo** para mejorar la performance de la aplicación

![image](https://user-images.githubusercontent.com/72580574/212095758-f2e6dd7b-8b36-48eb-a46e-3111ab57a819.png)

---

## Tecnologías 

-   [**React**](https://beta.reactjs.org/)

- [**Spoonacular API**](https://spoonacular.com/food-api)

- [**Firebase**](https://firebase.google.com/)

---

Seguime en: [LinkedIn - maria-eugenia-costa](https://www.linkedin.com/in/maria-eugenia-costa/)

---