Los primeros pasos en el desarrollo web con React pueden ser un desafío emocionante. Estás aquí porque quieres aprender cómo configurar rápidamente y de manera eficiente tu entorno de desarrollo y comenzar tu primer proyecto. Esta guía te llevará a través de los pasos necesarios para crear una aplicación React con Vite como herramienta de construcción.
Principales conclusiones
Para configurar un entorno de desarrollo de React, necesitarás Visual Studio Code, Node.js y NPM. Con los comandos y herramientas correctas, podrás crear tu primera aplicación React y verla en el navegador en poco tiempo.
Guía paso a paso
Configuración del entorno de desarrollo
Antes de empezar con el desarrollo propiamente dicho, asegúrate de tener las herramientas correctas. Lo primero que debes hacer es instalar Visual Studio Code. Es un entorno de desarrollo popular y gratuito de Microsoft, diseñado específicamente para el desarrollo en JavaScript. Para descargar Visual Studio Code, visita el sitio web oficial y sigue las instrucciones para la descarga e instalación.
Además de Visual Studio Code, necesitarás Node.js, que proporciona el entorno de ejecución de JavaScript, y NPM, el administrador de paquetes. Puedes descargar Node.js desde el sitio web de Node.js. Haz clic en la página de descarga y elige la versión LTS (Long-Term Support) para obtener una versión estable y probada.
Instalación y verificación de Node.js y NPM
Una vez que hayas instalado Node.js, verifica que todo se haya instalado correctamente. Abre una terminal. Puedes hacerlo directamente en Visual Studio Code, yendo a "Terminal" y luego a "Nuevo terminal". Ingresa el comando npm -v en la terminal. Si no se muestra el número de versión, es posible que tengas un problema con la instalación.
También debes asegurarte de que Node.js funcione correctamente. Puedes hacerlo ingresando el comando node -v en la terminal. Ambos comandos deberían devolver la versión instalada de NPM y Node.js.
Creación del nuevo proyecto con Vite
El siguiente paso es crear un nuevo proyecto. Para ello, utiliza npm create vite, seguido del nombre de tu aplicación. En este ejemplo, estamos trabajando con una "To-Do App". Esto iniciará un asistente que te ofrecerá varias opciones. Se te preguntará si quieres usar React u otro framework. Selecciona "React".
Luego se te preguntará si quieres utilizar React con TypeScript. Para empezar, es más conveniente trabajar sin TypeScript, así que elige la opción predeterminada "React".
Cambio al directorio del proyecto
Una vez que se haya creado el proyecto exitosamente, cambia al directorio recién creado de tu aplicación. Para hacerlo, utiliza el comando cd todo-app. Una vez allí, deberás instalar los paquetes necesarios. Ingresa el comando npm install en la terminal. Esto instalará todas las dependencias necesarias, incluido React.
Inicio del servidor de desarrollo
Ahora viene la parte emocionante: ¡puedes iniciar el servidor de desarrollo! Ingresa el comando npm run dev. Esto iniciará el servidor de desarrollo de Vite, y recibirás una URL desde la cual podrás acceder a tu aplicación en el navegador.
Abre un navegador web actualizado e ingresa la dirección indicada. Deberías ver un sitio web sencillo con un logo giratorio y algo de texto, así como un botón que muestra un contador.
Personalización de la aplicación
Para tener una primera impresión de la funcionalidad, puedes hacer pequeñas personalizaciones en tu aplicación. Abre el archivo src/main.jsx y modifica el texto en el componente App. Guarda el archivo y observa cómo los cambios se actualizan de inmediato en el navegador, sin necesidad de recargar la página. Esto te muestra lo eficiente que es la recarga en caliente (Hot Reloading) en Vite, una excelente función para obtener comentarios rápidos durante el desarrollo.
Ten en cuenta que el contador se mantiene intacto incluso cuando se actualiza el texto. Esta es una de las fortalezas de React: el estado se mantiene, incluso cuando se actualiza la interfaz de usuario.
Resumen
Has configurado con éxito tu entorno de desarrollo, instalado Node.js y NPM, creado un nuevo proyecto de React y lo has puesto en marcha en tu navegador. Así se sientan las bases para la configuración de una aplicación React con Vite, y ahora puedes comenzar con tu primera aplicación.
Preguntas frecuentes
¿Qué es Vite?Vite es una herramienta de construcción moderna para JavaScript que ofrece un servidor de desarrollo rápido y un empaquetado optimizado.
¿Qué versión de Node.js debo instalar?Se recomienda instalar la versión LTS (Soporte a Largo Plazo) de Node.js.
¿Necesito Vite para el desarrollo con React?Vite no es estrictamente necesario, pero ofrece beneficios en cuanto a velocidad y eficiencia durante el desarrollo.
¿React solo admite JavaScript?React también es compatible con TypeScript y otros dialectos de JavaScript, pero para empezar, JavaScript es suficiente.
¿Puedo usar React con otros editores?Sí, puedes usar React con cualquier editor de código o IDE, pero se recomienda con frecuencia Visual Studio Code.
