¿Qué es ReactJS?

ReactJS es una biblioteca JavaScript que nos permite crear interfaces de usuario web dinámicas, con lo que podremos darle funcionalidad a nuestra página de forma sencilla (más simple que trabajar directamente con el DOM). Estas interfaces están basadas en componentes (módulos de interfaz reutilizable que manejan su estado interno). Importante aclarar que se trata de una herramienta de código abierto, creada en su momento por Facebook (ahora Meta), pero actualmente es mantenida por una gran comunidad de desarrolladores en el mundo. Puedes encontrar más info desde su sitio web oficial.

Requisitos Previos

A continuación se detallan los requisitos necesarios para comenzar a desarrollar con ReactJS.

Instalación NodeJS

Primer paso importante es instalar el entorno de ejecución JavaScript NodeJS (más adelante ahondaremos más sobre esta herramienta cuando trabajemos con backend). Para realizarlo, ve al sitio web oficial de NodeJS y descarga alguna de las versiones que sugiere:

Luego ejecuta el archivo descargado, sigue los pasos de la instalación (muchos "siguiente") y listo.

Creando tu Primera App

Luego que instalaste NodeJS, puedes proceder a crear tu primera app en React! Para esto deberás abrir una consola (tal como lo hicimos en el tutorial de Git), y deberás ejecutar los siguientes comandos:

npx create-react-app nombre-app
cd nombre-app

Aquí el comando "npx", tiene la función de ejecutar el paquete "create-react-app", que es el que nos creará una carpeta con un proyecto de ReactJS ya armado (en este caso la carpeta se llama "nombre-app"). El comando "cd" (change dir), permitirá que te ubiques en esa nueva carpeta, para que desde allí puedas ejecutar comandos.
Más info de npx => https://nodejs.dev/learn/the-npx-nodejs-package-runner
Más info de create-react-app => https://create-react-app.dev/docs/getting-started/

Luego se ejecuta el comando "npm start", que iniciará el servidor de desarrollo, con la app de React funcionando:

npm start

Debería abrirse tu navegador web y ver la siguiente pantalla:

Comenzando a Trabajar...

Ahora que ya tienes tu app de ReactJS funcionando, es momento de crear tu primer componente!
Para realizar esto, debes abrir la carpeta que se creó al ejecutar el comando "npx create-react-app nombre-app", en el editor de código que utilices (si estás siguiendo el curso de desarrollo, sabrás que utilizamos Visual Studio Code 😜).
Al abrirla te encontrarás con la siguiente estructura de archivos:

Cada carpeta tiene su función:

• node_modules: En esta carpeta se almacenan todas las librerías y plugins que utiliza tu entorno de desarrollo (de aquí nunca tienes que tocar nada)
• public: En esta carpeta encontrarás archivos estáticos que estarán en tu servidor web (por el momento dejaremos todo como está)
• src: Aquí está todo el código que editaremos para crear nuestro sitio web (es donde pasa toda la acción 😍)
• package.json: Es el archivo donde se encuentra toda la info del proyecto (por ahora no lo editaremos)

Para ponernos manos a la obra, editaremos el archivo App.js que se encuentra dentro de la carpeta src y pondremos "Programando con Kiki". Antes de editar, tenemos que el archivo se ve así:

Luego de editar debería verse así:

En el navegador veremos lo siguiente:

Ahora sabemos cómo editar y trabajar con React, por lo que daremos el paso de crear nuestro propio componente personalizado...

Creando un Componente "Saludo"

Crearemos un componente que permita personalizar un "nombre" y en la web se muestre como "Hola nombre".
Para realizarlo, vamos a crear un archivos JS llamado Saludo.js, dentro de la carpeta src:

En ese archivo debemos definir una función Saludo, la cual deberá retornar el "HTML" de nuestro componente. Luego en ese mismo archivo deberemos escribir el código export default Saludo;, esto hará que podamos utilizar nuestro componente en otros archivos de React. El código debería ser similar a lo siguiente:

Es tiempo de utilizar nuestro componente! Para ello, editaremos el archivo App.js, añadiendo la línea import Saludo from "./Saludo"; (esto permite utilizar el componente) y luego lo utilizaremos como si se tratase de HTML, en el return de la función App:

Si vemos el navegador podremos ver que nuestro componente funciona! 🥳🥳

Se puede observar en el código que dentro de Saludo, utilizamos una propiedad "name", normalmente se les llama "props" y es lo que utilizamos para que el componente fuera personalizable. Más adelante profundizaremos en estos conceptos realizando más práctica al respecto.

Espero que te haya gustado el tutorial, te espero la próxima 👋