Configurando tu proyecto React

Creando tu primer proyecto React

Hay varias formas de crear un proyecto React. Te mostramos las mas populares.

Opcion 1: Vite (Recomendado)

Vite es la herramienta moderna mas rapida para crear proyectos React:

# Crear proyecto con Vite
npm create vite@latest mi-app -- --template react

# Entrar al directorio
cd mi-app

# Instalar dependencias
npm install

# Iniciar servidor de desarrollo
npm run dev

Opcion 2: Create React App

# Crear proyecto con CRA (mas lento)
npx create-react-app mi-app
cd mi-app
npm start

Estructura del proyecto

mi-app/
├── node_modules/
├── public/
│   └── index.html
├── src/
│   ├── App.jsx
│   ├── App.css
│   ├── main.jsx
│   └── index.css
├── package.json
└── vite.config.js

Archivos importantes

main.jsx - 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 - Componente principal

function App() {
  return (
    <div>
      <h1>Hola React!</h1>
    </div>
  )
}

export default App

Extensiones recomendadas para VS Code

• ES7+ React snippets: Atajos para crear componentes
• Prettier: Formateo automatico
• ESLint: Detecta errores