Tutorial sulla creazione di un'applicazione web con React.js

React.js è una popolare libreria di sviluppo front-end utilizzata per creare interfacce utente (UI) interattive. Sviluppato da Facebook, React.js è stato utilizzato da molte grandi aziende, tra cui Instagram, Airbnb e WhatsApp. Se desideri creare applicazioni web efficaci, veloci e reattive , React.js potrebbe essere la scelta giusta per te.

preliminare

Prima di iniziare, assicurati di avere Node.js e npm (Node Package Manager) installati sul tuo computer. Node.js e npm sono essenziali perché forniscono l'ambiente e gli strumenti necessari per sviluppare applicazioni web utilizzando React.js.

Passaggio 1: Inizializzazione del progetto React

Per creare una nuova applicazione React.js, possiamo utilizzare Create React App, uno strumento per la creazione di applicazioni che riduce al minimo la configurazione iniziale. Esegui il seguente comando nel tuo terminale o prompt dei comandi:

“'bash
npx create -eagire-app la mia-app
cd my-app
inizio npm
“`

Questo comando creerà una nuova directory denominata `my-app`, scaricherà e installerà tutte le dipendenze necessarie e avvierà il server di sviluppo. Ora puoi aprire un browser e accedere a `http://localhost:3000` per visualizzare l'applicazione React.js predefinita.

Passaggio 2: Struttura delle cartelle

Diamo un'occhiata alla struttura delle cartelle creata da Create React App:

“`
la mia app/
├── node_modules/
├── pubblico/
│ └── index.html
└── src/
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
└── logo.svg
“`

– `node_modules/`: Contiene tutte le dipendenze del tuo progetto.
– `public/`: Contiene file statici, incluso `index.html` che rappresenta il punto di ingresso dell'applicazione.
– `src/`: Dove trascorrerai la maggior parte del tempo. Contiene componenti React, file CSS e altre risorse.

Passaggio 3: Eliminazione dei file non necessari

Per ricominciare da zero, eliminiamo alcuni file non necessari. Eliminiamo `logo.svg` e `App.test.js` all'interno della cartella `src/`. Quindi, apriamo `App.css` e `index.css`, eliminando tutto il codice CSS al loro interno per partire con un foglio di stile pulito.

Passaggio 4: Creazione del primo componente

React.js è basato sui componenti. I componenti sono gli elementi costitutivi della tua applicazione web. Modifichiamo `App.js` per creare il nostro primo componente.

Apri il file `src/App.js` e sostituiscilo con il seguente codice:

“'jsx
import React da 'react';
import './App.css';

funzione App() {
ritorno (

);
}

esporta l'app predefinita;
“`

Inizializza il codice React all'interno di `App.js` utilizzando JSX (JavaScript XML), che ci permette di scrivere una sintassi simile all'HTML all'interno di JavaScript. Salva le modifiche e visualizza i risultati nel tuo browser.

Passaggio 5: Aggiunta di nuovi componenti

Ora aggiungiamo alcuni nuovi componenti. Crea una nuova cartella chiamata `components` all'interno della cartella `src`. Quindi crea un nuovo file `HelloWorld.js` nella cartella `components`.

“'jsx
import React da 'react';

funzione HelloWorld() {
ritorno (

);
}

esporta predefinito HelloWorld;
“`

Apri `App.js` e importa il componente `HelloWorld` che abbiamo appena creato:

“'jsx
import React da 'react';
import './App.css';
import HelloWorld from './components/HelloWorld';

funzione App() {
ritorno (

);
}

esporta l'app predefinita;
“`

Ora, `App.js` visualizza il componente `HelloWorld` sulla pagina principale.

Passaggio 6: Aggiunta della gestione dello stato con useState

React offre potenti funzionalità per la gestione dello stato. Aggiungiamo un po' di stato alla nostra applicazione. Ad esempio, aggiungiamo un contatore che aumenta ogni volta che si clicca su un pulsante.

Apri `HelloWorld.js` e aggiungi lo stato e l'hook `useState`:

“'jsx
importa React, { useState } da 'react';

funzione HelloWorld() {
const [conteggio, setCount] = useState(0);

const incrementCount = () => {
setCount(conteggio + 1);
}

ritorno (

);
}

esporta predefinito HelloWorld;
“`

Lo stato `count` viene inizializzato con un valore di 0 e, ogni volta che si fa clic sul pulsante, la funzione `incrementCount` incrementa questo valore.

Passaggio 7: Aggiunta dello stile

Per aggiungere stile, possiamo usare il CSS nel file `App.css` oppure una libreria CSS-in-JS come styled-components. Per ora, atteniamoci al CSS standard.

Apri il file `App.css` e aggiungi dello stile:

“`css
.App {
text-align: center;
}

.Intestazione dell'app {
background-color: 282c34;
altezza minima: 100vh;
Display: flettere;
flex-direction: colonna;
align-items: center;
giustificare-contenuto: centro;
font-size: calc(10px + 2vmin);
colore bianco;
}

pulsante {
padding: 10px 20px;
margin-top: 20px;
font-size: 16px;
}
“`

Passaggio 8: Aggiungere il routing con React Router

Per aggiungere la navigazione tra le diverse pagine della nostra applicazione, possiamo utilizzare React Router. Installa React Router eseguendo il seguente comando:

“'bash
npm installa react-router-dom
“`

Successivamente, crea due nuovi componenti: `Home.js` e `About.js` nella cartella `components`.

`Home.js`:
“'jsx
import React da 'react';

funzione Home() {
ritorno (

);
}

esporta predefinito Home;
“`

`About.js`:
“'jsx
import React da 'react';

funzione Informazioni() {
ritorno (

);
}

esporta predefinito Informazioni;
“`

Successivamente, apri `App.js` e configura il routing:

“'jsx
import React da 'react';
import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom';
import './App.css';
import HelloWorld from './components/HelloWorld';
importa Home da './components/Home';
importa Informazioni da './components/About';

funzione App() {
ritorno (

);
}

esporta l'app predefinita;
“`

In questo modo, abbiamo aggiunto la navigazione di base tra le diverse pagine della nostra applicazione.

Chiusura

Questo è un tutorial di base per la creazione di un'applicazione web con React.js. Abbiamo trattato la configurazione del progetto, la creazione dei componenti, la gestione dello stato, lo stile e il routing. React.js vanta un ricco ecosistema con numerose librerie e strumenti che possono aiutarti a costruire applicazioni web più complesse.

Buona fortuna e spero che questo tutorial ti aiuti a iniziare il tuo percorso con React.js!