Introducción
En este curso de React, lo primero que vamos a hacer es preparar nuestro entorno de desarrollo para comenzar a programar con React. No es necesario contar con herramientas avanzadas o equipos de última generación, pero sí es importante tener en cuenta algunos aspectos clave para trabajar de manera eficiente.
1. Elección del Editor de Código
Como editor de código y entorno de desarrollo, utilizaremos Visual Studio Code (VS Code). Es importante mencionar que, aunque no es obligatorio, te recomiendo encarecidamente que utilices VS Code, ya que seguiré esta herramienta durante todo el curso.
Si prefieres utilizar otro editor, puedes hacerlo sin ningún problema, pero seguir el curso con el mismo entorno de desarrollo hará que sea más sencillo seguir la dinámica que voy a explicar.
2. Configuración del Tema de Colores
Una de las primeras personalizaciones que muchos se preguntan es sobre el tema de colores en Visual Studio Code. Si deseas utilizar el mismo que yo, sigue estos pasos:
- Haz clic en el ícono de la «rosquilla» (ícono de configuración) en la parte inferior izquierda.
- Dirígete a «Themes» o «Color Theme».
- Selecciona «Solarized Dark» o «Solarized C» para obtener el mismo tema oscuro que uso en el curso.
3. Instalación de Extensiones Recomendadas
Extensión de React
Para facilitar el trabajo con React, es altamente recomendable instalar la extensión de React en Visual Studio Code. Esta extensión incluye varios atajos de teclado y snippets que agilizarán tu proceso de programación.
Al instalarla, encontrarás varias plantillas útiles. Por ejemplo, puedes usar el atajo RAF C para generar un componente funcional básico, lo que te ahorrará tiempo en la creación de los elementos básicos de React. Esta extensión también te permitirá acceder a otros snippets conforme vayamos avanzando en el curso.
Navegador Web
En cuanto al navegador, en este curso utilizaré Firefox, aunque puedes usar cualquier navegador que prefieras, como Google Chrome, sin inconvenientes. La razón por la cual opto por Firefox es por sus herramientas de desarrollo, pero la funcionalidad será similar en cualquier navegador.
Herramienta de Desarrollo para Firefox
Si decides usar Firefox, te recomiendo instalar la extensión React Developer Tools para Firefox. Esta extensión te proporcionará información adicional sobre el estado de la aplicación, los componentes, eventos y hooks que estemos utilizando en el proyecto. Aunque no es indispensable, puede resultar útil para ciertos aspectos del desarrollo.
4. Instalación de Node.js
Node.js es una herramienta fundamental que necesitas tener instalada en tu computadora. Sin Node.js, no podrás instalar React ni gestionar las dependencias necesarias para trabajar con este framework.
- Dirígete a la página oficial de Node.js: https://nodejs.org.
- Te recomiendo que descargues la versión LTS (Long Term Support), ya que es la más estable.
- Descarga el instalador según tu sistema operativo y sigue los pasos en pantalla para instalar Node.js.
Una vez instalado, abre la terminal (en Windows, puedes buscar «Símbolo del sistema» o «CMD»; en Mac o Linux, usa la aplicación Terminal). Para verificar que la instalación fue correcta, escribe:
-v
Esto te mostrará la versión de Node.js instalada. Además, asegúrate de tener npm (Node Package Manager) instalado con el siguiente comando:
npm -v
5. Recomendaciones Adicionales
Si bien puedes instalar más extensiones para mejorar tu flujo de trabajo, lo importante en esta fase es tener configurado correctamente Visual Studio Code, un navegador compatible y Node.js. No es necesario preocuparse por extensiones adicionales en esta etapa.
Conclusión
Con todo esto listo, tendrás tu entorno de desarrollo completamente preparado para comenzar a trabajar con React. En la siguiente clase, veremos cómo instalar React en tu equipo y crear tu primer proyecto.
¡Nos vemos en la próxima clase!