Entorno de trabajo para React

Trabajar con React y Visual Studio Code (VS Code) es una combinación popular y efectiva para desarrollar aplicaciones híbridas. Aquí tienes una guía paso a paso para instalar un entorno de trabajo para React React y VS Code.

Nota: la explicación a continuación se realiza para Windows 10, pero aplica los mismos pasos para cualquier otro sistema operativo, se dejara información sobre la instalación en otro S.O. 

Instalar Node 

Primero, asegúrate de tener Node.js y npm instalados en tu máquina. Node.js incluye npm, que es el administrador de paquetes de Node.

Descargar Node.js

Ve a la página de descarga de Node.js y descarga la versión LTS (Long Term Support).

Instalación

Sigue las instrucciones del instalador para tu sistema operativo.

• https://learn.microsoft.com/es-es/windows/dev-environment/javascript/nodejs-on-windows
• https://www.digitalocean.com/community/tutorials/how-to-install-node-js-on-ubuntu-20-04-es

Para verificar la instalación, abre una terminal y ejecuta:

node -v
npm -v

Instalación de Visual Studio Code

Si aún no tienes Visual Studio Code, descárgalo e instálalo desde la página oficial de VS Code.

Extensiones recomendadas para VS Code

Para mejorar tu experiencia de desarrollo con React, instala las siguientes extensiones:

Simple React Snippets

Proporciona fragmentos de código (snippets) para componentes y hooks de React, lo que facilita la escritura rápida de código React con patrones comunes y estructurados.

Integrated Terminal Filedir

Añade un terminal integrado en Visual Studio Code que abre automáticamente en el directorio del archivo actual, lo cual es útil para ejecutar comandos específicos del proyecto sin tener que navegar manualmente al directorio adecuado.

ES7 React/Redux/GraphQL/React-Native snippets

Ofrece una amplia gama de fragmentos de código para desarrollo con React, Redux, GraphQL y React Native. Estos snippets cubren una variedad de estructuras de código y patrones comunes, acelerando el proceso de desarrollo.

JavaScript (ES6) code snippets

Proporciona fragmentos de código para JavaScript ES6, incluyendo las nuevas sintaxis y características como arrow functions, destructuring, template literals, modules, etc.

Live Server

Inicia un servidor de desarrollo local con recarga en vivo. Esto significa que cada vez que guardas cambios en tu código, el navegador se actualiza automáticamente para reflejar esos cambios, lo que mejora la eficiencia al desarrollar aplicaciones web.

Paste JSON as Code

Permite pegar un JSON y convertirlo automáticamente en código correspondiente a varios lenguajes, como TypeScript, C#, Go, etc. Esto facilita la creación de modelos y tipos a partir de estructuras JSON.

Bracket Pair Color DLW

Colorea los pares de corchetes, llaves y paréntesis con diferentes colores para hacer más fácil la lectura del código y la identificación de bloques de código anidados. Esto mejora la comprensión y mantenimiento del código, especialmente en archivos con mucha anidación.