React es una biblioteca de JavaScript, que se utiliza principalmente para construir interfaces de usuario, especialmente para aplicaciones web de una sola página. Pero, ¿qué significa esto? Pues bien, React te ayuda a crear componentes interactivos y reutilizables (como botones, formularios, etc.) que hacen que las páginas web sean dinámicas y respondan a la interacción del usuario sin necesidad de recargar la página completa.
React fue creado por Jordan Walke, un ingeniero de software de Facebook. Fue desplegado por primera vez en el feed de noticias de Facebook en 2011 y más tarde en Instagram en 2012. Debido a su éxito y utilidad, Facebook decidió liberar React como un proyecto de código abierto en mayo de 2013. Desde entonces, ha ganado una enorme popularidad en la comunidad de desarrolladores debido a su eficiencia y facilidad de uso.
1. Componentes: React se basa en el concepto de componentes. Un componente es una pieza de UI encapsulada que maneja su propio estado. Pueden ser tan simples como un pequeño botón o tan complejos como una app entera. La idea es que cada componente es independiente y reutilizable.
2. JSX: JSX es una sintaxis que se parece mucho al HTML, que es utilizada dentro del código JavaScript. Aunque no es obligatorio usar JSX en React, hace que el código sea mucho más legible y te permite escribir estructuras de componentes de una forma que se asemeja a cómo se estructuran en el HTML.
3. Estado y Props: En React, el «estado» de un componente es un objeto que guarda valores que pueden cambiar con el tiempo, sin necesidad de recargar la página. Por otro lado, las «props» (abreviatura de propiedades) son configuraciones que se pasan a los componentes y son inmutables, es decir, el componente las recibe del padre y no puede cambiarlas.
4. Ciclo de Vida de los Componentes: Los componentes en React tienen lo que llamamos un «ciclo de vida», que son diferentes etapas por las que pasa el componente desde que se crea hasta que se destruye. React proporciona «métodos de ciclo de vida» que te permiten ejecutar código en momentos específicos del ciclo de vida.
5. Virtual DOM: React introduce el concepto de Virtual DOM, que es una representación en memoria del DOM real de la página. React utiliza este modelo para detectar cambios en el estado de los componentes y actualizar solo las partes necesarias del DOM real, lo que hace que las actualizaciones sean muy eficientes.
Ahora que ya conocemos qué es React y algunos de sus conceptos fundamentales, vamos a preparar nuestro taller para empezar a construir. Imagina que el entorno de desarrollo es como un taller donde tendrás todas las herramientas que necesitas al alcance de tu mano para construir tu proyecto. Vamos a configurarlo paso a paso.
Primero, necesitamos instalar Node.js. ¿Por qué? Porque Node.js no solo nos permite ejecutar JavaScript en nuestros ordenadores (fuera de un navegador), sino que también viene con un gestor de paquetes llamado NPM (Node Package Manager). NPM es esencial porque nos permite instalar y administrar bibliotecas y herramientas que necesitaremos en nuestros proyectos de React.
Una vez que tenemos Node.js y NPM, podemos usar una herramienta llamada Create React App. Es como una receta predefinida que nos ayuda a configurar rápidamente un nuevo proyecto de React con buenas prácticas y configuraciones óptimas sin necesidad de configurar detalles complejos manualmente.
npm install -g create-react-app
Luego, crea un nuevo proyecto con:
npx create-react-app mi-aplicacion-react
mi-aplicacion-react es el nombre de tu nuevo proyecto. Puedes elegir el nombre que prefieras.Una vez que Create React App ha terminado de configurar tu nuevo proyecto, navega a la carpeta del proyecto y inicia el servidor de desarrollo:
cd mi-aplicacion-react
npm start
Al ejecutar npm start, tu aplicación de React se abrirá automáticamente en tu navegador predeterminado. Si todo está configurado correctamente, verás una página de bienvenida de React.
Imagina que estás construyendo una casa. Antes de empezar a decorar las habitaciones, necesitas una buena estructura: cimientos, paredes, y divisiones que definan cada espacio. En React, nuestro proyecto también necesita una estructura clara y organizada para que funcione bien y sea fácil de mantener. Vamos a explorar la estructura de carpetas y archivos de un proyecto creado con Create React App, que es como nuestro plano de construcción estándar.
Cuando creas un nuevo proyecto con Create React App, se genera automáticamente una estructura de carpetas y archivos que es bastante estándar y ayuda a mantener todo organizado. Veamos los elementos más importantes:
Esta carpeta es como el almacén de herramientas y materiales. Contiene todas las librerías y módulos que tu proyecto necesita para funcionar, los cuales se instalan a través de NPM o Yarn.
Piensa en esta carpeta como la entrada principal de tu casa. Aquí es donde se encuentran los archivos que serán accesibles al público, como el index.html principal. Este index.html es especial porque actúa como la única página en aplicaciones de una sola página (SPA). También puedes poner aquí imágenes, íconos y otros archivos estáticos que quieras que estén directamente disponibles sin procesamiento adicional.
Esta es la sala principal de tu casa, donde pasarás la mayor parte del tiempo. Aquí es donde vives y respiras tu código de React.
App.js.Este archivo es como un cubo de basura para lo que no quieres que se vea. Aquí especificas los archivos y carpetas que no deseas que se suban a tu repositorio Git (como los node_modules/).
Este archivo es como el manual de instrucciones de tu casa. Gestiona las dependencias, scripts y metadatos del proyecto. Es aquí donde configuras scripts para arrancar, construir, y probar tu aplicación.
Este archivo es como un cartel de bienvenida o una guía rápida sobre tu proyecto. Suele contener información sobre el proyecto, cómo usarlo, cómo configurarlo y cómo contribuir a él.
