Notas pertenecientes al curso Desarrollo de aplicaciones web con React 18

Las dos herramientas esenciales con las que debemos contar para disponer de un entorno de desarrollo para React son un editor de código y un entorno de ejecución de JavaScript. Para los propósitos del curso, vamos a utilizar las opciones más comunes dado su amplio soporte y ubicuidad.

Aunque puedes utilizar cualquier editor de tu elección para desarrollar aplicaciones de React y no es necesario un entorno de desarrollo integrado en absoluto, el editor Visual Studio Code es una de las mejores opciones ya que incorpora multitud de funcionalidades que asisten a la hora de escribir código JavaScript, como snippets de código, autocompletado, sangrado automático o una terminal integrada.

Para instalarlo, puedes dirigirte a la página web oficial donde se detalla el proceso de instalación para tu sistema operativo. Para una instalación rápida, tienes las siguientes opciones:

• En Windows, abre una terminal y ejecuta el comando winget install Microsoft.VisualStudioCode
• En macOS, descarga el paquete correspondiente, extráelo del archivador ZIP y arrastra Visual Studio Code.app a la carpeta Aplicaciones.
• En Linux, descarga el paquete adecuado para tu distribución e instálalo con el gestor de paquetes de tu sistema o ejecuta sudo snap install code --classic si dispones del gestor de paquetes Snap.

El panel de comandos, que puedes abrir mediante la tecla F1 o la combinación Ctrl + Mayús + P, te dará acceso a todo tipo de acciones que puedes realizar sobre el código, incluyendo comandos especiales en función del lenguaje que estés editando.

Aunque Visual Studio Code integra multitud de ayudas para programar en JavaScript, sus funcionalidades se pueden ampliar instalando extensiones, que se acceden desde el panel lateral. Algunas extensiones que te pueden resultar útiles son las siguientes:

• ESLint, un analizador estático que identifica problemas en código JavaScript y sugiere soluciones para corregirlos de forma sencilla
• Prettier, un formateador de código automático
• VSCode React Refactor, un conjunto de comandos para automatizar tareas comunes en React
• Highlight Matching Tag, una sencilla extensión que resalta las etiquetas de apertura y cierre en secciones de marcado HTML y JSX.

El entorno de ejecución Node.js nos permite disponer de un motor JavaScript para ejecutar programas sin depender necesariamente de un navegador. Esto, a su vez, hace posible construir aplicaciones de servidor sin depender de otras plataformas en otros lenguajes.

En nuestro caso, ya que la mayoría del trabajo de React se ejecuta en el cliente, no le daremos mucha importancia al componente que sirve la aplicación, pero es importante que tengas en cuenta que el código que escribas se preparará y transformará de la forma conveniente antes de enviarla al navegador. Aún así, no es imprescindible contar con un servidor para construir aplicaciones React y veremos algunos ejemplos en los que la aplicación se compone de un solo fichero HTML que podemos abrir directamente en el navegador.

La ventaja de utilizar Node.js es, además, que facilita la inclusión de otras bibliotecas (la gestión de dependencias) y la ejecución de comandos que efectúan diferentes tareas de creación y mantenimiento del código por nosotros.

Para instalar Node.js, puedes utilizar el gestor de paquetes de tu sistema operativo:

• En Windows, abre una terminal y ejecuta el comando winget install openjs.nodejs.
• En macOS, si dispones de Homebrew puedes abrir una terminal y ejecutar el comando brew install node.
• En distribuciones de Linux, el gestor de paquetes tendrá acceso a nodejs o bien node. Por ejemplo, para Debian y Ubuntu podemos ejecutar sudo apt install nodejs.

Alternativamente, puedes descargar Node.js de la página oficial en forma de paquete instalable. Una vez que lo tengas instalado por cualquier método, comprueba que puedes ejecutar los comandos node, npm y npx en una terminal. Puedes salir de los prompts que se abren, por ejemplo, al ejecutar node, utilizando la combinación Ctrl + D.