Tutorial ReactJS: Creare la Tua Prima Applicazione React

Ciao là, futuri sviluppatori React! Sono entusiasta di intraprendere questo viaggio con voi mentre ci immergiamo nel mondo di ReactJS. Come qualcuno che ha insegnato scienze informatiche per oltre un decennio, posso assicurarvi che React non è solo potente ma anche incredibilmente divertente da imparare. Allora, iniziamo!

Cos'è ReactJS?

React è una libreria JavaScript per costruire interfacce utente. È stata sviluppata da Facebook e da allora è diventata una delle librerie front-end più popolari al mondo. Ma non preoccupatevi se sembra intimidatorio - lo analizzeremo passo per passo.

Perché React?

Immagina di costruire una casa di carte. Ogni volta che vuoi cambiare qualcosa, devi regolare con cura ogni carta, vero? React è come avere carte magiche che si adattano automaticamente quando cambi una parte. Rende la costruzione e l'aggiornamento delle applicazioni web molto più facile e veloce.

Prerequisiti

Prima di immergerci, assicuriamoci di avere tutto il necessario:

1. Una comprensione di base di HTML e CSS
2. Familiarità con JavaScript (non preoccupatevi, esamineremo mentre procediamo)
3. Un editor di testo (raccomando Visual Studio Code)
4. Node.js installato sul tuo computer

Configurare il Tuo Primo Progetto React

Iniziamo creando il nostro primo progetto React. Useremo uno strumento chiamato Create React App, che imposta tutto il necessario con un solo comando.

1. Apri il tuo terminale o prompt dei comandi
2. Naviga nella cartella dove vuoi creare il tuo progetto
3. Esegui il seguente comando:

npx create-react-app my-first-react-app

Questo potrebbe richiedere alcuni minuti. Una volta completato, naviga nella tua nuova cartella del progetto:

cd my-first-react-app

Ora, avviamo l'app:

npm start

Voilà! Dovresti vedere una nuova finestra del browser aprire con la tua prima app React in esecuzione. Non è molto ancora, ma stiamo solo iniziando!

Comprendere la Struttura del Progetto

Diamo un'occhiata a cosa ha impostato Create React App per noi:

my-first-react-app/
README.md
node_modules/
package.json
public/
index.html
favicon.ico
src/
App.css
App.js
App.test.js
index.css
index.js
logo.svg

I file più importanti per noi ora sono nella cartella src. App.js è dove scriveremo la maggior parte del nostro codice.

Il Tuo Primo Componente React

Apri src/App.js nel tuo editor di testo. Dovresti vedere qualcosa come questo:

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Modifica <code>src/App.js</code> e salva per ricaricare.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Impara React
</a>
</header>
</div>
);
}

export default App;

Questo è un componente React. Non preoccuparti se sembra confusionario - lo analizzeremo:

1. Importiamo React e altri file necessari
2. Definiamo una funzione chiamata App
3. Questa funzione restituisce del JSX (JavaScript XML) - una sintassi speciale che assomiglia all'HTML ma ci permette di utilizzare JavaScript al suo interno
4. Infine, esportiamo il componente così può essere utilizzato altrove

Modifichiamo questo componente per renderlo nostro:

import React from 'react';
import './App.css';

function App() {
return (
<div className="App">
<h1>Benvenuto nella Mia Prima App React!</h1>
<p Sono entusiasta di imparare React!</p>
</div>
);
}

export default App;

Salva il file e controlla il tuo browser - dovrebbe aggiornarsi automaticamente!

Aggiungere Interattività con lo Stato

Ora, rendiamo la nostra app un po' più interattiva aggiungendo un pulsante che conta quante volte è stato cliccato.

Sostituisci il contenuto di App.js con questo:

import React, { useState } from 'react';
import './App.css';

function App() {
const [count, setCount] = useState(0);

function handleClick() {
setCount(count + 1);
}

return (
<div className="App">
<h1>Benvenuto nella Mia Prima App React!</h1>
<p Sono entusiasta di imparare React!</p>
<button onClick={handleClick}>
Mi hai cliccato {count} volte
</button>
</div>
);
}

export default App;

Analizziamo questo:

1. Importiamo useState, un hook di React che ci permette di aggiungere stato al nostro componente
2. Utilizziamo useState(0) per creare una variabile di stato count e una funzione setCount per aggiornarla
3. Definiamo una funzione handleClick che incrementa il contatore
4. Nel nostro JSX, aggiungiamo un pulsante che visualizza il contatore e chiama handleClick quando viene cliccato

Salva e controlla il tuo browser - dovresti ora avere un pulsante che conta i tuoi clic!

Creare un Nuovo Componente

Mentre la nostra app cresce, vorremo suddividerla in componenti più piccoli e riutilizzabili. Creiamo un nuovo componente per il nostro contatore.

Crea un nuovo file src/Counter.js e aggiungi questo codice:

import React, { useState } from 'react';

function Counter() {
const [count, setCount] = useState(0);

function handleClick() {
setCount(count + 1);
}

return (
<div>
<button onClick={handleClick}>
Mi hai cliccato {count} volte
</button>
</div>
);
}

export default Counter;

Ora, utilizziamo questo nuovo componente nel nostro App.js:

import React from 'react';
import './App.css';
import Counter from './Counter';

function App() {
return (
<div className="App">
<h1>Benvenuto nella Mia Prima App React!</h1>
<p Sono entusiasta di imparare React!</p>
<Counter />
<Counter />
</div>
);
}

export default App;

Guarda quello! Ora abbiamo due contatori indipendenti sulla nostra pagina.

Conclusione

Congratulazioni! Hai appena costruito la tua prima app React, imparato su componenti, stato e persino creato un componente riutilizzabile. Questo è solo l'inizio del tuo viaggio con React, ma hai già fatto molta strada.

Ricorda, imparare a codificare è come imparare una nuova lingua - richiede pratica e pazienza. Non essere scoraggiato se qualcosa non è chiaro subito. Continua a sperimentare, a costruire e, soprattutto, a divertirti!

Nella prossima lezione, esploreremo più a fondo le props di React, una gestione dello stato più complessa e inizieremo a costruire un'applicazione più sostanziale. Fino a quel momento, coding felice!

Credits: Image by storyset