Tutorial ReactJS per principianti

Cos'è ReactJS?

ReactJS è un front-end open source JavaLibreria di script per la creazione di interfacce utente. ReactJS È gestito da Meta (precedentemente Facebook) e da una comunità di sviluppatori e aziende. È ampiamente utilizzato come base per la creazione di applicazioni a pagina singola e applicazioni mobili. È molto facile da usare e consente agli utenti di creare componenti dell'interfaccia utente riutilizzabili.

Prima di scrivere la tua prima riga di codice React, è utile sapere cosa distingue la libreria dal semplice JavaScript. La sezione successiva illustra le sue caratteristiche principali.

Caratteristiche di ReactJS

JSX: JSX è un'estensione di JavaScript. Sebbene l'utilizzo di JSX in React non sia obbligatorio, è una delle sue funzionalità più utili e facili da usare.

Componenti: I componenti sono come puri JavaLe funzioni di scripting aiutano a semplificare il codice suddividendo la logica in codice indipendente e riutilizzabile. Possiamo usare i componenti come funzioni e come classi. I componenti hanno anche uno stato e delle proprietà, il che semplifica le cose. All'interno di un componente di classe, vengono gestiti lo stato e le proprietà.

DOM virtuale: React crea un DOM virtuale, ovvero una cache di strutture dati in memoria. Solo le modifiche finali vengono successivamente aggiornate nel DOM del browser, il che mantiene un rendering veloce.

JavaEspressioni di script: Le espressioni JS possono essere utilizzate nei file JSX tramite parentesi graffe, ad esempio {}.

Vantaggi di ReactJS

Ecco i principali vantaggi derivanti dall'utilizzo di ReactJS:

• ReactJS utilizza un DOM virtuale che si avvale di una cache di strutture dati in memoria, e solo le modifiche finali vengono aggiornate nel DOM del browser. Questo rende l'applicazione più veloce.
• Grazie alla funzionalità dei componenti di React, puoi creare componenti a tua scelta. I componenti possono essere riutilizzati e sono utili anche per la manutenzione del codice.
• ReactJS è un linguaggio open-source JavaLibreria di script, quindi è facile iniziare.
• ReactJS è diventato molto popolare in breve tempo e alimenta prodotti come Facebook e Instagram. Viene utilizzato da molte aziende famose come Apple, Netflix, ecc.
• Meta si occupa della manutenzione della libreria ReactJS, quindi è ben curata e costantemente aggiornata.
• ReactJS può essere utilizzato per sviluppare un'interfaccia utente ricca per app desktop e mobili.
• Facile da eseguire il debug e testare poiché la maggior parte della codifica viene eseguita JavaCopione piuttosto che in HTML.

Svantaggi di ReactJS

Ecco gli svantaggi dell'utilizzo di ReactJS:

• La maggior parte del codice è scritto in JSX, cioè HTML e CSS fanno parte del JavaScript. Può essere piuttosto confusionario, poiché la maggior parte degli altri framework preferisce mantenerloping HTML separato dal JavaCodice script.
• La dimensione del file di ReactJS è relativamente grande.

Conoscendo i compromessi, sei pronto per configurare React. Il modo più rapido per provarlo è direttamente da una CDN, argomento che tratteremo per primo; le configurazioni basate su npm per progetti reali seguiranno in seguito.

Utilizzo di ReactJS dalla CDN

Per iniziare a lavorare con React, dobbiamo prima aggiungere ReactJS alla nostra pagina. Puoi iniziare facilmente a usare ReactJS con la CDN JavaFile di script, come mostrato di seguito.

Vai al sito della documentazione legacy di React per ottenere i link CDN, ovvero: https://legacy.reactjs.org/docs/cdn-links.htmle otterrete i file necessari, come spiegato nell'immagine seguente.

Per sviluppatore

<script crossorigin src="https://unpkg.com/react@version/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@version/umd/react-dom.development.js"></script>

Per prod

<script crossorigin src="https://unpkg.com/react@version/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@version/umd/react-dom.production.min.js"></script>

sostituire versione con la versione di React che desideri sia per react.development.js che per react-dom.development.js. In questa pagina utilizziamo la versione 16, quindi gli esempi seguenti funzionano senza modifiche.

Nel caso in cui tu stia pianificando di utilizzare i file CDN, assicurati di mantenere l'attributo crossorigin per evitare problemi di cross-domain. Il codice ReactJS non può essere eseguito direttamente nel browser e deve essere transpilato utilizzando Babel in linguaggio semplice. JavaScript prima dell'esecuzione nel browser.

Ecco lo script BabelJS che può essere utilizzato:

<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

Ecco un esempio funzionante in ReactJS che utilizza file CDN e lo script BabelJS.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/babel">
      ReactDOM.render(
        <h1>Hello, from Guru99 Tutorials!</h1>,
        document.getElementById('app')
      );
   </script>
  </body>
</html>

Produzione:

Nel prossimo capitolo analizzeremo nel dettaglio il codice; per ora vediamo come funziona con i file CDN. Utilizzare direttamente lo script Babel non è una buona pratica e i principianti dovrebbero usarlo per ora solo per imparare ReactJS. In produzione, sarà necessario installare React tramite il pacchetto npm.

Utilizzo dei pacchetti NPM

Assicurati di avere Node.js installato. Se non è installato, segui questo tutorial per Node.js (https://www.guru99.com/node-js-tutorial.html) installazione.

Una volta installato Node.js, crea una cartella reactproj/.

Per iniziare con l'impostazione del progetto, esegui il comando npm inizia.

Ecco come apparirà la struttura delle cartelle:

reactproj\
package.json

Ora installeremo i pacchetti di cui abbiamo bisogno.

Ecco l'elenco dei pacchetti per ReactJS. Blocchiamo React alla versione 16 in modo che ReactDOM.render Gli esempi in questa pagina funzionano esattamente come mostrato:

npm install react@16 --save
npm install react-dom@16 --save
npm install react-scripts --save

Apri il prompt dei comandi ed esegui i comandi sopra indicati all'interno della cartella reactproj/.

Crea una cartella src / dove andrà tutto il codice JS. Tutto il codice del progetto ReactJS sarà disponibile nella cartella src/. Crea un file index.js e importa react e react-dom, come mostrato di seguito.

index.js

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
<h1>Hello, from Guru99 Tutorials!</h1>,
    document.getElementById('root')
);

Abbiamo scritto il codice base per ReactJS. Spiegheremo i dettagli nel prossimo capitolo. Vogliamo visualizzare Ciao, da Guru99 Tutoriale lo stesso viene assegnato all'elemento DOM con ID "root". Viene ricavato dal file index.html, che è il file iniziale, come mostrato di seguito.

Crea una cartella denominata public/ e aggiungi al suo interno il file index.html, come mostrato di seguito.

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title>
  </head>
  <body>
    <div id = "root"></div>
   </body>
</html>

Il pacchetto react-scripts si occuperà di compilare il codice e avviare il server per visualizzare il file HTML, ovvero index.html. È necessario aggiungere il comando in package.json che si occuperà di utilizzare react-scripts per compilare il codice e avviare il server, come mostrato di seguito:

 "scripts": {
    "start": "react-scripts start"
  }

Dopo aver installato tutti i pacchetti e aggiunto il comando precedente, il file package.json finale è il seguente:

Pacchetto.json

{
  "name": "reactproj",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "react-scripts start"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-scripts": "^3.1.1"
  }
}

Per iniziare a testare ReactJS, esegui il comando:

npm run start

C:\reactproj>npm run start
> reactproj@1.0.0 start C:\reactproj
> react-scripts start

Aprirà il browser con il URL http://localhost:3000/ come mostrato di seguito:

public/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title>
  </head>
  <body>
    <div id = "root"></div>
  </body>
</html>

Useremo lo stesso processo per eseguire il JavaAnche nei prossimi capitoli troverete i file script. Aggiungete tutti i vostri file .js e .jsx nella cartella src/. La struttura dei file sarà la seguente:

reactproj/
	 src/
	    index.js
	 node_modules/
	 public/
                index.html
	 package.json

Come creare la prima configurazione del progetto React

Ecco una guida passo passo in questo tutorial su ReactJS per iniziare a creare la tua prima applicazione React.

Passo 1) Importa i pacchetti di reazione.
1. Per iniziare con ReactJS, dobbiamo prima importare i pacchetti react come segue.

import React from 'react';
import ReactDOM from 'react-dom';

2. Salva il file come index.js nella cartella src/.

Passo 2) Scrivi semplice Code.
Scriveremo un semplice codice in questo tutorial React JS, in cui visualizzeremo il messaggio “Ciao, da Guru99 tutorial!

ReactDOM.render(

<h1>Hello, from Guru99 Tutorials!</h1>,
    document.getElementById('root')
);

ReactDOM.render aggiungerà il Aggiungiamo il tag all'elemento con ID root. Ecco il file HTML che abbiamo:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title>
  </head>
  <body>
    <div id = "root"></div>
  </body>
</html>

Passo 3) Compila il Code.

Successivamente in questo tutorial di React.js, dobbiamo compilare il codice per ottenere l'output nel browser.

Ecco la struttura delle cartelle:

reactproj/
     node_modules/
     src/
       index.js
     package.json
     public/
          index.html

Abbiamo aggiunto i comandi per compilare il file finale in package.json come segue:

"scripts": {
    "start": "react-scripts start"
  },

Per compilare il file finale, eseguire il seguente comando:

npm run start

Quando esegui il comando precedente, compilerà i file e ti avviserà se c'è qualche errore. Se tutto sembra a posto, aprirà il browser ed eseguirà la pagina all'indirizzo http://localhost:3000/

Comando: npm esegui avvio:

C:\reactproj>npm run start

> reactproj@1.0.0 start C:\reactproj
> react-scripts start

Passo 4) Controlla l'output.
Migliori URL http://localhost:3000 Si aprirà nel browser una volta compilato il codice, come mostrato di seguito:

Come configurare React con Vite (approccio moderno)

La configurazione di react-scripts sopra riportata proviene da Create React App (CRA), che è stato lo strumento di avvio standard per anni. Il team di React ha ufficialmente deprecato Create React App nel febbraio 2025, quindi i nuovi progetti dovrebbero utilizzare uno strumento di build moderno. La scelta più popolare oggi è rapidamente, che si avvia più velocemente e produce build più piccole.

Ecco come creare un nuovo progetto React con Vite:

Passo 1) Esegui il comando di scaffolding nel tuo terminale:

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

Passo 2) Spostati nella cartella e installa le dipendenze:

cd my-react-app
npm install

Passo 3) Avviare il server di sviluppo:

npm run dev

Vite fornisce l'app a http://localhost:5173/ Per impostazione predefinita, si ricarica istantaneamente al salvataggio di un file.

Principali differenze rispetto alla configurazione precedente presente in questa pagina:

• Il file di ingresso è src/main.jsx invece di src/index.js.
• Installa l'ultima versione di React, che utilizza createRoot invece di ReactDOM.render.
• Il file index.html si trova nella directory principale del progetto, non in public/.
• Le build vengono prodotte con npm run build in una cartella dist/.

Per esigenze full-stack come il routing e il rendering lato server, il team di React consiglia anche framework come Next.jsTutto ciò che apprenderai nei capitoli seguenti — JSX, componenti, stato e props — si applica senza modifiche a un progetto Vite o Next.js.

Cos'è JSX?

JSX è un'estensione di JavaScript. È uno script modello in cui avrai il potere di usare HTML e JavaScrivete la sceneggiatura insieme.

Ecco un semplice esempio di codice JSX.

const h1tag = "<h1>Hello, from Guru99 Tutorials!</h1>";

Perché abbiamo bisogno di JSX in React?

Per un'interfaccia utente, abbiamo bisogno di HTML, e ogni elemento nel DOM avrà degli eventi da gestire, cambiamenti di stato, ecc.

Nel caso di React, ci permette di utilizzare HTML e JavaInserisci lo script nello stesso file e gestisci in modo efficiente le modifiche di stato nel DOM.

Espressioni in JSX

Ecco un semplice esempio di come utilizzare le espressioni in JSX.

Negli esempi precedenti di ReactJS, avevamo scritto qualcosa del genere:

index.js

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
<h1>Hello, from Guru99 Tutorials!</h1>,
    document.getElementById('root')
);

Ora modificheremo il codice precedente per aggiungere espressioni. Le espressioni vengono utilizzate all'interno delle parentesi graffe {} e vengono espanse durante l'esecuzione. Le espressioni in React sono le stesse di JavaEspressioni di script.

index.js

import React from 'react';
import ReactDOM from 'react-dom';

const display = "Hello, from Guru99 Tutorials!";
const h1tag = "<h1>{display}</h1>";
ReactDOM.render(
    h1tag,
    document.getElementById('root')
);

Proviamo ora lo stesso nel browser.

Come si può vedere nello screenshot qui sopra, l'espressione {display} non viene sostituita. React non sa come comportarsi quando un'espressione viene utilizzata all'interno di un file .js.

Aggiungiamo ora le modifiche e creiamo un file .jsx, come mostrato di seguito:

test.jsx

import React from 'react';
import ReactDOM from 'react-dom';

const display = "Hello, to Guru99 Tutorials";
const h1tag =<h1>{display}</h1>;
export default h1tag;

Abbiamo aggiunto il codice richiesto e useremo il file test.jsx in index.js. Vogliamo il h1tag variabile da utilizzare all'interno di index.js, quindi la stessa viene esportata come mostrato sopra in test.jsx.

Ecco il codice modificato in index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import h1tag from './test.jsx';

ReactDOM.render(
    h1tag,
    document.getElementById('root')
);

Per utilizzare il file test.jsx in index.js, dobbiamo prima importarlo come mostrato di seguito:

import h1tag from './test.jsx';

Ora possiamo usare h1tag nel ReactDOM.render come mostrato di seguito:

ReactDOM.render(
    h1tag,
    document.getElementById('root')
);

Ecco l'output quando controlliamo lo stesso nel browser:

Cosa sono i componenti in ReactJS?

I componenti sono come puri JavaFunzioni di scripting che aiutano a semplificare il codice suddividendo la logica in codice indipendente e riutilizzabile.

Componenti come funzioni

test.jsx

import React from 'react';
import ReactDOM from 'react-dom';
function Hello() {
    return <h1>Hello, from Guru99 Tutorials!</h1>;
}
const Hello_comp = <Hello />;
export default Hello_comp;

Abbiamo creato una funzione chiamata Ciao che restituisce un tag h1, come mostrato sopra. Il nome della funzione funge da elemento, come mostrato di seguito:

const Hello_comp = <Hello />;
export default Hello_comp;

Il componente Ciao viene utilizzato come tag HTML, vale a dire, , assegnato al Ciao_comp variabile, e la stessa viene esportata tramite export.

Utilizziamo ora questo componente nel file index.js come mostrato di seguito:

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './test.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

Ecco l'output nel browser:

Classe come componente

Ecco un esempio di ReactJS che utilizza una classe come componente.

test.jsx

import React from 'react';
import ReactDOM from 'react-dom';

class Hello extends React.Component {
  render() {
    return <h1>Hello, from Guru99 Tutorials!</h1>;
  }
}
export default Hello;

Possiamo utilizzare il componente Hello nel file index.js nel modo seguente:

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './test.jsx';

ReactDOM.render(
    <Hello />,
    document.getElementById('root')
);

Il componente Hello viene utilizzato come tag HTML, vale a dire, .

Ecco l'output dello stesso.

Componenti di classe vs Componenti funzionali e hook

Ora che avete visto entrambi i modi per scrivere un componente, quale dovreste usare? Questa pagina illustra i componenti di classe perché rendono espliciti i concetti di stato e ciclo di vita, il che è prezioso per i principianti e si riscontra ancora in codebase legacy. Tuttavia, da quando React 16.8 ha introdotto gli Hook, anche i componenti funzionali possono gestire lo stato e sono lo stile consigliato per tutto il nuovo codice.

Aspetto	Componente di classe	Componente funzionale con ganci
Regione / Stato	this.state e this.setState()	Hook useState()
Ciclo di vita	componentDiedMount, componentDiedUpdate, componentWillUnmount	Il hook useEffect() copre tutti e tre
Sintassi	Altre frasi standard (costruttore, associazione, questo)	Più breve, no questa parola chiave
Stato	Supportato, stile tradizionale	Consigliato per il nuovo codice

Ecco l'esempio di stato tratto da questa pagina, riscritto con l'hook useState:

import React, { useState } from 'react';

function Hello() {
  const [msg] = useState("Hello, from Guru99 Tutorials!");
  return <h1>{msg}</h1>;
}
export default Hello;

Entrambe le versioni producono lo stesso output. Impara la sintassi delle classi utilizzata nei capitoli seguenti, quindi esercitati a convertire ogni esempio in Hook.

Cos'è uno stato in ReactJS?

Uno stato è uno JavaOggetto script, simile alle props, che contiene i dati da utilizzare con il rendering di ReactJS. I dati di stato sono un oggetto privato e vengono utilizzati all'interno dei componenti di una classe.

Esempio di Stato

Ecco un esempio pratico di come utilizzare lo stato all'interno di una classe.

test.jsx

import React from 'react';
import ReactDOM from 'react-dom';

class Hello extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
       msg: "Hello, from Guru99 Tutorials!"
    }
  }
  render() {
    return <h1>{this.state.msg}</h1>;
  }
}
export default Hello;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './test.jsx';

ReactDOM.render(
    <Hello />,
    document.getElementById('root')
);

Questo è ciò che otteniamo quando lo testiamo nel browser:

Cosa sono gli oggetti di scena in ReactJS?

Le props sono proprietà da utilizzare all'interno di un componente. Agiscono come oggetti o variabili globali che possono essere utilizzate all'interno del componente.

Prop al componente funzione

Ecco un esempio di passaggio di oggetti di scena a un componente di funzione.

import React from 'react';
import ReactDOM from 'react-dom';
function Hello(props) {
    return <h1>{props.msg}</h1>;
}
const Hello_comp = <Hello msg="Hello, from Guru99 Tutorials!" />;
export default Hello_comp;

Come mostrato sopra, abbiamo aggiunto il msg attribuire al componente. Lo stesso è accessibile come oggetti di scena all'interno della funzione Hello, che è un oggetto che avrà il msg dettagli dell'attributo e lo stesso viene utilizzato come espressione.

Il componente viene utilizzato in index.js come segue:

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './test.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

Ecco l'output nel browser:

Props al componente di classe

Per accedere alle proprietà di una classe, possiamo procedere come segue:

test.jsx

import React from 'react';
import ReactDOM from 'react-dom';

class Hello extends React.Component {
  render() {
    return <h1>{this.props.msg}</h1>;
  }
}
export default Hello;

Migliori msg l'attributo viene passato al componente in index.js come segue:

import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './test.jsx';

ReactDOM.render(
    <Hello msg="Hello, from Guru99 Tutorials!" />,
    document.getElementById('root')
);

Questo è l'output nel browser:

Controlla anche: - Tutorial AngularJS per principianti: impara AngularJS passo dopo passo

Ciclo di vita di un componente

Dopo aver trattato componenti, stato e props, il passo successivo è capire quando React chiama i metodi del tuo componente. Il ciclo di vita di un componente è suddiviso nelle fasi di inizializzazione, montaggio, aggiornamento e smontaggio.

Ecco una spiegazione dettagliata di ciascuna fase.

Un componente in ReactJS si articola nelle seguenti fasi:

Inizializzazione: Questa è la prima fase del ciclo di vita del componente.

Qui avrà le prop predefinite e lo stato al livello iniziale.

MontaggioIn questa fase, il componente viene renderizzato all'interno del DOM. Nello stato di montaggio abbiamo accesso ai seguenti metodi:

• render(): Questo metodo è disponibile per tutti i componenti creati. Restituisce il nodo HTML.
• componentDidMount(): Questa funzione viene chiamata immediatamente dopo che il componente è stato aggiunto al DOM.

AggiornanentoIn questo stato, l'utente interagisce con il DOM e quest'ultimo viene aggiornato. Ad esempio, se si inserisce qualcosa nella casella di testo, le proprietà dello stato vengono aggiornate.

Di seguito sono riportati i metodi disponibili nello stato di aggiornamento:

• shouldComponentUpdate(): chiamata prima del re-rendering; consente di decidere se il componente debba essere aggiornato. Restituendo true, il componente viene nuovamente renderizzato.
• componentDidUpdate(): chiamata dopo l'aggiornamento del componente.

Smontaggio: Questo stato si verifica quando il componente non è necessario o viene rimosso.

Di seguito è riportato il metodo disponibile nello stato di smontaggio:

• componentWillUnmount(): chiamata immediatamente prima che il componente venga rimosso o distrutto.

Esempio pratico di metodi del ciclo di vita

Ecco un esempio funzionante che mostra i metodi richiamati in ogni fase.

Esempio: complife.jsx

import React from 'react';
import ReactDOM from 'react-dom';
class COMP_LIFE extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: ''};

    this.UpdateName = this.UpdateName.bind(this);
    this.testclick = this.testclick.bind(this);
  }

  UpdateName(event) {
    this.setState({name: event.target.value});
  }

  testclick(event) {
    alert("The name entered is: "+ this.state.name);
  }

  componentDidMount() {
    console.log('Mounting State : calling method componentDidMount');
  }

  shouldComponentUpdate() {
    console.log('Update  State : calling method shouldComponentUpdate');
    return true;
  }

  componentDidUpdate() {
    console.log('Update  State : calling method componentDidUpdate')
  }
  componentWillUnmount() {
    console.log('UnMounting State : calling method componentWillUnmount');
  }

  render() {
    return (
      <div>
         Enter Your Name:<input type="text" value={this.state.name} onChange={this.UpdateName} /><br/>
        <h2>{this.state.name}</h2>
        <input type="button" value="Click Here" onClick={this.testclick} />
      </div>
    );
  }
}

export default COMP_LIFE;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import COMP_LIFE from './complife.jsx';

ReactDOM.render(
    <COMP_LIFE />,
    document.getElementById('root')
);

Quando controlli l'output nel browser:

Nella console del browser viene visualizzato:

Quando l'utente inserisce nella casella di testo:

Nella console vengono visualizzati i seguenti messaggi:

Ora che sapete quando un componente viene renderizzato e aggiornato, applichiamo lo stato e gli eventi a un caso d'uso pratico: la gestione dell'input dell'utente tramite i moduli.

Lavorare con i moduli

In ReactJS, gli elementi di input HTML come , e <select /> hanno un proprio stato e devono essere aggiornati quando l'utente interagisce, utilizzando il metodo setState().

In questo capitolo vedremo come lavorare con i moduli in ReactJS.

Ecco un esempio funzionante:

form.jsx

import React from 'react';
import ReactDOM from 'react-dom';
class Form extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: ''};

    this.UpdateName = this.UpdateName.bind(this);
    this.formSubmit = this.formSubmit.bind(this);
  }

  UpdateName(event) {
    this.setState({name: event.target.value});
  }

  formSubmit(event) {
    alert("The name entered is: "+ this.state.name);
  }

  render() {
    return (
      <form>
         Enter Your Name:<input type="text" value={this.state.name} onChange={this.UpdateName} /><br/>
        <h2>{this.state.name}</h2>
        <input type="submit" value="Submit" onClick={this.formSubmit} />
      </form>
    );
  }
}

export default Form;

Per i campi di input, dobbiamo mantenere lo stato, quindi per questo React fornisce un metodo speciale chiamato setState, che aiuta a mantenere lo stato ogni volta che c'è un cambiamento. In un'applicazione reale, chiama anche event.preventDefault() all'interno del metodo formSubmit per impedire al browser di ricaricare la pagina dopo l'invio.

Abbiamo utilizzato gli eventi onChange e onClick sulla casella di testo e sul pulsante di invio. Quando l'utente digita nella casella di testo, viene richiamato l'evento onChange e il campo name all'interno dell'oggetto state viene aggiornato, come mostrato di seguito:

UpdateName(event) {
    this.setState({name: event.target.value});
  }

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Form from './form.jsx';

ReactDOM.render(
    <Form />,
    document.getElementById('root')
);

L'output nel browser è il seguente:

Passo 1) Inserisci il tuo nome nella casella di testo:

Passo 2) Fai clic sul pulsante Invia:

Lavorare con gli eventi in ReactJS

I moduli sono solo una delle fonti di interazione dell'utente. Lavorare con gli eventi in ReactJS è lo stesso modo in cui lo avresti fatto in JavaScript. Puoi utilizzare tutti i gestori di eventi che vengono utilizzati in JavaScript. Il metodo setState() viene utilizzato per aggiornare lo stato quando l'utente interagisce con un qualsiasi elemento HTML.

Ecco un esempio pratico di come utilizzare gli eventi in ReactJS.

eventi.jsx

import React from 'react';
import ReactDOM from 'react-dom';
class EventTest extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: ''};

    this.UpdateName = this.UpdateName.bind(this);
    this.testclick = this.testclick.bind(this);
  }

  UpdateName(event) {
    this.setState({name: event.target.value});
  }

  testclick(event) {
    alert("The name entered is: "+ this.state.name);
  }

  render() {
    return (
      <div>
         Enter Your Name:<input type="text" value={this.state.name} onChange={this.UpdateName} /><br/>
        <h2>{this.state.name}</h2>
        <input type="button" value="Click Here" onClick={this.testclick} />
      </div>
    );
  }
}

export default EventTest;

Per i campi di input, dobbiamo mantenere lo stato, quindi per questo React fornisce il setState metodo, che aiuta a mantenere lo stato ogni volta che si verifica un cambiamento.

Abbiamo utilizzato gli eventi suCambia and onClick sulla casella di testo e sul pulsante. Quando l'utente digita all'interno della casella di testo, il suCambia L'evento viene richiamato e il campo "name" all'interno dell'oggetto "state" viene aggiornato, come mostrato di seguito:

UpdateName(event) {
    this.setState({name: event.target.value});
  }

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import EventTest from './events.jsx';

ReactDOM.render(
    <EventTest />,
    document.getElementById('root')
);

Ecco l'output nel browser:

Quando un utente inserisce il nome:

Quando l'utente fa clic sul pulsante Clicca qui:

Lavorare con CSS in linea in ReactJS

Una volta che i componenti gestiscono dati ed eventi, il passaggio finale consiste nell'applicare lo stile. Esamineremo un esempio pratico per comprendere il CSS inline in ReactJS.

addstyle.jsx

import React from 'react';
import ReactDOM from 'react-dom';

const h1Style = {
    color: 'red'
};

function Hello(props) {
    return <h1 style={h1Style}>{props.msg}</h1>;
}
const Hello_comp = <Hello msg="Hello, from Guru99 Tutorials!" />;
export default Hello_comp;

Ho aggiunto lo stile color: 'red' al tag h1.

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './addstyle.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

L'output nel browser è il seguente:

È possibile creare un oggetto con lo stile desiderato per l'elemento e utilizzare un'espressione per aggiungere lo stile, come mostrato nell'esempio precedente.

Lavorare con CSS esterni in ReactJS

Creiamo un file CSS esterno. Per farlo, creiamo una cartella chiamata css/ e aggiungiamo al suo interno il file style.css.

style.css

.h1tag {
color:red;
}

Aggiungi style.css al tuo file index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title>
    <link href="css/style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div id = "root"></div>
  </body>
</html>

Ora aggiungiamo la classe al tag h1 nel file .jsx.

addstyle.jsx

import React from 'react';
import ReactDOM from 'react-dom';

let classforh1 = 'h1tag';

function Hello(props) {
    return <h1 className={classforh1}>{props.msg}</h1>;
}
const Hello_comp = <Hello msg="Hello, from Guru99 Tutorials!" />;
export default Hello_comp;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './addstyle.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

All'attributo className vengono forniti i dettagli della classe. Nota che JSX utilizza nome della classe invece dell'attributo classe HTML, perché classe è una parola chiave riservata in JavaScript. Ora proviamolo nel browser.

Ecco cosa si vede quando si ispeziona il tag h1 nel browser:

Come puoi vedere, la classe "h1tag" è stata aggiunta correttamente al tag h1.

Perché ReactDOM.render è stato sostituito da createRoot

Ogni esempio in questa pagina monta l'app con ReactDOM.render, che è corretto per React 16 e 17, le versioni a cui si rivolge questo corso. React 18, rilasciato a marzo 2022, ha sostituito quel punto di ingresso con l'API createRoot, e React 19 ha rimosso completamente ReactDOM.render. Il motivo è la concorrenza: createRoot consente a React di preparare diverse versioni dell'interfaccia utente contemporaneamente, interrompere il rendering a bassa priorità e mantenere la concorrenza.ping e animazioni fluide. Funzionalità come il batching automatico, useTransition e lo streaming basato su Suspense dipendono tutte da esso.

L'equivalente moderno del file index.js utilizzato in questa pagina ha questo aspetto:

import { createRoot } from 'react-dom/client';

const root = createRoot(document.getElementById('root'));
root.render(<h1>Hello, from Guru99 Tutorials!</h1>);

Tutto il resto che hai imparato qui — componenti, JSX, stato, props ed eventi — funziona allo stesso modo dopo questa modifica di una riga nel punto di ingresso. Differenze di versione come questa si presentano spesso in Domande per il colloquio su React JS, quindi conviene comprendere entrambe le API.

Domande Frequenti

Controlla anche: - Le 70 migliori domande e risposte all'intervista React (aggiornata)