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 244

Preguntas 81

Ordenar por:

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

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

As铆 qued贸! The revolution begins

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

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 馃挏

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馃槂

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 鈥榬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.

![](https://static.platzi.com/media/user_upload/image-0f2357fd-09ee-40b6-91ca-8772db188c25.jpg) Para ser principiante en esto del desarrollo, esto emociona :)
![](https://static.platzi.com/media/user_upload/Screenshot%202024-01-04-29de18b9-7c7d-4ec4-b399-5f4388bc2a64.jpg)Mejore esa pagina web procedo a agregar un perrito cheems :) 200% mas rendimiento jajajaja

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);
  }
}
![](https://static.platzi.com/media/user_upload/image-67331ad7-918b-48bd-ad97-9cfb1988435b.jpg)![](https://static.platzi.com/media/user_upload/image-41d3527b-ccae-41bf-bcfc-fd0dec11c9c6.jpg)
![]()![](https://static.platzi.com/media/user_upload/Captura%20de%20pantalla%202024-05-07%20a%20la%28s%29%2012.21.02%E2%80%AFp.m.-79d91274-4c72-49d1-a130-7cab08582a62.jpg)Estoy ansioso de descubrir como funciona cada elemento del c贸digo. Siempre me ha gustado moverle valores sencillos a la consola. Y aunque ya est茅 un poco mayor de lo que me gustar铆a, creo que ser谩 un camino interesante.
Hola, les comparto mi proyecto, es mi primera vez utilizando React y la primera vez que tengo una Mac. ![]()![](https://lh3.googleusercontent.com/pw/AP1GczOy0o-orx998Yur3jN8Iz8R7LBDs22Jq0FZaYdL0MMAmORMj5xDgvB-R2rfgBEzBt0QRdBGykl7-2bC_8_ZckhQVWjKjBmcxg0LLRusDnWtVNpDICjB-vTIRxMZ8h-c9s7i4W8GCwE8FV6nF0nMhPwBj-3JyP7lkPWPZkBfBOM7uMUFXHvyCn8VuylAalVLN5xx1iI6USiDyUi3ptPPOptbPYFyrwnBatite-3UuMj2r3WPA5HQsQRWJ4Glid9dLP_HR3GkCEwYCzYMl7YpAsS384S2tPcy_uW_wwOdSict37-0rSF5qwJYieDwdjPNZIqeGXBuNTMhUCviaV_l_N3rpKPYBTnMyokkqdfX2cpyGpe0Z-tCHhoIwvpvRFx7V8Ji4fvZWueDqY9t4e9lqu5008PqDH_QyEBYunfjApo0Dlx5Giv9n_P2YgwZrK7NuT9Vta6gUySqjHm8bSpC2PzjzbQSsxPqzl-bbRkVbU30ooNVuj18IfdubQpW1yZJuOEugZctpwwmtlNrVwdFGLWq-kpsHK2Gdy-0oEj5qbzx0Z_SHuXiObPaS5S9-xSpwGC0Rq36cuUcEDWMB2VYIWzHXiW3LzpAa-ARTQtbfJifQ1TTiCT58xYYqW-oW7eArlVQtCMOlmGNbjt0nrSTRwOgze33G4SNSEDA7NVo5zzh8lBgXgx1L0YmrXdGwQqY7jAcsOzA3vvcY8txx-dZN-DG1-VexZnkll_q_pyoS-SHBX4lxGSbDnU3mdh-pafcJMcn9ggWll188J9EQjcsRdupF5y3-sDmp--qd1WIusR2K6OTKL8Ao_rSjMpmgC2dmFFTQ_y_HfcXUcSAbT5p6rCD4sL3yXhdoX3V27Ip7xVzrWQ0Y4LQA94I1yj-5re6E8sBuJaTBn3IaXHV_dOWjZgtwKk=w1450-h942-s-no-gm?authuser=0)
por fin! : ![](https://static.platzi.com/media/user_upload/Captura%20de%20Pantalla%202024-04-12%20a%20la%28s%29%2017.45.34-aeb374fd-2270-4458-9195-0f467e3faced.jpg)
![](<Captura de Pantalla 2024-03-06 a la(s) 9.52.57 a.m.>)
![](file:///Users/imac/Desktop/Captura%20de%20pantalla%202024-02-21%20a%20la\(s\)%206.32.42%20p.%20m..png)
Alguien me puedo indicar que puedo hacer para corregir este error, gracias```js ```![](https://static.platzi.com/media/user_upload/Captura%20de%20pantalla%202024-02-21%20a%20la%28s%29%206.32.42%20p.%20m.-f7f8ceb5-0053-490d-b822-a51fc40f423f.jpg)
![](https://static.platzi.com/media/user_upload/image-74d09014-4267-4c9f-849a-188479d56c25.jpg)
me sale este error :(. npm notice Run npm install -g [email protected] to update! npm notice npm ERR! code E404 npm ERR! 404 Not Found - GET <https://registry.npmjs.org/create-reat-app> - Not found npm ERR! 404 npm ERR! 404 'create-reat-app@\*' is not in this registry. npm ERR! 404 npm ERR! 404 Note that you can also install from a npm ERR! 404 tarball, folder, http url, or git url. npm ERR! A complete log of this run can be found in: /Users/c.c/.npm/\_logs/2024-02-21T13\_45\_50\_514Z-debug-0.log
Buenas Gente, despu茅s de haber corrido el comando npx create-react-app demoprework en la terminal, me sale los siguiente: **8** vulnerabilities (2 **moderate**, 6 **high**) To address all issues (including breaking changes), run: npm audit fix --force Run `npm audit` for details. Created git commit. Depu茅s de haber corriedo los comandos que sugiere, me dice esto: ![](file:///Users/adrianvinik/Desktop/Screenshot%202024-02-13%20at%2020.03.48.png)![](file:///Users/adrianvinik/Desktop/Screenshot%202024-02-13%20at%2020.03.48.png)
Como hago para que me aparezca el css para editar? solo me aparece as铆 en mi pantalla de visual studio ![](https://static.platzi.com/media/user_upload/Screen%20Shot%202024-01-01%20at%2013.51.12-0d8728b7-aae3-431f-8a68-83b8982c9362.jpg)
![](https://static.platzi.com/media/user_upload/image-bf00e47d-a52e-4185-a8f2-47cf55b38fd9.jpg)
Compa帽eros ... la primera vez genial. pero de repente el logotipo de react no gira. Todo genial, se abre en el browser pero es como si la animaci贸n no funcionase. Qu茅 puede ser? Gracias
![](primer-proyecto-react)![]()![](file:///Users/natalia/Downloads/primer-proyecto-react.png)![](/Downloads/primer-proyecto-react)![](file:///Users/natalia/Downloads/primer-proyecto-react.png)Modifiqu茅 tambi茅n el App.js para tener al platzinauta y lo aceler茅. Tard茅 un poco m谩s solo por tenerlo ah铆 volteando, pero mereci贸 la pena por pura diversi贸n ![](https://static.platzi.com/media/user_upload/primer-proyecto-react-1aaa07d2-84ef-4e6d-ba15-81cee0da9e77.jpg)
![](https://static.platzi.com/media/user_upload/image-ea6efd93-f4a6-4407-b2ae-a3771c497397.jpg)

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!

As铆 qued贸 jejeje ![](</Users/anthonyarellano/Documents/Captura de pantalla 2023-09-24 a la(s) 17.05.00.png>)![](</Users/anthonyarellano/Documents/Captura de pantalla 2023-09-24 a la(s) 17.05.00.png>)

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 鈥減royectName鈥.
  • Aceptar la instalaci贸n del paquete de react.
  • Ejecutar cd 鈥減royectName鈥 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 鈥渘ode -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 鈥渘px鈥. 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 鈥淐:\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 鈥淰ariables de entorno鈥 y selecciona la variable PATH en la lista de variables del sistema.

  • Haz clic en 鈥淓ditar鈥 y agrega la ruta al directorio de instalaci贸n de Node.js (por ejemplo, 鈥淐:\Program Files\nodejs鈥) a la variable PATH.

  • Haz clic en 鈥淎ceptar鈥 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 鈥渘px 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 鈥渃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 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!

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