Introducción a React

Creado por Facebook en 2013, react es una libreria de Javascript para crear componentes reutilizables entre nuestras paginas utilizando Javascript para renderizar y cargar las propiedades personalizadas de cada componente que diseñemos, con la finalidad de reducir la redundancia de código al escribir una sola vez el componente que necesitamos y poderlo importar a cada pagina donde lo necesitemos.

React es declarativo, en cada componente o pagina JSX (extension de archivo de react) debes describir como debe verse la interfaz o el componente. Diviendo la pagina en pequeñas partes independientes y reutilizables.

Crear un proyecto con React

La forma moderna de inicializar un proyecto utilizando esta libreria es por medio de vite, utilizando el siguiente comando:

npm create vite@latest mi-app -- --template react

Despues de ejecutar el comando, entramos al directorio (carpeta) creada con el mismo nombre que hayas elegido usar, y despues hacer uso del comando: npm install; el cual instalara todas las dependencias necesarias para comenzar a crear nuestros componentes reutilizables.

¿Qué es un componente?

Todo puede ser un componente en React, pues en términos sencillos un componente es simplemente una función que devuelve una estructura HTML.

Como se ve en el ejemplo anterior, los archivos con extensión jsx (o tsx en el caso de Typescript) son archivos que unen Javascript con HTML, directamente no es un HTML inferido en el navegador, sino una sintaxis que se compila directamente desde Javascript y gracias a esto permite mezclar la lógica con la estructura visual.

Props

Las props son los argumentos que se envian a una función, ejemplo:

Esta función recibe como prop un nombre, es decir un dato que luego es invocado en el bloque de código de la función.

Estados

En React uno de los pilares fundamentales es el uso de estados (propiedad useState), Javascript por si solo no puede alterar el funcionamiento cuando cambian de valor por eso el estado useState vigila el cambio en una variable, si el estado cambia se actualiza el componente. Para ver el estado importamos el hook useState

¿Por qué vale la pena usar React?

Una de sus mayores ventajas es la reutilización de componentes; si creas correctamente un componente puedes utilizarlo en diferentes escenarios unicamente modificando las props.

Cada componente mantiene aislada su propia lógica, estilos y estructura, un fallo en un componente no afectara a todo el proyecto, y es más facil identificar la ubicación del fallo.

Familiarizarte con React, te permite adaptar tecnologias como NextJs el framework de React para crear aplicaciones web completas uniendo el frontend con el backend o el desarrollo de aplicaciones móviles multiplataforma con React Native.