No tienes acceso a esta clase

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

Primer proyecto con React.js

9/13
Recursos

Aportes 209

Preguntas 74

Ordenar por:

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

o inicia sesi贸n.

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 鈥榬oot-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 鈥渃ommand 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!

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 鈥測a 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鈥檛 resolve 鈥榳eb-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:

鈥渘pm 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. 馃槂