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? 💆‍♂️

Agrege texto y use los colores de platzi

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 💜

Así quedó! The revolution begins

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

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

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
carloslopezpadron@Carloss-MacBook-Air ~ % ls
Desktop Downloads Movies Pictures
Documents Library Music Public
carloslopezpadron@Carloss-MacBook-Air ~ % cd Documents
carloslopezpadron@Carloss-MacBook-Air Documents % cd curoPrework
cd: no such file or directory: curoPrework
carloslopezpadron@Carloss-MacBook-Air Documents % ls
Asistencia MZZ13 Certificate Projects
CV .Operative Cv. Filmaker Variados
CV MKT Projectos
carloslopezpadron@Carloss-MacBook-Air Documents % cd Projectos
carloslopezpadron@Carloss-MacBook-Air Projectos % ls
cursoPrework
carloslopezpadron@Carloss-MacBook-Air Projectos % cd cursoPrework
carloslopezpadron@Carloss-MacBook-Air cursoPrework % npx create-react-app DemoPrework
zsh: command not found: npx
carloslopezpadron@Carloss-MacBook-Air 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);
  }
}

Les comparto mi modificación, es simple pero es mi primera app.
Un primer paso para todos aquellos que como yo, están empezando… les deseo éxitos a todos!

Me encanto esta clase. Aprendi mucho de esta pequeña interfaz de react. Lo curioso es qu no estuve perdido porque conocia las bases del frontend. Y la verdad eso me guio algo en la logica. No pude hacer el reto porque desconozco algo de react. Pero el aprendizaje es lo que recordare.

Hecho profe Celis 😃

Mis cambios 😃

Saludos

modifique algunos estilos

.App {
  text-align: center;
}

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

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

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

.App-link {
  color: #7f5dc5;
}

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

Interesante!

![](

Interesante lo que aparece

¿Qué es React.js?

ReactJS es una de las librerías más populares de JavaScript para el desarrollo de aplicaciones móviles y web. Creada por Facebook, React contiene una colección de fragmentos de código JavaScript reutilizables utilizados para crear interfaces de usuario (UI) llamadas componentes.
.
Es importante señalar que ReactJS no es un framework de JavaScript. Esto porque solo es responsable de renderizar los componentes de la capa de vista de una aplicación. React es una alternativa a frameworks como Angular y Vue, que permiten crear funciones complejas.
.

¿Qué es NPX?

NPX significa Node Package Execute y viene con npm. Es un ejecutor de paquetes npm que puede ejecutar cualquier paquete que desee desde el registro npm sin siquiera instalar ese paquete. El npx es útil durante un paquete de uso único. NPX nos permite usar las herramientas de línea de comandos de instalación locales sin necesidad de definir el script de ejecución de NPM y permitirnos realizar solo un script sin tener que instalarlo al local.
.
Ejecutar un React por medio de npx:

• Abrir la terminal de comandos de macOS.
• Ejecutar el comando npx create-react-app “proyectName”.
• Aceptar la instalación del paquete de react.
• Ejecutar cd “proyectName” para movernos a la carpeta dónde se instaló el paquete de React.
• Ejecutar el comando npm start y aceptar los procesos para que el proyecto se ejecute en nuestro navegador.

Tengo macOs y tambien tuve el clasico problema al descargar React:

"zsh: command not found: npx”

Tratando de buscar soluciones en los comentarios encontre videos y algunos comentarios muy utiles pero al final opte por preguntar a chatgpt y pues me ahorro mucho tiempo.

Para resolver el problema, puedes seguir estos pasos:

1. Asegúrate de tener Node.js instalado en tu sistema. Puedes verificar si Node.js está instalado escribiendo “node -v” en la línea de comandos. Si no está instalado, deberás instalar Node.js desde el sitio web oficial de Node.js.

2. Una vez instalado Node.js, debería incluir también el paquete “npx”. Sin embargo, es posible que debas agregar el directorio de instalación de Node.js a la variable de entorno PATH. Por lo general, Node.js se instala en el directorio “/usr/local/bin” en macOS y Linux, y en “C:\Program Files\nodejs” en Windows.
   – Para macOS o Linux:

• Abre el archivo de configuración de tu shell, como “/.bashrc” o “/.zshrc”, con un editor de texto.
• Agrega la siguiente línea al final del archivo:

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

• Guarda el archivo y reinicia tu terminal o escribe source ~/.bashrc o source ~/.zshrc para recargar el archivo de configuración sin reiniciar.
  – Para Windows:

• Abre la configuración avanzada del sistema.

• Ve a “Variables de entorno” y selecciona la variable PATH en la lista de variables del sistema.

• Haz clic en “Editar” y agrega la ruta al directorio de instalación de Node.js (por ejemplo, “C:\Program Files\nodejs”) a la variable PATH.

• Haz clic en “Aceptar” para guardar los cambios.

1. Después de agregar el directorio correcto de Node.js a PATH, reinicia tu terminal y vuelve a intentar ejecutar el comando “npx create-react-app demopreworks”. Debería funcionar correctamente ahora.

Yo tambien estoy iniciando y a pesar que pueda ser un poco complicado, lograrlo fue muy satisfactorio. Espero que sea de ayuda para alguien

Que bueno es aprender

Ahi va la medicación que yo hice:

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 tar@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ó