00
:
00
:
00
:
00
•Corso SEO AI - Usa SEOEMAIL al checkout per il 30% di sconto

Installazione e Setup

Edoardo Midali
Edoardo Midali

Prerequisiti

Prima di iniziare con React, assicurati di avere installato Node.js (versione 18 o superiore) e npm (incluso con Node.js) o un package manager alternativo come pnpm o yarn.

# Verifica le versioni installate
node --version   # v18.0.0 o superiore
npm --version    # 9.0.0 o superiore

Creare un Progetto con Vite

Vite è il build tool consigliato per nuovi progetti React. È estremamente veloce grazie all’uso di ES modules nativi durante lo sviluppo e di Rollup per la build di produzione.

# Crea un nuovo progetto React con Vite
npm create vite@latest mio-progetto -- --template react

# Per TypeScript
npm create vite@latest mio-progetto -- --template react-ts

# Con pnpm
pnpm create vite mio-progetto --template react-ts

# Con yarn
yarn create vite mio-progetto --template react-ts

Dopo la creazione, entra nella cartella e installa le dipendenze.

cd mio-progetto
npm install
npm run dev

Il dev server si avvierà su http://localhost:5173 con Hot Module Replacement (HMR), che aggiorna la pagina istantaneamente ad ogni modifica del codice.

Struttura Progetto Vite

mio-progetto/
├── node_modules/
├── public/
│   └── vite.svg            # Asset statici
├── src/
│   ├── assets/
│   │   └── react.svg       # Asset importabili
│   ├── App.css              # Stili del componente App
│   ├── App.tsx              # Componente principale
│   ├── index.css            # Stili globali
│   └── main.tsx             # Entry point dell'applicazione
├── index.html               # Template HTML
├── package.json             # Dipendenze e script
├── tsconfig.json            # Configurazione TypeScript
└── vite.config.ts           # Configurazione Vite

Configurazione Vite

Il file vite.config.ts permette di personalizzare il comportamento del build tool.

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

export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000,        // Porta personalizzata
    open: true,        // Apri il browser automaticamente
  },
  resolve: {
    alias: {
      "@": "/src",     // Alias per import più puliti
    },
  },
});

Create React App (Legacy)

Create React App (CRA) è stato lo strumento ufficiale per creare progetti React per molti anni. Tuttavia, dal 2023 non è più raccomandato dalla documentazione ufficiale di React in favore di framework come Next.js o tool come Vite.

# Non più consigliato, ma ancora funzionante
npx create-react-app mio-progetto
npx create-react-app mio-progetto --template typescript

Struttura Progetto CRA

mio-progetto/
├── node_modules/
├── public/
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
├── src/
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   └── setupTests.js
├── package.json
└── README.md

Perché Preferire Vite a CRA

Aspetto Vite Create React App
Avvio dev server Istantaneo Lento (bundle completo)
HMR Ultra veloce Lento su progetti grandi
Build produzione Rollup (veloce) Webpack (più lento)
Configurazione Semplice e flessibile Nascosta (eject per personalizzare)
Manutenzione Attivamente mantenuto Praticamente abbandonato

Il File Entry Point

Il punto di ingresso dell’applicazione React è main.tsx (Vite) o index.js (CRA). Qui React viene montato nel DOM.

// src/main.tsx (Vite + TypeScript)
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>
);

React.StrictMode

StrictMode è un componente wrapper che aiuta a trovare problemi durante lo sviluppo.

  • Doppio rendering: In development, i componenti vengono renderizzati due volte per trovare effetti collaterali impuri
  • Doppia esecuzione degli effetti: Gli effetti vengono eseguiti e ripuliti una volta in più
  • Avvisi per API deprecate: Segnala l’uso di pattern obsoleti
// StrictMode è attivo solo in development, zero impatto in produzione
<React.StrictMode>
  <App />
</React.StrictMode>

Il Primo Componente

Sostituiamo il contenuto di App.tsx con un componente semplice.

// src/App.tsx
function App() {
  return (
    <div className="app">
      <header>
        <h1>La mia prima app React</h1>
        <p>Benvenuto nel mondo di React!</p>
      </header>
      <main>
        <Saluto nome="Marco" />
        <Saluto nome="Laura" />
      </main>
    </div>
  );
}

function Saluto({ nome }: { nome: string }) {
  return (
    <div className="saluto">
      <h2>Ciao, {nome}!</h2>
      <p>Questo è il tuo primo componente React.</p>
    </div>
  );
}

export default App;

Script Disponibili

Ogni progetto React include script predefiniti nel package.json.

{
  "scripts": {
    "dev": "vite",              // Avvia il dev server
    "build": "vite build",       // Build per produzione
    "preview": "vite preview",   // Anteprima della build
    "lint": "eslint ."           // Linting del codice
  }
}

# Sviluppo
npm run dev

# Build di produzione
npm run build

# Anteprima della build di produzione
npm run preview

Organizzazione delle Cartelle

Per progetti più strutturati, ecco una organizzazione consigliata.

src/
├── components/          # Componenti riutilizzabili
│   ├── ui/              # Componenti UI base (Button, Input, Card)
│   ├── layout/          # Layout (Header, Footer, Sidebar)
│   └── common/          # Componenti condivisi
├── pages/               # Componenti pagina
├── hooks/               # Custom hooks
├── context/             # Context providers
├── utils/               # Funzioni di utilità
├── services/            # Chiamate API
├── types/               # Tipi TypeScript
├── styles/              # Stili globali
├── assets/              # Immagini, font, ecc.
├── App.tsx
└── main.tsx

Esempio di Componente Organizzato

src/components/ui/Button/
├── Button.tsx           # Componente
├── Button.module.css    # Stili (CSS Modules)
├── Button.test.tsx      # Test
└── index.ts             # Re-export

// src/components/ui/Button/Button.tsx
import styles from "./Button.module.css";

interface ButtonProps {
  children: React.ReactNode;
  variant?: "primary" | "secondary";
  onClick?: () => void;
}

export function Button({ children, variant = "primary", onClick }: ButtonProps) {
  return (
    <button className={styles[variant]} onClick={onClick}>
      {children}
    </button>
  );
}

// src/components/ui/Button/index.ts
export { Button } from "./Button";

Installare Dipendenze Comuni

Ecco le dipendenze più utilizzate nei progetti React.

# Routing
npm install react-router-dom

# Gestione stato
npm install zustand
# oppure
npm install @reduxjs/toolkit react-redux

# Fetching dati
npm install @tanstack/react-query

# Form
npm install react-hook-form zod @hookform/resolvers

# UI Components
npm install @radix-ui/react-dialog @radix-ui/react-dropdown-menu

# Icone
npm install lucide-react

# Utility CSS
npm install tailwindcss @tailwindcss/vite

Per avviare un nuovo progetto React nel 2026, Vite è la scelta consigliata per la sua velocità e semplicità. Crea il progetto con npm create vite@latest, organizza le cartelle in modo logico fin dall’inizio e sfrutta TypeScript per una migliore esperienza di sviluppo. Nelle prossime guide esploreremo JSX, i componenti e tutto ciò che serve per costruire applicazioni React complete.

PrecedentePanoramicaSuccessivoJSX e Basi