Creación de Aplicaciones React.js con MPX y NPM

Tener NPM instalado y saber moverte entre carpetas desde la terminal es solo el primer paso. Lo que viene después es donde todo cobra sentido: crear tu primera aplicación web funcional sin escribir casi nada de código, simplemente aprovechando las herramientas que la comunidad de desarrollo web ha construido para ti.

¿Qué son las bibliotecas y frameworks en desarrollo web?

Cuando trabajas en desarrollo web no partes de cero. Existe una gigantesca comunidad de desarrolladoras y desarrolladores que constantemente crea bibliotecas de código, es decir, funcionalidades ya listas que puedes descargar y utilizar en tus proyectos. También existen los frameworks, que son marcos de referencia completos que te dan herramientas y estructura para ejecutar el desarrollo de tu sitio web [0:25].

Para instalar y gestionar todo esto se utiliza NPM (Node Package Manager). Más específicamente, se usa NPX, una herramienta incluida dentro de NPM que permite ejecutar paquetes directamente sin necesidad de instalarlos de forma global [0:52].

¿Cómo crear una aplicación con React JS desde cero?

React JS es una de las tres librerías más potentes para desarrollo web frontend. Está mantenida principalmente por Facebook y es utilizada por empresas como Platzi para construir sus interfaces [2:17]. Para crear tu primera app, el comando es sencillo:

bash npx create-react-app demo-prework

Al ejecutarlo, NPX descarga e instala automáticamente los paquetes necesarios [1:10]. Un detalle importante: el nombre del proyecto no puede contener letras mayúsculas. Si lo intentas, recibirás un error de restricciones de nombre. La solución es usar guiones para separar palabras, por ejemplo demo-prework [1:28].

Durante la instalación se descargan varios paquetes clave:

• React: la librería principal.
• React DOM: el Document Object Model para renderizar en el navegador.
• React Scripts: utilidades para ejecutar, construir y probar la aplicación.

¿Cómo iniciar el servidor de desarrollo?

Una vez finalizada la instalación, debes asegurarte de estar dentro de la carpeta del proyecto antes de ejecutar cualquier comando. Esto se logra con:

bash cd demo-prework npm start

Es fundamental posicionarte en el directorio correcto porque ahí es donde viven los archivos de configuración de React [3:30]. Al ejecutar npm start, se levanta un servidor de desarrollo que abre automáticamente el navegador mostrando tu aplicación funcionando [3:50].

Este paso funciona como un hello world, una prueba de que toda la instalación que realizaste previamente —Node.js, NPM, la terminal— está funcionando correctamente y estás preparado para iniciar tu camino en el desarrollo web [4:05].

¿Cómo modificar estilos CSS en una app de React?

Con el servidor corriendo, cualquier cambio que hagas se actualiza de inmediato en el navegador gracias al hot reload. Para experimentar, abre el archivo App.css en Visual Studio Code [4:25].

Un ejemplo práctico es modificar la animación del logo de React. El archivo CSS controla la velocidad de rotación mediante un valor en segundos:

• Con un valor alto como 1000, el logo prácticamente no se mueve porque tarda demasiado en completar el giro.
• Con un valor de 1, el logo gira muy rápido [4:55].

Cada vez que guardas el archivo con File > Save, el navegador refleja los cambios al instante. Esta experiencia demuestra el poder de combinar:

• HTML para la estructura.
• CSS para los estilos y animaciones.
• JavaScript a través de React para la lógica e interactividad.

React JS mezcla estos tres lenguajes con prácticas de desarrollo bastante amigables, lo que facilita enormemente el proceso de creación [5:30].

Como ejercicio, modifica valores en App.css: cambia colores, ajusta tiempos de animación y comparte una captura de pantalla con el resultado. Es una forma sencilla de comprobar cuánto puedes lograr con solo ajustar propiedades CSS dentro de un framework moderno.