Primer proyecto con React.js

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

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

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.

Agrege texto y use los colores de platzi

Solo hice una ligera modificación 😄

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😃

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

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???

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

Así quedó! The revolution begins

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

¿Framework o Librería? 🤔

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

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

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

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

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);
  }
}

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. 😃

Me quedo asiii, pero en realidad se mueve a mil por hora jajaj

https://ibb.co/c2KzvcK

Mi duda es como colocan una imagen en los comentarios, estoy tratando pero no me deja.

algo se aprendió y se jugó con los valores …

Dejo mi ejercicio por acá con un estilo muy Platzistico.

Bueno, pues así empezamos! XD

hola profe, dejo mi screen shot de los cambios al ccs 😃
saludos

Así me ha quedado 😃

Aqui mi aporte

ah! tampoco me pregunto si deseaba instalar OTROS paquetes, simplemente instalo todo y “Happy hacking!”

Quedo listo.

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

apenas dando los primeros pasos y ya me gusto mucho react.js

framework: Es una estructura previa que se puede aprovechar para desarrollar un proyecto.

El framework es una especie de plantilla, un esquema conceptual, que simplifica la elaboración de una tarea, ya que solo es necesario complementarlo de acuerdo a lo que se quiere realizar.

esta es un descripción de framework para el que le sirva ya que yo no sabia que era.

Gracias!

instale extensiones html y java en visual code (Como referencia)

A mi me sale un package.json

Este es mi ajuste. Tome los colores de colorhunt y un svg de flaticon
|

Listos para trabajar en macOS

solo para ir en contra la corriente, me parecio interesante el hacer este ejercicio al estilo vue

En mi caso tenía una actualización de Node por lo cual ejecuté este comando
npm install -g [email protected]

Hola,
Dejo mi modificación a la aplicación de React.
Saludos

Listo

Hola Ricardo:
Dejo mi presonalizacion de proyecto con react.js

No puedo compartir la imagen, alguien me dice como puedo publicarla de favor?

gira al revés , y le hice algunos cambios de color en el css, y en el app.js

La verdad muy divertido el curso, he aprendido un montón y ahora creo que podre hacer tareas mucho mas rápido.