A27L

Javascript - React - Crear proyecto con Vite

Introducción

Crear APP con react y Vite.

Inicializar un proyecto con npm

Crear el directorio del proyecto y inicializamos el fichero package.json

mkdir a27l-vite-react
cd a27l-vite-react
npm init -y

Instalar dependecias. Instalar Vite como dependencia de desarrollo.

npm install -E react react-dom
npm install -E -D vite @vitejs/plugin-react

Configuración de Vite vite.config.js

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
})

Añadir script para compilar en package.json

"scripts": {
    "dev": "vite",
    "build": "vite build --base=./",
    "preview": "vite preview",
}

Crear fichero HTML index.html

<!DOCTYPE html>
<html lang='es'>
<head>
    <title>A27l</title>
    <meta charset='utf-8'>
    <style>
    </style>
    </head>
    <body>
        <div id="app"></div>
        <script type="module" src="/index.jsx"></script>
    </body>
</html>

Crear fichero de punto de entrada de la aplicacción index.jsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
)

Componente principal ‘src/App.jsx’

import React from 'react'

const App = () => {
  return <h1>¡Hola, A27L!</h1>
}

export default App

Lanzar entorno de desarrollo

npm run dev

Añadir typescript para utilizar los @paths

npm install -E -D @types/node vite-tsconfig-paths

Crear fichero de configuración tsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

Actualizar fichero de configuración de Vite vite.config.js

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tsconfigPaths from 'vite-tsconfig-paths'
import path from 'path'

export default defineConfig({
  plugins: [react(), tsconfigPaths()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  }
})