Introducción al curso avanzado de React

1

Qué necesitas para este curso y qué aprenderás sobre React.js

2

Proyecto y tecnologías que usaremos

Preparando el entorno de desarrollo

3

Clonando el repositorio e instalando Webpack

4

Instalación de React y Babel

5

Zeit es ahora Vercel

6

Linter, extensiones y deploy con Now

Creando la interfaz con styled-components

7

¿Qué es CSS-in-JS?

8

Creando nuestro primer componente: Category

9

Creando ListOfCategories y estilos globales

10

Usar información real de las categorías

11

Creando PhotoCard y usando react-icon

12

SVGR: de SVG a componente de ReactJS

13

Creando animaciones con keyframes

Hooks

14

¿Qué son los Hooks?

15

useEffect: limpiando eventos

16

useCategoriesData

17

Usando Intersection Observer

18

Uso de polyfill de Intersection Observer e imports dinámicos

19

Usando el localStorage para guardar los likes

20

Custom Hooks: useNearScreen y useLocalStorage

GraphQL y React Apollo

21

¿Qué es GraphQL y React Apollo? Inicializando React Apollo Client y primer HoC

22

Parámetros para un query con GraphQL

23

Usar render Props para recuperar una foto

24

Refactorizando y usando variables de loading y error

25

Usando las mutaciones con los likes

Reach Router

26

¿Qué es Reach Router? Creando la ruta Home

27

Usando Link para evitar recargar la página

28

Creando la página Detail

29

Agregando un NavBar a nuestra app

30

Estilando las páginas activas

31

Rutas protegidas

Gestión del usuario

32

Introducción a React.Context

33

Creación del componente UserForm; y Hook useInputValue

34

Estilando el formulario

35

Mutaciones para registro

36

Controlar estado de carga y error al registrar un usuario

37

Mutaciones para iniciar sesión

38

Persistiendo datos en Session Storage

39

Hacer like como usuario registrado

40

Mostrar favoritos y solucionar fetch policy

41

Cerrar sesión

Mejores prácticas, SEO y recomendaciones

42

Últimos retoques a las rutas de nuestra aplicación

43

React Helmet

44

Midiendo el performance de nuestra app y usando React.memo()

45

React.lazy() y componente Suspense

46

Usando PropTypes para validar las props

47

PWA: generando el manifest

48

PWA: soporte offline

49

Testing con Cypress

Conclusiones

50

¡Felicidades!

Curso de React Avanzado

Curso de React Avanzado

Miguel Ángel Durán

Miguel Ángel Durán

Linter, extensiones y deploy con Now

6/50
Recursos
Transcripción

En esta clase haremos que el desarrollo sea más ágil y correcto siguiendo los siguientes pasos:

  • Vamos a instalar StandardJS como dependencia de desarrollo con: npm i standard --save-dev. StandardJS nos va a servir de Linter para una mejor escritura de JavaScript/React.
  • Agregaremos un nuevo script en nuestro package.json: ""lint"": ""standard"".
  • Ahora vamos a ignorar aquellos archivos que no queremos que el Linter arregle, añadiremos en nuestro package.json lo siguiente:
""standard"": [
	""ignore"": [
		""/api/**""
	]
]
  • Ahora, queremos que nuestro Linter nos detecte los errores a medida que vamos escribiendo, para hacer esto añadimos lo siguiente a nuestro package.json:
""eslintConfig"": {
	""extends"": [
		""./node_modules/standard/eslintrc.json""
	]
}
  • Ahora debemos tener lo siguiente en nuestro editor de código para que funcione todo al pie de la letra:
    • Tener instalada la extensión ESLint
    • Si quieres que al guardar los cambios se formatee tu código deberás tener instalada la extensión Prettier
    • Tener las siguientes configuraciones en VSCode:
      • Format On Save: false
      • Prettier: Eslint Integration: true
      • Eslint: Auto Fix On Save: true
  • Ahora utilizaremos Now para hacer el deploy de nuestro proyecto.
  • Descargaremos e instalaremos Now para que nos registre de una manera mucho más fácil los tokens de acceso y podamos continuar con el curso.
  • Entraremos a la carpeta de api y notaremos que ya tiene un archivo now.json que preparamos para ti con toda la configuración necesaria para hacer el deploy.
  • Para desplegar el proyecto del backend haremos lo siguiente en nuestra terminar:
    • cd api
    • Cambiamos el name de la aplicación en el now.json
    • Finalmente ejecutamos now
  • Ahora para desplegar nuestro front haremos lo siguiente:
    • Crearemos un archivo now.json en el root de nuestro proyecto con lo siguiente:
{
	""version"": 2,
	""name"": ""petgram"",
	""builds"": [
		{
			""use"": ""@now/static-build"",
			""src"": ""package.json""
		}
	],
	""routes"": [
		{
			""src"": ""(.*).js"",
			""dest"": ""/$1.js""
		},
		{
			""src"": ""(.*).json"",
			""dest"": ""/$1.json""
		},
		{
			""src"": ""/.*"",
			""dest"": ""index.html""
		}
	]
}
  • En nuestro package.json añadiremos el siguiente script: ""now-build"": ""npm run build"".
  • Finalmente en la raíz de nuestro proyecto ejecutaremos now para que nos dé una URL en la que se verá nuestro proyecto."

Aportes 194

Preguntas 24

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Seria bueno que actualizarán este video. Now ya no es now ahora es vercel y tiene algunas diferencias, puede llegar a ser confuso. En todo caso lo que deben hacer es:

  1. Instalar vercel a traves del comando npm i -g vercel
  2. Despues de instalar vercel deben hacer vercel login y verificar su correo electronico, para que la instancia de versel local este conectada con el remoto y de esta forma evitar los tokens.
  3. Luego si realizar los pasos que dice el profe, pero con la difencia que el comando no es now, es vercel

Si tienen muchos errores y desean corregirlos les recomiendo agregar esta configuración al package.json
"lint": “standard”,
“lint-fix”: “standard --fix”

Y ejecutan:
npm run lint-fix

Para los que tiene problemas al hacer deploy de la app les dejo el repositorio configurado para vercel CLICK AQUÍ, Clonen o descarguen el repositorio, luego ejecutan el comando vercel

$ vercel

Les saldran una serie de preguntas

? Set up and deploy “~\Downloads\react-vercel-master”? [Y/n] y (Presionan y)
? Which scope do you want to deploy to? [nick de vercel] (Presionan Enter)
? Link to existing project? [y/N] (Presionan n)
? What’s your project’s name? petgram-vercel (Presionan Enter)
? In which directory is your code located? ./ (Presionan Enter)

Al terminar saldria algo así

❗️  The `name` property in vercel.json is deprecated (https://vercel.link/name-prop)
�  Linked to cavesa/petgram-vercel (created .vercel)
�  Inspect: https://vercel.com/cavesa/petgram-vercel/n93wwp0u1 [3s]
✅  Production: https://petgram-vercel.vercel.app [copied to clipboard] [25s]
�  Deployed to production. Run `vercel --prod` to overwrite later (https://vercel.link/2F).
�  To change the domain or build command, go to https://vercel.com/cavesa/petgram-vercel/settings

Para el deploy en produccion debemos cambiar el output directory: para ellos nos vamos a vercel, buscamos el proyecto y luego en settings, habilitamos el output directory y escribimos dist le damos en el botón SAVE. Luego hacemos el siguiente codigo:

Luego hacemos el siguiente codigo:

$ vercel --prod

Fin

Hola, la integracion de Prettier con Eslint del minuto 05:10 Ya no aparece en las nuevas actualizaciones de VSCode.

En cambio se hace anexando al settings.json lo siguiente

 // Configuraciones para integrar ESLint, prettier y vscode
    "editor.formatOnSave": true,
    // Colocar Off el format de JS y JSX, para poder hacerlo via Eslint
    "[javascript]": {
        "editor.formatOnSave": false
    },
    "[javascriptreact]": {
        "editor.formatOnSave": false
    },
    // Esto le dice al plugin de ESLint que cualquier lint se ejecute al salvar. 
    "editor.codeActionsOnSave": {
        "source.fixAll": true
    },
    // Adicional, PERO MEGA IMPORTANTE... si tienes prettier como extension, debes apagarlo para js y jsx pq esto se hara a traves del eslint
    "prettier.disableLanguages": [
        "javascript",
        "javascriptreact"
    ]

Cada linea fue comentada para explicar su funcion,
BTW, no me acostumbro a no usar el semicolon o punto y coma. Para aquellos que tambien se sienten asi, puede instalar la version semistandard en vez de a standar

npm i semistandard --save-dev

Lo siento @midudev , lo intente pero no me acostumbro

Si alguno tuvo inconvenientes en VSCode con la siguiente validación

  • Format On Save: false
  • Prettier: Eslint Integration: true
  • Eslint: Auto Fix On Save: true

Instalé las dependencias de desarrollo

npm i prettier eslint-config-prettier eslint-plugin-prettier -D

Y configure manualmente en Open Settings (settings.json) ubicado en la parte superior derecha del editor (Tiene forma de {} o como un archivo" y revisan si su archivo de configuración tiene las siguiente lineas y sino las insertan

"editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
      }
"eslint.format.enable": true,
"prettier.eslintIntegration": true,

eslint.autofixonsave: true esta obsoleto por eso debe reemplazarse con editor.codeActionsOnSave

Si no tienen tiempo o recursos para actualizar un curso entero, deberian de bolverlos mas modulares, y las secciones donde cambien algunos temas o implementaciones, solo lo re-graba alguien que sepa del tema y listo, asi te evitas tener que cambiar un curso entero cuando solo han cambiado algunos temas.

DEPLOY A VERCEL(NOW) 2021

  • Realice un tutorial de como hay que hacer deploy A vercel(antes llamado now).
    tutorial

Ha sido más el tiempo perdido buscando como funcione vercel, y los parámetros a configurar que el tiempo que dura el curso. Mala experiencia.

También podemos poner este comando para que lo arregle automaticamente:

npm run lint -- --fix

WOW despues de mucho intentarlo lo logre!
Si tienen este error:
Error! No Output Directory named “public” found after the Build completed. You can configure the Output Directory in your Project Settings.
Deben ir a la pagina de Zeit, ingresan a su projecto, luego van a settings y en Build & Development Settings cambian el output directory de public a dist que es la carpeta que nos crea webpack!
https://vercel.link/missing-public-directory
espero les sirva!

Bueno nada mejor que sentarse en la mañana un sábado con un tasa de café y estudiar!!! Excelente clase.

Platzi cuando piensan actualizar este curso?

En el archivo now.json (aunque pueden cambiarle el nombre a vercel.json para mayor claridad) la propiedad name ya esta obsoleta en la configuración oficial de Vercel (https://vercel.com/docs/configuration#project/name), por lo tanto puede que les dé una advertencia cuando están haciendo el deploy. Pueden borrar sin ningun problema esa propiedad del archivo json, solo dejando la del alias y ya no les mostrar ninguna advertencia y les compilará correctamente

Para los que utilizan los punto y coma, la version standard les va a mostrar errores en los semicolon, pueden utilizar semistandard, la configuracion es cambiar standard por semistandard

npm i -D semistandard

Para la parte de Vercel en 2022 haremos lo siguiente:

  • Ahora utilizaremos Servel para hacer el deploy de nuestro proyecto.
  • Descargaremos e instalaremos vercel para que nos registre de una manera mucho más fácil los tokens de acceso y podamos continuar con el curso.
  • Entraremos a la carpeta de api y notaremos que ya tiene un archivo now.json que preparamos para ti con toda la configuración necesaria para hacer el deploy.
  • Instalar vercel a traves del comando npm i -g vercel
  • Despues de instalar vercel deben hacer vercel login y verificar su correo electronico, para que la instancia de versel local este conectada con el remoto y de esta forma evitar los tokens.
  • Para desplegar el proyecto del backend haremos lo siguiente en nuestra terminar:
    • cd api
    • Cambiamos el name de la aplicación en el vercel.json
    • Finalmente ejecutamos vercel
{
  "version": 2,
  "name": "petgram-server-max",
  "alias": ["petgram-api-zenaku"],
  "builds": [{ "src": "index.js", "use": "@now/node" }],
  "routes": [{
    "headers": {
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS",
        "Access-Control-Allow-Headers": "X-Requested-With, Content-Type, Accept"
    },
    "src": "/.*", "dest": "index.js" }
  ]
}

  • Ahora para desplegar nuestro front haremos lo siguiente:
    • Crearemos un archivo versel.json en el root de nuestro proyecto con lo siguiente:
{
    "version": 2,
    "name": "petgram-zenaku",
    "builds": [
        {
            "use": "@versel/static-build",
            "src": "package.json"
        }
    ],
    "routes": [
        {
            "src": "(.*).js",
            "dest": "/$1.js"
        },
        {
            "src": "(.*).json",
            "dest": "/$1.json"
        },
        {
            "src": "/.*",
            "dest": "index.html"
        }
    ]
}


  • En nuestro package.json añadiremos el siguiente script: ““versel-build””: ““npm run build””.
  • Finalmente en la raíz de nuestro proyecto ejecutaremos servel para que nos dé una URL en la que se verá nuestro proyecto."

Extra:
Para el deploy en produccion debemos cambiar el output directory: para ellos nos vamos a vercel, buscamos el proyecto y luego en settings, habilitamos el output directory y escribimos dist le damos en el botón SAVE. Luego hacemos el siguiente codigo:

$ vercel --prod

Este video es un filtro, aquí es donde demuestras si eres digno o no. XD

Yo pude correr el comando de vercel sin el script de “now-build” y funcionó bien. Imagino que es por la versión.

Tengo el mismo mensaje de error:
platzi/curso-platzi-react-avanzado/src/index.js:4:34: Parsing error: Unexpected token /

Zeit ya no tiene la app para desktop en su pagina pq no daran mas soporte, pero se consigue full operativa en el siguiente repo https://github.com/zeit/now-desktop/releases/

instale now con la linea de comandos
$npm install -g now

Me parece que está parte del linter se la deberían ahorrar. Sé que se intenta ensañar a estandarizar código, pero el curso es de react, no de linter y en la mayoría de los casos no funcionan las herramientas. O al menos en mi caso he perdido un montón de tiempo en algo que no es de mi interés

super facil el deploy en now

Looks like something went wrong!
We track these errors automatically, but if the problem persists feel free to contact us. In the meantime, try refreshing.

Estoy teniendo ese error al querer installar Now CLI, intenté usando brew y tambien clonando el repo y siempre me responde con error 500, alguien más tiene ese error?

standard: Use JavaScript Standard Style (https://standardjs.com)
/var/www/html/curso-platzi-react-avanzado/src/index.js:4:53: Parsing error: Unexpected token /

Ni idea del por qué ocurre eso, me percaté de que mis archivos index.js, webpack.config. y los json estuviesen igual… no he avanzado a raíz de ello.

Por alguna razón, el linter me esta avisando de que la linea: ReactDOM.render(<h1>Hello</h1>, document.getElementById(‘app’)) tiene un error en el h1 de cierre, el error es el siguiente:
Parsing error: Unexpected token /

Y la integracion de prettier con eslint ahora parece que esta desfasada y no aparece.
https://github.com/prettier/prettier-vscode#vscode-eslint-and-tslint-integration

Como lo habeis solucionado?

Gracias.

aqui mi deploy (https://petgram.monserrateluisje.now.sh/). genial el curso, el profesor se toma el tiempo de explicarnos la función de cada herramienta, espero siga asi!

Estoy utilizando visual studio code version 1.40 y no encuentro la opcion de configuracion de prettier: Eslint integration ¿Alguien mas con el mismo problema?

Los errores de lint se arreglan con el comando

npx standard --fix

se corrigen facil.

Para hacer el deploy pueden hacer lo siguiente:
1.- npm i -g vercel
2.- vercel login
2.1.- Hacer el login a vercel
3.-vercel
3.- y, enter, name of project, enter

Esta clase debe de actualizarse…

El curso está demasiado desactualizado, muy mal platzi!, que decepción, esto tendré que compartirlo en mis redes sociales

Cuando hago el NOW de Api me sale solo esto en el navegador del backend
Cannot GET /

OCTUBRE 2020

En mi caso no genere el archivo vercel.json para el frontend.

1-Parada en la raiz del proyecto hice el login

versel login 

2- Subi el proyecto

versel --prod

3- Me fui a las “Setting” y configure la carpeta donde webpack deja nuestro proyecto dist/

2- Actualice el proyecto

versel --prod

Tardo aprox 1min y listo quedo funcionando 😄

Mas info:
https://vercel.com/guides/upgrade-to-zero-configuration

Un profesor a la altura del nivel avanzado

Excelente, explicación muy rápida y sencilla para la configuración de webpack, babel y el linter.

esto cada vez se pone mejor

https://petgram-chi-three.now.sh/

les comparto mi url

Estos dos primero modulos van volando pero con mucha información nueva para mi ! 🙌🏻

https://aomine-petgram-platzi.aomine1745.now.sh/

Sin ningún problema 😄

Yo no tuve la misma suerte para hacer el deploy con now, me salió el siguiente error:

> Error! An unexpected error occurred!
  TypeError: e.ref is not a function
    at f.ref (C:\Users\diegoa\AppData\Roaming\npm\node_modules\now\dist\index.js:2:315087)
    at H2Context.getOrCreateHttp2 (C:\Users\diegoa\AppData\Roaming\npm\node_modules\now\dist\index.js:2:312648)
    at Context.getOrCreateHttp2 (C:\Users\diegoa\AppData\Roaming\npm\node_modules\now\dist\index.js:2:1418363)
    at Context.getHttp2 (C:\Users\diegoa\AppData\Roaming\npm\node_modules\now\dist\index.js:2:1418588)
    at Object.get (C:\Users\diegoa\AppData\Roaming\npm\node_modules\now\dist\index.js:2:1417129)
    at fetchImpl (C:\Users\diegoa\AppData\Roaming\npm\node_modules\now\dist\index.js:2:3770550)
    at <anonymous> TypeError: e.ref is not a function
    at f.ref (C:\Users\diegoa\AppData\Roaming\npm\node_modules\now\dist\index.js:2:315087)
    at H2Context.getOrCreateHttp2 (C:\Users\diegoa\AppData\Roaming\npm\node_modules\now\dist\index.js:2:312648)
    at Context.getOrCreateHttp2 (C:\Users\diegoa\AppData\Roaming\npm\node_modules\now\dist\index.js:2:1418363)
    at Context.getHttp2 (C:\Users\diegoa\AppData\Roaming\npm\node_modules\now\dist\index.js:2:1418588)
    at Object.get (C:\Users\diegoa\AppData\Roaming\npm\node_modules\now\dist\index.js:2:1417129)
    at fetchImpl (C:\Users\diegoa\AppData\Roaming\npm\node_modules\now\dist\index.js:2:3770550)
    at <anonymous>

Este error ocurre por la versión de Node que tenemos, en mi caso era la 8.9.4 y now necesita la versión 8.10 o superior, así que la solución es obvia, actualizar nuestro node a una versión superior.

https://zeit.co/docs/builders#official-builders/static-builds/static-build-project-node-js-version

https://inspetgram-60ot9bvl5.now.sh

a mi me sale este error

standard: Use JavaScript Standard Style (https://standardjs.com)
/Users/Adranuz/Documents/proyectos/react/Petgram/src/index.js:1:8: ‘React’ is defined but never used.

Wow este curso cada vez me emociona más! 😄
petgram-fad.now.sh

como es que instalo now para que aparezca en la barra de mac ? en la sección de download solo aparece la instalación de un paquete con npm i -g now y nada mas.

Vamos a instalar StandardJS como dependencia de desarrollo con: npm i standard --save-dev. StandardJS nos va a servir de Linter para una mejor escritura de JavaScript/React.
Agregaremos un nuevo script en nuestro package.json: ““lint””: ““standard””.
Ahora vamos a ignorar aquellos archivos que no queremos que el Linter arregle, añadiremos en nuestro package.json lo siguiente:
"“standard”": [
"“ignore”": [
""/api/**""
]
]

hora para desplegar nuestro front haremos lo siguiente:
Crearemos un archivo now.json en el root de nuestro proyecto con lo siguiente:
{
"“version”": 2,
"“name”": ““petgram””,
"“builds”": [
{
"“use”": “”@now/static-build"",
"“src”": ““package.json””
}
],
"“routes”": [
{
"“src”": “”(.).js"",
"“dest”": “”/$1.js""
},
{
"“src”": “”(.
).json"",
"“dest”": “”/$1.json""
},
{
"“src”": “”/.*"",
"“dest”": ““index.html””
}
]
}
En nuestro package.json añadiremos el siguiente script: ““now-build””: ““npm run build””.
Finalmente en la raíz de nuestro proyecto ejecutaremos now para que nos dé una URL en la que se verá nuestro proyecto."

Ahora, queremos que nuestro Linter nos detecte los errores a medida que vamos escribiendo, para hacer esto añadimos lo siguiente a nuestro package.json:
"“eslintConfig”": {
"“extends”": [
""./node_modules/standard/eslintrc.json""
]
}

Ahora debemos tener lo siguiente en nuestro editor de código para que funcione todo al pie de la letra:
Tener instalada la extensión ESLint
Si quieres que al guardar los cambios se formatee tu código deberás tener instalada la extensión Prettier
Tener las siguientes configuraciones en VSCode:
Format On Save: false
Prettier: Eslint Integration: true
Eslint: Auto Fix On Save: true
Ahora utilizaremos Now para hacer el deploy de nuestro proyecto.
Descargaremos e instalaremos Now para que nos registre de una manera mucho más fácil los tokens de acceso y podamos continuar con el curso.
Entraremos a la carpeta de api y notaremos que ya tiene un archivo now.json que preparamos para ti con toda la configuración necesaria para hacer el deploy.
Para desplegar el proyecto del backend haremos lo siguiente en nuestra terminar:
cd api
Cambiamos el name de la aplicación en el now.json
Finalmente ejecutamos now

Si no les corre el vercel login o cualquier otro comando de vercel, te puede aparecer algo asi como no detectamos el comando vercel tienes que seguir estos pasos, en mi caso ubuntu: link directo 100% real no fake xD

Deployar == Desplegar

Deberían de actualizar este proyecto. Hay mucho contenido antiguado.

Les comparto mi link

Cambiar a todo que dice now a vercel

cambio en api y en proyecto de react
now.json a vercel.json

cambio en api/now.json a vercel.json
@now/node a @vercel/node

cambio en proyectoreact/now.json a vercel.json
@now/static-build a @vercel/static-build

post deplay con vercel
https://malcode.dev/posts/deploy-react-app-en-vercel/

Si les aparece este error

vercel : Cannot load file npm\vercel.ps1 because running
scripts is disabled on this system.
()

Solo tienen que habilitar las scripts en la PowerShell.
1-) Abre PowerShell como Administrador y ejecuta este comando:

Get-ExecutionPolicy

Te aparecerá <<Restricted>>
Luego ejecutas

Set-ExecutionPolicy Unrestricted

Y respondes Si.
Y para volver a deshabilitar los scrips solo ejecutas

Set-ExecutionPolicy restricted

Les comparto mi link

Inconcluso

Me interesa el curso que recomienda pero veo que no está disponible.

https://platzi.com/clases/deploy-now/

Para arreglar el lint, es mejor usar el comando

standard --fix

Sino te puedes volver loco

Sería bueno que actualicen este curso, porfavor. Gracias

https://petgram-js14.vercel.app/

Listo es solo cuestion de hacer como decia el articulo anterior, cambiar donde dice now por vercel y funciona.

Me encanta que expliquen paso a paso esto sirve muchisimo, sin embargo prefieron netlify,subis el repo a github y lo conectas!

Lo logré. No sé cómo, pero lo logré.
Es necesario que actualicen este curso si van a seguir utilizando recursos desactualizados, o al menos dejar una guía clara , no nada más decir “zeit ahora es vercel, bye”.

Aqui la url de mi deploy!! 😄
https://petgram-paolo.vercel.app/

Hay muchas configuraciones que Vercel solicita y que no aparecen en video… Creo que debería dedicarse un video para actualizar el tema de Now y mostrar cómo debe configurarse

Hola people este es mi repositorio, copien y peguen todo si quieren el deploy lo hice desde la pagina, despues de montar el repositorio en github en lapagina de vercel busque como hacer un deploy sencillo y asi me dio.

https://github.com/jgestradam/petgram/tree/24a461681f9dcd83b0557d8950d4396e7001d312

Actualmente es vercel, aquí más info:
https://vercel.com/cli

Para los que tengan problemas con el eslint + prettier

{
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": false,
    "editor.formatOnPaste": false,
    "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
     }
}

en lo personal platzi me ha ayudado mucho, lo poco que se de la programación es gracias a esta plataforma , pero considero que realmente no esta bien y no es nada agradable meterte a los cursos y tratar de realizar el proyecto de cada uno y mientras sigues los pasos del maestro todo te va saliendo mal , no por que el maestro no sepa si no por que son cursos muy viejos que no actualizan deberían hacerlo por que muchos comandos ni siquiera son los mismos y eso hace que te sientas frustrado de no poder avanzar, en vez de estar sacando cursos nuevos actualicen los que ya están que son de gran ayuda.

webpack-cli] Error: Cannot find module Html-webpack-plugin
Nunca desplegó el servidor en vercel

v

Esta clase esta genial pero debemos tener encuenta el cambio de now a vercel

Solicito su ayuda, se me presenta el siguiente error:

_> Error! Build failed

Error! Check your logs at https://curso-platzi-react-avanzado-e2nwrlpv4.now.sh/logs or run now logs curso-platzi-react-avanzado-e2nwrlpv4.now.sh

…revisando el log:
_ Error: Build was unable to create the distDir: “public”.
More details: https://zeit.co/docs/v2/advanced/platform/frequently-asked-questions#missing-public-directory_

… revisando las “frequently-asked-questions#missing-public-directory”, me dice que debería poner el el package.json algo como:
_ {
“scripts”: {
“build”: “my-framework build --output public”
}
}_

… y no se como aplicar esta sujerencia, considerando además Miguel no configuró asi su archivo… será que es porque estoy usando en windows?

Por fin, des pues de muchos intentos y de leer mucha documentación
Aprende a pronunciar
por que tuve muchos errores, he logrado que compile todo, he dejado mi URL.

Acerca de now

Magnificas herramientas para tener tus proyectos.

Qué genial el prettier con ESLint standard!

Petgram

Es decir que para una pagina que hace llamadas a una api estaríamos usando dos espacios en el servidor?? vamos a llamar a la api con el link que nos da después de correr now dentro de la carpeta api?

Me costo algo de trabajo instalar _Now _en ubuntu (WSL). Pero aqui esta mi sitio.
https://petgram.alonsod.now.sh/

fue un poco tedioso pero aqui os dejo mi app desplegada :
https://petgram-vkd.kevindz10.now.sh/

esta es mi url https://petgram.byronescobar593.now.sh/ , hasta ahora va viento en popa jeje

conclusión: instalamos sudo npm i -g vercel , nos logueamos vercel login, y añadimos los vercel.json al api y al front para subir el back lo del script no hace falta

¿Si a mí me gustan los puntos y comas al final qué linter puedo usar?
Es que he notado que en algunas partes sigue siendo obligatorio escribir con puntos y comas como en el editor online de Dialogflow y por eso tengo como costumbre ser estricto en el uso de punto y coma y es incómodo que me salgan errores por eso.

Me sale el siguiente error al momento de correr el comando now dentro de mi terminal y dentro de la carpeta api.

ya corrí el comando npm i -g now, y aun asi no entiendo cual es el problema.

Agradezco toda la ayuda brindada