Tips para mejorar tu desarrollo con React y VSCode

Photo by Chris Liverani on Unsplash

En esta entrada compartiré algunos tips para desarrollar aplicaciones ReactJS mas rápido y localizar errores con mayor facilidad utilizando VSCode. Y como siempre es mejor practicar mientras leemos, haremos un sencillo ejemplo donde poner en práctica lo que vamos aprendiendo. Yo era mucho de console.log (y aun lo soy) y de clicar con el ratón, pero poco a poco intento quitarme esos hábitos y usar solo el teclado y snippets, y he de decir que acelero mis tiempos de desarrollo bastante.

Lo primero que haremos será crear un nuevo proyecto con create-react-app. Si no lo tienes, instálalo de forma global:

npm i -g create-react-app

Y generamos un proyecto al que llamaremos practica-react:

create-react-app practica-react

Lo siguiente que haremos será abrir el VSCode (code . ) e instalar las siguientes extensiones (shift+cmd+x para abrir el menu de extensiones de VSCode):

• Debugger for chrome: nos permitirá debuggear nuestras aplicaciones React con el debugger de VSCode.
• ES7 React/Redux/GraphQL/React-Native snippets: nos provee de una serie de snippets muy útiles para crear distintos tipos de componentes.
• Javascript (ES6) code snippets: nos provee de pequeños snippets para crear elementos ES6 de forma rápida.
• Auto Import — ES6 & TS: nos auto-completa los import de elementos en nuestro workspace.

Recargamos VSCode para que habilite las extensiones y ya estamos listos. De momento usaremos estas tres extensiones. Al final del post comentaré otras extensiones que utilizo que también te serán de utilidad.

Aprendiendo a debuggear:

Lo primero que tenemos que aprender es a debuggear nuestra aplicación. Es cierto que con el debugger de google chrome se puede debuggear, y añadir console.log por todo el código es otra opción, pero creo que usar el Debugger de VSCode nos hace la vida bastante mas sencilla.

Vamos al debugger de chrome (shift + cmd + D) y en la parte superior veremos que nos indica que no hay configuraciones aun para el debugger.

Debugger sin configuracion

Desplegamos el menu y seleccionamos Add configuration:

Añadir configuracion

Lo siguiente que nos pedirá es que elijamos el entorno, en este caso usaremos Chrome:

Seleccionar Chrome como entorno

Esto nos generará un archivo de configuración llamado launch.json que se ubicará dentro de la carpeta .vscode de nuestro proyecto:

Si te fijas, esta indicando al debugger que escuche en localhost:8080 pero la aplicaciones creadas por create-react-app publican en el puerto 3000, así que cambiaremos el puerto al 3000 y guardamos el fichero.

Lo siguiente que haremos es abrir el archivo src/App.js y añadir un método componentDidMount para realizar una pequeña prueba del debugger. Para ello nos aprovecharemos de nuestros snippets de react y simplemente tecleando cdm nos añadirá un componentDidMount.

cdm ComponentDidMount

También vamos a añadirle un estado a nuestro componente que simplemente nos indicará si ya se ha cargado.

state = {
 loaded: false
}

Y en nuestro componentDidMount indicamos que actualice el state con loaded a true.

componentDidMount = () => {
  this.setState({ loaded: true });
}

Añadiremos un breakpoint pulsando a la izquierda de la linea (se marcará un punto en rojo) de donde se encuentra el this.setState del componentDidMount y otro en la linea del header, guardamos y arrancamos nuestro proyecto con npm start.

Nuestra aplicación arrancará en el puerto 3000 pero como ves no se ha parado en el breakpoint. Para ello vamos al debugger (cmd + shift + D) y lo arrancamos (f5). Se abrirá una nueva ventana y veremos que entra antes por el header que por el componentDidMount. Eso es porque hasta que no se termina de montar el componente, el componentDidMount no se dispara. En este punto si miramos en las variables a la izquierda, state.loaded es false aún.

Pulsamos F5 para que continue el flujo y entrará por el componentDidMount, se parará en el breakpoint y aún seguirá siendo false. Esto es porque el setState no se ha disparado aun. Volvemos a pulsar F5 y se parará en el header de nuevo, pero veremos que esta vez state.loaded si es true. Eso es debido a que tras pasar por el componentDidMount, el estado de nuestro componente se ha actualizado. Esto implica que el método render se volverá a ejecutar con el nuevo estado y así podemos ver que el estado ha cambiado.

De esta forma podemos debuggear nuestras aplicaciones React usando el debugger. Es un ejemplo sencillo pero seguro te pone en el camino para empezar a usarlo habitualmente. 😜

Desarrollando utilizando solo el teclado

Lo siguiente que haremos será crear un nuevo componente, para ello con cmd + shift + n VsCode nos genera un nuevo archivo, lo guardamos en src/ con el nombre Name.jsx.

Vamos a crear un componente funcional que simplemente nos devuelva un nombre que le pasemos por parámetro, para ello haremos uso de nuestros snippets de React y tecleando rfcp (abreviatura de react functional component) y pulsando el tabulador nos creará un componente funcional con PropTypes listo para rellenar. Fíjate que nos ha añadido también como nombre el nombre del fichero, por lo que ahorramos bastante tiempo.

Lo siguiente que haremos es en los parámetros de la función, obtener el texto de las props y dentro del div añadir un h1 para mostrarlo.

Podemos hacerlo clicando con el ratón pero ¿y si empezamos a usar el teclado para estas cosas? 🤔 Vamos a hacerlo sin el ratón:

1. cmd + f: abre el buscador, escribimos props
2. pulsamos esc para salir del buscador, tendremos el cursor al final de la linea de props.
3. cmd + d: selecciona la palabra props
4. escribimos: { text }
5. pulsamos tres veces la flecha del teclado hacia abajo y escribimos h1 + tabulador y a continuación { text }

Finalmente añadiremos la definición del tipo de text como string dentro de las PropTypes. Para ello nos vamos a la linea donde definimos las PropTypes (en mi caso es la 13) con ctrl + g y escribiendo el nº de la linea.

1. pulsamos tabulador para indentar
2. escribimos text: y a continuación pts + tabulador, y nos añadirá automáticamente el tipo string de las PropTypes.
3. guardamos el fichero

Y así hemos creando un componente sin tocar el ratón. 😄

Lo siguiente es importarlo en nuestro fichero App.js, para ello:

1. cmd + p: escribimos App.js para abrir el fichero
2. nos movemos con las flechas hasta debajo del párrafo y escribimos <Name y pulsamos tabulador. Gracias al plugin de AutoImport, nos importará el componente.
3. Terminamos de añadirle la propiedad text con un valor y cerramos el componente.
4. guardamos el fichero

Si nos movemos al chrome con el teclado ( cmd + tab) verás que ahora aparece el texto en la web. De esta forma hemos desarrollado un nuevo componente, lo hemos importado y utilizado sin tocar el ratón, lo que con la práctica y memorizando un par de comandos y snippets te ahorrará mucho tiempo e incrementará muchísimo tu productividad.

Utilizando snippets de ES6

A continuación vamos a hablar de la extension Javascript (ES6) code snippets que instalamos al principio. Si consulta su documentación verás que al igual que creamos componentes con la extension de react, podemos crear elementos de ES6 fácilmente. Algunos ejemplos:

• dob: crea la sintaxis para desestructurar un objeto. Este snippet es muy útil cuando hacemos cosillas como.

const { valor1, valor2, valor3 } = this.state.

• dar: crea la sintaxis para desestructurar un array. Es útil cuando queremos sacar los valores de un array:

const  [first, second] = [1,2]

• nfn: crea una función con nombre básica.

Te recomiendo que leas todas las opciones que tiene y automatices las que más utilices o si encuentras una extensión mas completa, la dejes en los comentarios a este post.

Bonus: mi tema de VSCod, eotras extensiones útiles y shorcuts

El tema que utilizo en VSCode es el One Dark Theme junto con Material Icon Theme ara los iconos.

Color info: nos provee de información sobre los colores cuando estamos añadiendo estilos y tiene un color picker para modificarlos.

Markdown Preview: nos permite previsualizar archivos markdown como los Readme. Es muy útil para ver como van quedando tus archivos readme según los redactas.

Git history: permite ver información sobre las ramas y el trabajo en el repositorio.

EsLint: permite integrar el linter de javascript en el VSCode para lintear nuestro código javascript cómodamente.

StyleLint: un linter para nuestros estilos que nos ayuda a escribir css / less y/o scss mas limpio.

Prettier: auto formatea el código que escribes según las reglas que definamos.

EditorConfig for VS Code: nos permite leer la configuración de un fichero .editorconfig y configurar nuestro VSCode respecto a sus reglas.

Otros shorcuts que utilizo y son muy útiles a la hora de desarrollar:

shift + flechas: selecciona el texto partiendo del cursor.

alt + flechas (arriba / abajo): mueve la selección actual

alt + shift + flechas (arriba / abajo): crea una copia de la linea actual

Espero que te haya gustado el post y sobretodo te sea útil. Nos vemos en twitter (@ivanbtrujillo) !