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!

No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

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

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 205

Preguntas 29

Ordenar por:

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

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": 鈥渟tandard鈥,
鈥渓int-fix鈥: 鈥渟tandard --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鈥檚 your project鈥檚 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

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.

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.

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

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: 鈥溾渧ersel-build鈥濃: 鈥溾渘pm 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

Platzi cuando piensan actualizar este curso?

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 鈥減ublic鈥 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!

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

Bueno nada mejor que sentarse en la ma帽ana un s谩bado con un tasa de caf茅 y estudiar!!! Excelente clase.

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

2023:

Sigan estos pasos:
https://platzi.com/tutoriales/1601-react-avanzado/11554-deploy-a-vercel-2021/

Hay que actualizar el bcrypt al m谩s nuevo, en mi caso me funcion贸 desinstalar y volver a instalar ya que al actualizar no me dejaba, esta actualizaci贸n se hace dentro de api.

Con eso me dejo hacer deploy.

Si bien es cierto que podemos dar nosotros mismo con las soluciones. Lo ideal ser铆a actualizar el curso completo de react avanzado鈥 ademas de todo el material anticuado, considero que react 18 ha propuesto nuevas cosas que deber铆an estar en este curso.

Los errores de lint se arreglan con el comando

npx standard --fix

se corrigen facil.

El curso est谩 demasiado desactualizado, muy mal platzi!, que decepci贸n, esto tendr茅 que compartirlo en mis redes sociales

Yo pude correr el comando de vercel sin el script de 鈥渘ow-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

Hay muchos estudiantes que se ofenden por exigir que los cursos se actualicen, es incre铆ble que por un curso por el que estas pagando te digan 鈥渃ambia Now por Vercel y listo鈥, cuando para nada es as铆 de sencillo, si yo tuviera el tiempo de investigar todo esto, no pagar铆a Platzi, no es queja, es exigir lo que pagas, es cuesti贸n b谩sica de inversi贸n, no se necesita un curso para entender eso. Muy mala experiencia este curso, tendr茅 que buscar en otras plataformas o esperar a que actualicen este curso.

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

Esta clase debe de actualizarse鈥

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(鈥榓pp鈥)) 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?

Vamos gente estoy en el 2023 viendo el ultimo curso que podre ver jaja pero no se rindan vale la pena tener errores y poder corregirlos, vale la pena, por algo somos desarrolladores, esto es la vida real pasa a menudo

He visto que la mayor铆a hemos tenido problemas con la actualizaci贸n que se realiz贸 de Zenit a Vercel realizando el curso en el 2023. (Esto me funciono y espero les pueda servir a los que tienen el mismo error).

Al realizar esta configuraci贸n y ejecutar el comando vercel en la ra铆z api que se facilita en el curso me encontr茅 con el siguiente error:

Revisando el package.json del api pude observar que se ten铆a configurado el siguiente script 鈥渄ev:api鈥:

Ejecut谩ndolo me mostro el error especifico y es el uso de jwt de express-jwt en el archivo index.js del api.
Remplace la dependencia jwt que se ve en el archivo por expressjwt y adicional a eso agregue el siguiente par谩metro a la funci贸n de remplazo del jwt: algorithms: [鈥淩S256鈥漖.

Un paso a paso para corregir el error seria el siguiente:

  1. Modificar dependencia jwt por expressjwt en el archivo index.js en la ra铆z del api.
const jwt = require("express-jwt");

por:

const { expressjwt } = require("express-jwt");
  1. Modificar la funci贸n jwt por expressjwt.
const auth = expressjwt({
  secret: process.env.JWT_SECRET,
  credentialsRequired: false,
});
  1. Adicionar como par谩metro algorithms: [鈥淩S256鈥漖 dentro de la funci贸n.
const auth = expressjwt({
  secret: process.env.JWT_SECRET,
  credentialsRequired: false,
  algorithms: ["RS256"],
});
  1. Ejecutar comando dev:api para validar funcionamiento. Si este se ejecuta correctamente podemos ingresar a graphql y tambien ejecutar el comando vercel (este arrojara la url para acceder al api y podremos consultar con las url configuradas previamente):

Ejemplo: https://petgram-server- 鈥----------鈥.vercel.app/categories

Espero pueda ser de ayuda a los que tienen este mismo problema.

Saludos.

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.

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

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 鈥渮eit ahora es vercel, bye鈥.

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

Inconcluso

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

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 鈥淪etting鈥 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 ! 馃檶馃徎

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: 鈥楻eact鈥 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: 鈥溾渓int鈥濃: 鈥溾渟tandard鈥濃.
Ahora vamos a ignorar aquellos archivos que no queremos que el Linter arregle, a帽adiremos en nuestro package.json lo siguiente:
"鈥渟tandard鈥": [
"鈥渋gnore鈥": [
""/api/**""
]
]

hora para desplegar nuestro front haremos lo siguiente:
Crearemos un archivo now.json en el root de nuestro proyecto con lo siguiente:
{
"鈥渧ersion鈥": 2,
"鈥渘ame鈥": 鈥溾減etgram鈥濃,
"鈥渂uilds鈥": [
{
"鈥渦se鈥": 鈥溾滰now/static-build"",
"鈥渟rc鈥": 鈥溾減ackage.json鈥濃
}
],
"鈥渞outes鈥": [
{
"鈥渟rc鈥": 鈥溾(.).js"",
"鈥渄est鈥": 鈥溾/$1.js""
},
{
"鈥渟rc鈥": 鈥溾(.
).json"",
"鈥渄est鈥": 鈥溾/$1.json""
},
{
"鈥渟rc鈥": 鈥溾/.*"",
"鈥渄est鈥": 鈥溾渋ndex.html鈥濃
}
]
}
En nuestro package.json a帽adiremos el siguiente script: 鈥溾渘ow-build鈥濃: 鈥溾渘pm 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:
"鈥渆slintConfig鈥": {
"鈥渆xtends鈥": [
""./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

Hola a todos, ya que el curso en esta parte esta descontinuado decid铆 correr el back de manera local. Se accede a la carpeta api y luego ejecutamos;

npm run dev:api

Con esto tenemos el graphql en el puerto 3500.
Hasta el momento no he tenido problemas.

las dependencias para el 2023

  "dependencies": {
    "apollo-server-express": "^3.11.1",
    "bcrypt": "^5.1.0",
    "cors": "^2.8.5",
    "express": "^4.18.2",
    "express-jwt": "^7.7.7",
    "graphql": "^16.6.0",
    "jsonwebtoken": "^8.5.1",
    "lowdb": "^3.0.0",
    "uuid": "^9.0.0"
  },

ya no es necesario en vercel.json

  "name": "petgram-server-TU_NOMBRE",

si al correr lint da error en los espacios del indentado, creen un archivo llamado .eslintrc.js a nivel de proyecto, y agreguen esta propiedad:

rules: {
   'indent': 'off'
}

Actualizaci贸n 2022:

Estuve como tres horas sorteando warnings y errors por todas las nuevas versiones lanzadas en los 煤ltimos dos a帽os,
investigando c贸mo solucionar cada uno de ellos鈥 y m谩s o menos me fue quedando.

Lo que m谩s tiempo me llev贸 fue el backend (que, adem谩s, cambi茅 las importaciones de paquetes a Modules en lugar de la vieja CommonJS), aunque todav铆a no lo desplegu茅.

Aqu铆 dejo enlaces a mi repositorio actualizado y a la web desplegada en Vercel para que puedan cotejar las diferencias.

Espero les sirva!

Hoy en d铆a con Vite y Vercel es muy sencillo todo.
Aqu铆 mi proyecto hasta ahora: https://curso-avanzado-react-eta.vercel.app/

Deployar == Desplegar

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

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

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!

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

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

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

鈥evisando el log:
_ Error: Build was unable to create the distDir: 鈥減ublic鈥.
More details: https://zeit.co/docs/v2/advanced/platform/frequently-asked-questions#missing-public-directory_

鈥 revisando las 鈥渇requently-asked-questions#missing-public-directory鈥, me dice que deber铆a poner el el package.json algo como:
_ {
鈥渟cripts鈥: {
鈥渂uild鈥: 鈥渕y-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.