Configurando tu proyecto React

Creando tu primer proyecto React

Antes de escribir componentes necesitas un proyecto configurado: un servidor de desarrollo, un empaquetador y la estructura de archivos. Hoy la forma recomendada es usar Vite, una herramienta moderna y muy rápida.

Opción recomendada: Vite

Vite crea el proyecto, instala lo mínimo necesario y arranca un servidor con recarga instantánea:

# 1. Crear el proyecto con la plantilla de React

npm create vite@latest mi-app -- --template react



# 2. Entrar a la carpeta

cd mi-app



# 3. Instalar las dependencias

npm install



# 4. Arrancar el servidor de desarrollo

npm run dev

Al terminar verás una URL como http://localhost:5173. Ábrela en el navegador y tendrás tu aplicación funcionando con recarga en caliente.

Estructura típica del proyecto

mi-app/

├── node_modules/      (dependencias instaladas)

├── public/            (archivos estáticos)

├── src/

│   ├── App.jsx        (componente principal)

│   ├── App.css

│   ├── main.jsx       (punto de entrada)

│   └── index.css

├── index.html

├── package.json       (scripts y dependencias)

└── vite.config.js

Los archivos clave

main.jsx: el punto de entrada

import React from 'react'

import ReactDOM from 'react-dom/client'

import App from './App'

import './index.css'



ReactDOM.createRoot(document.getElementById('root')).render(

  <React.StrictMode>

    <App />

  </React.StrictMode>

)

App.jsx: tu componente principal

function App() {

  return (

    <div>

      <h1>¡Hola, React!</h1>

    </div>

  )

}



export default App

Extensiones útiles para VS Code

• ES7+ React/Redux snippets: atajos como rafce para crear componentes al instante.


• Prettier: formatea el código automáticamente al guardar.


• ESLint: detecta errores y malas prácticas mientras escribes.

Ejercicio práctico