Introducción a React.

React

React es una librería de JavaScript para construir interfaces de usuario. Fue desarrollada por Facebook y es utilizada por muchas empresas, como Instagram, Airbnb, Netflix, WhatsApp, entre otras.

React es una librería declarativa, lo que significa que se enfoca en describir cómo debería ser la interfaz de usuario en lugar de cómo debería funcionar. Esto permite que el código sea más predecible y fácil de depurar.

React utiliza un lenguaje de marcado llamado JSX, que es una extensión de JavaScript. JSX permite escribir HTML dentro de JavaScript, lo que facilita la creación de componentes reutilizables.

En este curso aprenderás los conceptos básicos de React, como componentes, props, state, eventos y ciclos de vida. También aprenderás a crear aplicaciones utilizando React.

Instalación de React

Para comenzar a trabajar con React, necesitas instalar Node.js y npm (Node Package Manager). Puedes descargar Node.js desde su sitio web oficial: https://nodejs.org/

Existen gestores de versiones que permiten tener más de una versión de Node.js instalada en tu computadora, como nvm (Node Version Manager) para Linux y macOS, y nvm-windows para Windows. Puedes encontrar más información en la documentación oficial de Node.js: https://nodejs.org/en/download/package-manager/

Se recomienda utilizar fnm (Fast Node Manager) que es un gestor de versiones de Node.js más rápido que nvm.

Una vez que hayas instalado Node.js, puedes verificar si npm está instalado ejecutando el siguiente comando en la terminal:

npm -v

Una vez que tengas npm instalado, puedes instalar React utilizando el siguiente comando:

npx create-react-app my-app

Una vez instalado React, puedes utilizar los siguientes comandos:

  • npm start: Inicia la aplicación en modo de desarrollo.
  • npm run build: Compila la aplicación para producción.
  • npm test: Ejecuta las pruebas de la aplicación.
  • npm run eject: Expone las configuraciones de la aplicación.

Si todo salio bien puedes ejecutar el servidor de desarrollo y probar tu aplicación mediante el navegador con el siguiente comando:

cd my-app
npm start

Tip

La forma actual que se recomienda para utilizar react es a través de Vite, que es un bundler mucho más rápido que create-react-app. Para instalar Vite, ejecuta el siguiente comando:

npm create vite@latest

Ya sea que crees tu aplicación con create-react-app o con Vite, se recomienda agregar un . al final del comando para que se cree la aplicación en la carpeta actual. Por ejemplo:

npx create-react-app .

o

npm create vite@latest .

De esta forma, se creará la aplicación en la carpeta actual y no en una carpeta con el nombre de la aplicación.

Al instalar la aplicación con Vite tendrás unas preguntas para elegir con que lenguaje de programación quieres trabajar, elige TypeScript.

Dentro de las opciones disponibles tendras:

  • Vanilla: JavaScript puro.
  • Vue: la librería de JavaScript Vue.js.
  • React: la librería de JavaScript React.js.
  • Preact: Preact.js es una versión más ligera de React.js.
  • Lit: Lit es una librería de JavaScript para crear aplicaciones web.
  • Svelte: Svelte es un framework de JavaScript para construir aplicaciones web.
  • Quick: Quick es un framework de JavaScript para construir aplicaciones web.
  • Others: Otros lenguajes de programación.

En esta curso utilizaremos la opción de React.

Una ves seleccionada la opción de react tenemos algunas opciones a elegir:

  • TypeScript: TypeScript es un lenguaje de programación de código abierto desarrollado por Microsoft.
  • TypeScript + swc: swc es un compilador de JavaScript y TypeScript escrito en Rust.
  • JavaScript: JavaScript es un lenguaje de programación de código abierto.
  • JavaScript + swc: swc es un compilador de JavaScript y TypeScript escrito en Rust.
  • Remix: Remix es un framework de JavaScript para construir aplicaciones web.

En este curso para iniciar se recomienda utilizar la opción de JavaScript, sin embargo posteriormente se trabajará con TypeScript.

Para probar la aplicación es necesario realizar la instalacon de las dependencias de la aplicación, para ello ejecuta el siguiente comando:

npm install
Tip

Una opción de abreviar el comando anterior es utilizando el comando npm i que es equivalente a npm install.

Con ello es posible correr el servidor de desarrollo y probar la aplicación en el navegador con el siguiente comando:

npm run dev

De esta forma se podrá visualizar la aplicación en el navegador.