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 NodeJS
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 de NodeJs
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
Instalar 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.
Enlace de descarga: https://marketplace.visualstudio.com/items?itemName=burkeholland.simple-react-snippets
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.
Enlace de descarga: https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets
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.
Enlace: https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets
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.
Enlace: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
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.
Enlace: https://marketplace.visualstudio.com/items?itemName=quicktype.quicktype
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.
Enlace: https://marketplace.visualstudio.com/items?itemName=BracketPairColorDLW.bracket-pair-color-dlw