Crea una cuenta o inicia sesi贸n

隆Contin煤a aprendiendo sin ning煤n costo! 脷nete y comienza a potenciar tu carrera

Compra acceso a todo Platzi por 1 a帽o

Antes: $249

Currency
$209/a帽o

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Suscr铆bete

Termina en:

16D
4H
0M
35S

El proyecto

3/16
Recursos

Nuestro proyecto ser谩 Platzi Recetas: una PWA para ver recetas que utiliza la API de TheMealDB.
Solamente usaremos React, generado por Create React App, junto con React Router.

Aportes 19

Preguntas 9

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Les comparto el repo del curso pero con la adaptacion a hooks y usando componentes funcionales por si gustan usarlo.

Github Repo

Hola camaradas, me encuentro en el 18 de 04 de2022, y si se encuentran perdidos realicen estas acciones:

const baseUrl = "https://www.themealdb.com/api/json/v2/1";

async function getLatest() {
  const request = await fetch(`${baseUrl}/search.php?f=b`);
  const data    = await request.json()
  const recipes = data.meals.map((m) => normalizeMeal(m))
  return recipes
}

async function getRecipe(recipeId) {
  const request = await fetch(`${baseUrl}/lookup.php?i=${recipeId}`)
  const data    = await request.json()
  if( ! data.meals ) return null
  const recipe  = normalizeMeal(data.meals.shift())

  return recipe
}

Listo, ahora ya pueden mandar el comando: npm run dev

nunca me a gustado usar
create-react-app
se me hace muy chafa

El instructor podr铆a haber indicado que debemos descargar el proyecto y no estar adivinando de d贸nde se deben descargar los recursos.

Estuve viendo el proyecto y parece que la API cambi贸. Ahora para obtener las 煤ltimas recetas debemos tener cuenta de Patreon y donar.

Para que siga funcionando el proyecto hice este cambio, haciendo la petici贸n a otra URL:

// mealdb-api.js

async function getLatest() {
  const request = await fetch(`${baseUrl}/random.php`); // ya no latest.php
  ...
}

Esto me trae una receta aleatoria (pero solo una). Si alguien encuentra una mejor alternativa avisa:

hola si de pronto a algunos les da problemas abrir el proyecto aqu铆 algunas cosas que a mi me funcionaron:

primero instalar el isomorphic-fetch con este comando

npm i isomorphic-fetch 

luego buscar actualizaciones con

npx npm-check-updates -u

instalar las actualizaciones con

npm install 

y para abrirlo no usar npm run start o npm start sino

npm run dev 

ahora si al abrir el proyecto en el navegador no se ven las recetas, deben de ir a mealdb-api.js y cambiar la baseUrl y el request de la funcion getLatest con

const baseUrl = "https://www.themealdb.com/api/json/v1/1"; 
const request = await fetch(`${baseUrl}/search.php?f=b`);

Hola, con cambios en 20-12-2022 tengo el proyecto corriendo. Podr铆a clonar desde: https://github.com/Eddy-Huaylla/platzi-react-pwa

pueden usar este recurso para iniciar su proyecto como PWA 馃馃馃:

https://create-react-app.dev/docs/making-a-progressive-web-app/

Hola, tengo una pregunta, como tal el curso no est谩 orientado a hacer la app desde 0 sino a pasar una app ya creada a una PWA?

pero para el SEO no seria NEXT con PWA porque solo react puro 驴?

como dicen los compa帽eros ya el API de themealdb cambio as铆 que cambien en mealdb-api.js
la parte del fetch de 鈥/latest.php鈥 a 鈥渟earch.php?f=c鈥

si desean bastantes recetas con la letra c o la s

Yo descargu茅 esto inicial de la secci贸n de archivos

Alguien sabe qu茅 extensi贸n usa el profesor para que el logo del archivo en VSC sea el logo de react para los archivos react aunque s贸lo terminen en.js ?

no me queda claro una cosa, 驴el proyecto este de las 鈥渞ecetas鈥 se realiza en alg煤n curso o est谩 hecho exclusivamente para el curso y nos delegan la responsabilidad de conocerlo cual construcci贸n propia? 驴es un proyecto de solo react, react router, hntml y css b谩sico o tiene a su vez c贸digo ya enfocado en la realizaci贸n de una pwa?

Es posible incluir/usar expo en esta PWA ?

Alguien mas tuvo este error al intentar correr el proyecto despu茅s de descargarlo?
SyntaxError: Unexpected token < in JSON at position 0

Me da ese error en consola, esta relacionado con el archivo recetas/src/mealdb-api.js

Esto fue despu茅s de usar npm install y luego 鈥榥pm run dev鈥, carga el sitio, pero vaci贸 y en consola veo el error que describ铆 arriba

Odio ver como se usaba react antes, con clases y cuando los hooks y redux era inexistente, pero por lo menos no tengo que hacer ese c贸digo y solo preocuparme por la PWA ! ( eso espero )

h