Primer proyecto con React.js

Disfrutando del curso. Puse al profe de background. Saludos Celis! 😉
Mon

📌 npx nos permite probar un paquete específico, sin la necesidad de instalar la dependencia del paquete.

Recuerdo la emoción que me dio correr create-react-app sin entender nada pero ver en el navegador funcionando algo que había lanzado desde la terminal.
Les propongo como reto que le dediquen diario a estudiar HTML, luego CSS, luego tener bases solidas de JS y logren entender cómo funciona React.
Propónganse lograrlo y verán lo lograran.
Solo disfruten del proceso. Esto no se da de la noche a la mañana.
Requiere esfuerzo y dedicación 😄

React es uno de los 4 Frameworks más populares de JavaScript 👀 Recordemos que ahora existe Svelte y no podemos dejarlo fuera, sino Oscar se enoja jaja
.
Los otros 2 son Vue y Angular 😄

#yomeeducosola 💚

xD

Estoy tratando de ingresar el primer comando y me aparece este error.
sh: command not found: npx
Les adjunto el pantallazo por si alguién me puede ayudar. Mil gracias.

Solo hice una ligera modificación 😄

Me ha costado avanzar mucho en este curso, ¿Sera por que tengo una Mac con M1? 💆‍♂️

Hola, aquí les dejo las modificaciones que les hice a la aplicación de React.

Así quedó! The revolution begins

Agrege texto y use los colores de platzi

npm ERR! code ENOENT
npm ERR! syscall open
npm ERR! path /Users/user/Documents/proyecto/cursoprework/package.json
npm ERR! errno -2
npm ERR! enoent ENOENT: no such file or directory, open '/Users/user/Documents/proyecto/cursoprework/package.json’
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

ME APARECE TODO ESTO QUE HAGO???

Hola a todos:D si por alguna razón tuvieron problemas instalando node JS pero apenas se dieron cuenta en este paso y tienen una Mac con M1 o posterior, les dejo este video😃

Qué emoción poder ver algo tan chiquito vuelto realidad 🥺 Es la primera vez que utilizo CSS y cualquier cosa relacionada con desarrollo. Soy diseñadora UI/UX 💜

si son como yo y de otros cursos tienen el node instalado pero les da un error al crear la app de prueba !

Puede que sea la cache del npm, lo pueden limpiar con esto

npm cache clean --force

y si como a mi les sale un error que la carpeta de cache, en versiones anteriores, tenia permisos ‘root-owned’ lo pueden quitar con el comando que contiene el mismo mensaje de error

Si tiene una mejor alternativa para poder solucionar el problema estoy super atento

Segundo aviso: La instalación de React también lleva tiempo. ¡Ánimo! 🚀

tenía un problema y revise la sección de preguntas, y wow ya estaba lista la solución para mi, increible esta comunidad.

¿Framework o Librería? 🤔

No hice mucho por tiempo… pero me encanto hacerlo!. Ahora me gusta mas la idea de aprender React.

Para la gente de MAC un truco para ocultar u ocultar archivos de Mac. un punto al principio de la carpeta oculta los archivos. .carpeta

La sufrí con la terminal de Mac pero finalmente lo logre y ya hasta le agarre cariño después de tanto pelearnos

Clase 9 – Primer Proyecto con React.js

¿El npx viene por defecto al instalar npm?

• Sí.

¿Qué debemos hacer para instalar React.js usando npx?

• Ejecutamos el comando npx create-react-app directory
• Instalar los paquetes necesarios.
• Ejecutamos el comando npm start

¿Podemos crear un proyecto de react usando como nombre letras mayúsculas?

• No.

¿Quién mantiene React.js?

• Facebook.

Listo React, otro framework para aprender.

Hola Platzinautas.
Al instalar me sale el mensaje:
"… npm naming restrictions: * name can no longer contain capital lettes"
Entonces, a crear aplicaciones con minuscula sostenida.
Espero le sirva a alguien

Muy cool ejercicio, sigo emocionado de trabajar con terminal

Last login: Thu Feb 11 17:25:37 on ttys000
[email protected] ~ % ls
Desktop Downloads Movies Pictures
Documents Library Music Public
[email protected] ~ % cd Documents
[email protected] Documents % cd curoPrework
cd: no such file or directory: curoPrework
[email protected] Documents % ls
Asistencia MZZ13 Certificate Projects
CV .Operative Cv. Filmaker Variados
CV MKT Projectos
[email protected] Documents % cd Projectos
[email protected] Projectos % ls
cursoPrework
[email protected] Projectos % cd cursoPrework
[email protected] cursoPrework % npx create-react-app DemoPrework
zsh: command not found: npx
[email protected] cursoPrework %

Por favor Alguien queue me pueda ayudar???
@ricardocelis

<code>
.App {
  text-align: right;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 50s linear;
  }
}

.App-header {
  background-color: grey;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: top;
  font-size: calc(25px + 2vmin);
  color: white;
}

.App-link {
  color: white;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

Maravilloso cada tema

(

Me salió este error:

-bash: nmp: command not found.

ChatGPT me dio esta solución y me funcionó:

Si Node.js y npm están instalados, pero sigues recibiendo el mensaje de error “command not found”, puede que necesites agregar el directorio de instalación de npm al PATH de tu sistema. Para hacerlo, sigue estos pasos:

a. Abre el archivo .bash_profile en tu editor de texto preferido ejecutando el comando:

nano ~/.bash_profile

b. Agrega la siguiente línea al final del archivo:

export PATH="$PATH:/usr/local/bin/npm"

c. Guarda los cambios y cierra el editor de texto.

Cierra y vuelve a abrir la terminal para asegurarte de que los cambios se hayan aplicado correctamente. Luego, intenta ejecutar el comando npm start de nuevo.

Hay un comando que despliega el contenido en cascada:
.
Despliega los archivos y carpetas en niveles

tree -L 1
tree -L 2
tree -L 3

.

.
.
Acá estoy usando zsh
.

NOTAS

• No se puede poner nombres en mayúsculas
• ReactJS es una librería (platzi, facebook, etc la usan para el frontend)
• dom (Document Objetc Model) básicamente es una API que nos permite representar html
• npm: paquetes instalados (por defecto cuando se instala nodejs)
• npx: paquete pre instalado por defecto en npm, sirve para probar los paquetes, pero no instalarlos.

Por cierto si les sale algo tipo:

npm WARN deprecated [email protected]2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap

deben de escribir

npm i tar

y se actualizará, de esta manera ya no les saltará ningun warning ⚠️

Así quedó el mio

¡Por fin lo logre!

Así quedó

¡A toda velocidad!

Primero lo hice bien, luego no funcionó por que algo configuré mal ose perdió un archivo no se como. Tuve que desocultar los archivos de mi usuario donde se había instalado npm y eliminar la carpeta e iniciar la instalación de nuevo.

¡Funciona!

Así quedó

Cuando estén corriendo la parte de React, tengan en cuenta estar en la carpeta adecuada y poner el mismo nombre del archivo html que crearon. Porque al principio fue la razón que me saliera error. Luego verifique y todo funciono.

!Qué emoción!

Here we go!!!

por fin supe como subir imágenes.

Me están gustando mucho los cursos. 😃
Aquí va la captura de mi proceso.

¡Ahí va!

Dejo el screenshot !
Captura de Pantalla 2022-08-24 a la(s) 10.20.35 p. m…png

Dando los primeros pasitos 😛

Mi primer proyecto, fue interesante aprender algo nuevo y ponerlo en practica. Me gustaria saber como puedo cambiar el logo y el fondo! 😄

Acá mi aporte, es básico pero que emoción me da usar esto!

Macs con M1 dan demasiados problemas 😑

Y jugando un poco así quedó

Aquí mi aporte! esto esta super interesante!!!

La primera vez que hago esto y me esta gustando y divirtiendo mucho.

Veo que incluso se pueden añadir fondo, yo solo pude hacer esto por ahora.
Regresare después de unos cuantos cursos para ver mi avance.

Genial!!

Es poco pero trabajo honesto c:

excelente aporte yo no me aprendido aún react pero esta super bien explicado, gracias @Ricardo

Hola, jugando con el logo de React lo dejé girando para el otro lado y a mahor velocidad hehe

les dejo el link aquí

Así me quedó XD

Woooo, es la 4ta vez que veo el video y apenas sentí esa chispa de “ya le estoy entendiendo” 🥳

Me abrió el REACT pero con este mensaje:

Compiled with problems:X

ERROR in ./src/reportWebVitals.js 5:4-24

Module not found: Error: Can’t resolve ‘web-vitals’ in ‘/Users/keyla/Documents/proyectos/cursoPrework/demo-prework/src’

por que?

Mi aporte 😄

Hasta ahora pude entender cómo hacer el demo y aquí dejo el pantalla, cambie solo algunos colores.

Les dejo la captura de pantalla, solo modifiqué unos cuantos colores.

gracias a este curso aprendi a dejar en orden mi Mac con M1, crack el profe

La clase dura 7 min pero me costo dos horas en entender, probar fallar y por fin pude hacerlo, realmente me sentí muy feliz jaja.

#Yomeeducoconplatzi

)

Melo!!!

Hola, a los que les aparezca como en mi caso en un Mac M1:

“npm WARN deprecated [email protected]: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.”

Hay dos formas de solucionarlo:

1. npm i tar desaparece el warning
2. npm install [email protected] -g esta actualiza el [email protected] en tu mac

saludos

listo!!

Muy divertido este curso. Mi primer pequeño proyecto un aliento para mi país y llegar al repechaje Qatar 2022:

Asi se ve con las modificaciones que le hice. 😃