Crear un nuevo proyecto de React con Vite

Vite es una alternativa muy rápida y ligera al ya conocido create-react-app, y al decir alternativa muy rápida , no es exageración.

Iniciar un proyecto es muy sencillo, en este caso usaré solamente yarn:

$ yarn create vite react-project --template react

Hay que resaltar que esto nos creará un proyecto de React con javascript, si deseas manejar typescript bastaría con cambiar el nombre del template a react-ts.

Agregar proptypes, prettier y eslint

En mí caso, estoy tratando de aprender a desarrollar en vim, así que los siguientes pasos dependen mucho de tu editor, pero estas dependencias son generales a casi cualquier proyecto React.

Primero proptypes:

$ yarn add proptypes

Y ahora prettier y eslint:

$ yarn add -D prettier eslint eslint-plugin-react

Configurar eslint

Para configurar eslint basta con ejecutar:

$ yarn eslint --init

# Seleccionar lo siguiente:
# To check syntax and find problems
# Javascript modules (import/export)
# React
# Para JS, no; para TS, yes
# Browser
# JSON

Eslint y vite tienen un pequeño conflicto en cuanto a la declaración del import React from "react", ya que en React 17 ya no es necesario importarlo, pero vite pide esa declaración, pero, podemos configurar eslint para que detecte automáticamente la versión de React, basta con agregar lo siguiente a tu archivo .eslintrc.json antes de la última llave de cierre:

		"rules": {
      "react/jsx-uses-react": "off",
      "react/react-in-jsx-scope": "off"
    },
    "settings": {
      "react": {
       "version": "detect"
    }

Y configuramos vite para que inyecte automáticamente el import en la sección de esbuild:

esbuild: {
    jsxInject: `import React from "react";`
  }

Hay que aclarar que, con esto hay que remover cada declaración de import React from "react" de tus archivos de componentes (JS/JSX según sea el caso), si necesitas importar algún hook basta con hacerlo sin importar React, es decir, basta con import { useState } from "react"

Ejecutar prettier y eslint

Bien, como mencioné anteriormente, estoy aprendiendo a desarrollar en vim (y a desarrollar frontend en general), por lo que en mi caso ejecuto estas utilidades desde la barra de comandos de vim de la siguiente forma:

:yarn prettier -w %
:yarn eslint %

Con prettier me acomoda automáticamente el código y se ve reflejado en el editor en cuanto termina de ejecutarse.

En cuanto a eslint, este me muestra los errores en la consola y toca revisar para corregir.

Hay otras formas para hacer el uso de eslint en vim mucho más sencillo, pero de momento me siento cómodo así, aunque estoy aprendiendo y viendo las opciones.

Por ahora es todo, espero que esta información le sea de utilidad a alguien. Para algo mucho más detallado en cuanto a configuración de proyectos en JS, recomiendo el artículo de Escuela Frontend, mucho más explicito y paso a paso para un proyecto en Vanilla JS.