Introducción a React: Fundamentos para Principiantes

¡Hola a todos! 👋 Soy Marco, un estudiante de Ingeniería Informática, y quiero darles la bienvenida a este mini curso de React.

Como estudiante de Ing. Informática, me doy cuenta de que los estudiantes finalizando la carrera y los egresados no tienen conocimiento de tecnologías modernas como React o Next para el desarrollo de páginas web o aplicaciones web. Mi mejor amiga, también estudiante de Ing. Informática, tiene problemas para comprender estas tecnologías. Por eso, decidí crear este pequeño curso, con la intención de ayudar a colegas que ya saben de programación, para que puedan aprender fácilmente tecnologías web tan importantes como estas. ¡Espero que les sea útil y sobre todo, que disfruten el proceso de aprendizaje tanto como yo disfruto compartirlo!

¿Qué es React?

Empecemos desde el principio: ¿Qué es React? 🤔

React es una biblioteca de JavaScript creada por Facebook en 2013 para construir interfaces de usuario, especialmente para aplicaciones web de una sola página (SPA). Es decir, React nos permite construir componentes reutilizables que forman la base de nuestras aplicaciones web. Si alguna vez te has preguntado cómo es que las grandes aplicaciones como Facebook o Instagram son tan rápidas e interactivas, ¡React es parte de la magia detrás de eso!

Historia y evolución de React

Aunque React nació en 2013, su historia comienza un poco antes, cuando los ingenieros de Facebook buscaban una solución para mejorar el rendimiento y la experiencia del usuario en su plataforma. React fue su respuesta a estos desafíos, y desde entonces ha evolucionado constantemente, ganando popularidad hasta convertirse en una de las tecnologías más utilizadas en el desarrollo web.

Desde su lanzamiento, React ha crecido y se ha fortalecido con una comunidad vibrante y activa que contribuye constantemente a su mejora. ¡Y ahora, tú también formas parte de esta comunidad!

Ventajas de usar React

¿Por qué React se ha vuelto tan popular? Bueno, hay varias razones que hacen de React una excelente opción para desarrollar aplicaciones web modernas:

1. Componentes Reutilizables: En React, todo se basa en componentes. Esto significa que puedes crear pequeños bloques de código que se pueden reutilizar en diferentes partes de tu aplicación. ¡Menos trabajo, más eficiencia!

2. Virtual DOM: React utiliza un concepto llamado Virtual DOM para actualizar solo las partes de la interfaz que han cambiado, en lugar de recargar toda la página. Esto hace que las aplicaciones React sean extremadamente rápidas.

3. Gran Comunidad y Ecosistema: React cuenta con una enorme comunidad de desarrolladores, lo que significa que hay montones de recursos, bibliotecas y herramientas disponibles para hacer tu trabajo más fácil.

4. Fácil de Aprender: Si ya conoces JavaScript, aprender React es relativamente sencillo. Además, una vez que aprendas React, tendrás una base sólida para aprender otras tecnologías relacionadas como Next.js.

Instalación y configuración del entorno

¡Es hora de ensuciarnos las manos! 🛠️

Antes de comenzar a escribir código en React, necesitamos preparar nuestro entorno de desarrollo. No te preocupes, es más fácil de lo que parece. Aquí te dejo una guía rápida:

1. Instala Node.js: Primero, necesitas tener Node.js instalado en tu máquina. Node.js es un entorno de ejecución para JavaScript que nos permitirá utilizar herramientas como npm (Node Package Manager) o yarn para gestionar nuestras dependencias. Puedes descargar Node.js desde su sitio oficial.

2. Crea una nueva aplicación React: Una vez que tengas Node.js instalado, abrirás tu terminal o línea de comandos y ejecutarás el siguiente comando:
   

npx create-react-app my-first-react-app

Esto creará una nueva carpeta llamada my-first-react-app con todos los archivos necesarios para empezar a trabajar en tu primera aplicación React.

1. Inicia la aplicación: Ahora, navega hasta la carpeta que acabas de crear e inicia la aplicación con estos comandos:

cd my-first-react-app
npm start

¡Y listo! Se abrirá una ventana en tu navegador con tu primera aplicación React en funcionamiento. 🎉

Primer componente React

Vamos a crear nuestro primer componente en React. ¿Estás listo? ¡Vamos allá!

En React, los componentes son como bloques de construcción. Puedes pensar en ellos como pequeñas piezas de Lego que juntas forman una aplicación completa. Vamos a crear un componente súper básico que simplemente diga "¡Hola, Mundo!".

Abre el archivo src/App.js en tu editor de texto favorito.

Borra el contenido que ya está allí y reemplázalo con este código:

import React from 'react';

function App() {
  return (
    <div>
      <h1>¡Hola, Mundo!</h1>
    </div>
  );
}

export default App;

Guarda el archivo y mira cómo se actualiza automáticamente tu navegador para mostrar el mensaje "¡Hola, Mundo!".

¡Felicidades! Acabas de crear tu primer componente React. 🎉

JSX: Qué es y cómo funciona

Si miraste el código anterior y te preguntaste, "¿Qué es este HTML mezclado con JavaScript?", no te preocupes, eso es JSX.

JSX es una extensión de JavaScript que nos permite escribir código que se parece a HTML, pero dentro de archivos JavaScript. Lo genial de JSX es que es mucho más fácil de leer y escribir que el código JavaScript puro para generar elementos HTML. Aunque parece HTML, en realidad, es JavaScript bajo el capó.

Por ejemplo, en lugar de escribir:

React.createElement('h1', null, '¡Hola, Mundo!');

Podemos escribirlo como:

<h1>¡Hola, Mundo!</h1>

Mucho más simple, ¿verdad?

Props y State: Introducción

Para cerrar esta introducción, es importante mencionar dos conceptos clave en React: Props y State.

• Props (Propiedades): Las Props son como los argumentos que pasamos a una función, pero en lugar de funciones, se los pasamos a los componentes. Las Props permiten que un componente reciba datos de su componente padre y los utilice dentro de sí mismo.

• State (Estado): El State es como la "memoria" de un componente. Es un objeto que puede contener datos que pueden cambiar con el tiempo, y cada vez que el State cambia, React vuelve a renderizar el componente para reflejar los nuevos datos.

En los próximos posts, vamos a profundizar más en estos conceptos y a ver cómo funcionan en la práctica.

¡Y eso es todo por hoy! Espero que esta introducción a React te haya sido útil y que estés emocionado por lo que viene. En el próximo post, profundizaremos en cómo trabajar con componentes, Props y State en React. ¡Hasta la próxima! 🚀