Introduzione
React è un popolare framework JavaScript per la creazione di applicazioni front-end. Originariamente creato da Facebook, ha guadagnato popolarità consentendo agli sviluppatori di creare applicazioni veloci utilizzando un paradigma di programmazione intuitivo che lega JavaScript con una sintassi simile a HTML nota come JSX.
L'avvio di un nuovo progetto React era un complicato processo in più passaggi che prevedeva la creazione di un sistema di compilazione, un transpiler di codice per convertire la sintassi moderna in codice leggibile da tutti i browser e una struttura di directory di base. Ma ora, Create React App include tutti i pacchetti JavaScript necessari per eseguire un progetto React, tra cui la traspilazione del codice, il linting di base, i test e i sistemi di compilazione. Include anche un server con hot reloading che aggiornerà la tua pagina mentre apporti modifiche al codice. Infine, creerà una struttura per le directory e i componenti in modo da poter saltare e iniziare a scrivere codice in pochi minuti.
In altre parole, non devi preoccuparti di configurare un sistema di compilazione. Non è necessario configurare Babel per compilare il codice in modo che sia utilizzabile su più browser. Non devi preoccuparti della maggior parte dei complicati sistemi del moderno sviluppo front-end. Puoi iniziare a scrivere il codice React con una preparazione minima.
Alla fine di questo tutorial, avrai un'applicazione React in esecuzione che puoi usare come base per eventuali applicazioni future. Apporterai le prime modifiche al codice React, aggiornerai gli stili ed eseguirai una build per creare una versione completamente ridotta dell'applicazione. Utilizzerai anche un server con hot reloading per darti un feedback immediato ed esplorerai in profondità le parti di un progetto React. Infine, inizierai a scrivere componenti personalizzati e creare una struttura che può crescere e adattarsi al tuo progetto.
Prerequisiti
Per seguire questo tutorial, avrai bisogno di NodeJS installato sul tuo computer:
- Come installare Node.js e NPM su CentOS 8.
- Come installare Node.js e NPM su Debian 10.
- Come installare Node.js e NPM su Ubuntu 18.04.
- Come installare Node.js e NPM su Fedora 30.
Creare un nuovo progetto con Create React App
In questo passaggio, creerai una nuova applicazione utilizzando il gestore pacchetti npm per eseguire uno script remoto. Lo script copierà i file necessari in una nuova directory e installerà tutte le dipendenze.
Quando hai installato Node, hai anche installato un'applicazione di gestione dei pacchetti chiamata npm. npm installerà i pacchetti JavaScript nel tuo progetto e terrà anche traccia dei dettagli sul progetto.
npm include anche uno strumento chiamato npx, che eseguirà pacchetti eseguibili. Ciò significa che eseguirai il codice Create React App senza prima scaricare il progetto.
Il pacchetto eseguibile eseguirà l'installazione di create-react-app nella directory specificata. Inizierà creando un nuovo progetto in una directory, che in questo tutorial verrà chiamata noviello-tutorial. Ancora una volta, questa directory non ha bisogno di esistere in anticipo; il pacchetto eseguibile lo creerà per te. Lo script inoltre eseguirà npm install nella directory del progetto, che scaricherà eventuali dipendenze aggiuntive.
Per installare il progetto di base, eseguire il comando seguente:
npx create-react-app noviello-tutorial
Questo comando avvierà un processo di generazione che scaricherà il codice di base insieme a una serie di dipendenze.
Al termine dello script verrà visualizzato un messaggio di successo che dice:
...
Success! Created noviello-tutorial at your_file_path/noviello-tutorial
Inside that directory, you can run several commands:
npm start
Starts the development server.
npm run build
Bundles the app into static files for production.
npm test
Starts the test runner.
npm run eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing:
cd noviello-tutorial
npm start
Happy hacking!
your_file_path sarà il tuo percorso attuale. Se sei un utente macOS, sarà qualcosa di simile; se sei su un server Ubuntu, dirà qualcosa del genere ./Users/your_username/home/your_username
Vedrai anche un elenco di comandi npm che ti permetteranno di eseguire, costruire, avviare e testare la tua applicazione. Li esplorerai di più nella prossima sezione.
Nota: esiste un altro gestore di pacchetti per JavaScript chiamatoyarn. È supportato da Facebook e fa molte delle stesse cose dinpm. Inizialmente,yarnforniva nuove funzionalità come i file di blocco, ma ora anche questi sono implementatinpm.yarninclude anche alcune altre funzionalità come la memorizzazione nella cache offline. Ulteriori differenze sono disponibili nella documentazioneyarn.
Se hai già installato yarn sul tuo sistema, vedrai un elenco di comandi yarn come yarn start che funzionano allo stesso modo dei comandi npm. È possibile eseguire i comandi npm anche se è stato installato yarn. Se preferisci yarn, sostituisci npm con yarn per qualsiasi comando futuro. I risultati saranno gli stessi.
Ora il tuo progetto è impostato in una nuova directory. Passa alla nuova directory:
cd noviello-tutorial
Ora sei nella root del tuo progetto. A questo punto, hai creato un nuovo progetto e aggiunto tutte le dipendenze. Ma non hai intrapreso alcuna azione per eseguire il progetto. Nella sezione successiva, eseguirai script personalizzati per compilare e testare il progetto.
Utilizzare react-scripts
In questo passaggio, imparerai a conoscere i diversi react-scripts che sono installati con il repository. Innanzitutto eseguirai lo script test per eseguire il codice di test. Quindi eseguirai lo script build per creare una versione ridotta. Infine, vedrai come lo script eject può darti il controllo completo sulla personalizzazione.
Ora ti trovi nella directory del progetto, puoi aprire l'intera directory nel tuo editor di testo oppure, se ti trovi sul terminale, puoi elencare i file con il seguente comando:
ls -a
Il flag -a assicura che l'output includa anche file nascosti.
Ad ogni modo, vedrai una struttura come questa:
node_modules/
public/
src/
.gitignore
README.md
package-lock.json
package.json
Spieghiamo il contenuto singolarmente:
node_modules/contiene tutte le librerie JavaScript esterne utilizzate dall'applicazione. Avrai raramente bisogno di aprirlo.- La directory
public/contiene alcuni file base HTML, JSON e immagini. Queste sono le root del tuo progetto. Avrai l'opportunità di esplorarli successivamente in questo tutorial. - La directory
src/contiene il codice JavaScript React per il tuo progetto. Gran parte del lavoro che fai sarà in quella directory. - Il file
.gitignorecontiene alcune directory e file predefiniti che git (il controllo del codice sorgente) ignorerà, come la directorynode_modules. Gli elementi ignorati tendono ad essere directory o file di registro più grandi che non sarebbero necessari nel controllo del codice sorgente. Includerà anche alcune directory che creerai con alcuni degli script React. README.mdè un file markdown che contiene molte informazioni utili su Create React App, come un riepilogo di comandi e collegamenti alla configurazione avanzata. Per ora, è meglio lasciare il fileREADME.mdcome lo vedi. Man mano che il progetto avanza, sostituirai le informazioni predefinite con informazioni più dettagliate sul progetto.
Gli ultimi due file vengono utilizzati dal gestore pacchetti. Quando hai eseguito il comando npx iniziale , hai creato il progetto di base, ma hai anche installato le dipendenze aggiuntive. Quando hai installato le dipendenze, hai creato un file package-lock.json. Questo file viene utilizzato da npm per garantire che i pacchetti corrispondano alle versioni esatte. In questo modo se qualcun altro installa il tuo progetto, puoi assicurarti che abbiano dipendenze identiche. Poiché questo file viene creato automaticamente, raramente lo modificherai direttamente.
L'ultimo file è package.json. Questo contiene metadati sul tuo progetto, come titolo, numero di versione e dipendenze. Contiene inoltre script che è possibile utilizzare per eseguire il progetto.
Apri il file package.json nel tuo editor di testo preferito:
nano package.json
Quando apri il file, vedrai un oggetto JSON contenente tutti i metadati. Se si guarda l'oggetto scripts, troverete quattro diversi script: start, build, test, e eject.
Questi script sono elencati in ordine di importanza. Il primo script avvia l'ambiente di sviluppo locale; ci arriverai nel prossimo passaggio. Il secondo script costruirà il tuo progetto. Lo vedremo successivamente.
Script Build
Per eseguire qualsiasi script npm, dovrai digitare sul terminale npm run script_name. Esistono alcuni script speciali in cui è possibile omettere la parte del comando, ma è sempre bene eseguire il comando completo. Per eseguire lo script build, digitare quanto segue nel terminale:
npm run build
Vedrai immediatamente il seguente messaggio:
[email protected] build your_file_path/noviello-tutorial
> react-scripts build
Creating an optimized production build...
...
Questo ti dice che Create React App sta compilando il tuo codice in un bundle utilizzabile.
Al termine, vedrai il seguente output:
...
Compiled successfully.
File sizes after gzip:
39.85 KB build/static/js/9999.chunk.js
780 B build/static/js/runtime-main.99999.js
616 B build/static/js/main.9999.chunk.js
556 B build/static/css/main.9999.chunk.css
The project was built assuming it is hosted at the server root.
You can control this with the homepage field in your package.json.
For example, add this to build it for GitHub Pages:
"homepage" : "http://myname.github.io/myapp",
The build folder is ready to be deployed.
You may serve it with a static server:
serve -s build
Find out more about deployment here:
bit.ly/CRA-deploy
Elenca i contenuti del progetto e vedrai alcune nuove directory:
ls -a
build/
node_modules/
public/
src/
.gitignore
README.md
package-lock.json
package.json
Ora hai una directory build. Se hai aperto il file .gitignore, potresti aver notato che la directory build è ignorata da git. Questo perché la directory build è solo una versione minimizzata e ottimizzata degli altri file. Non è necessario utilizzare il controllo versione poiché è sempre possibile eseguire il comando build.
Script Test
Lo script test è uno di quegli script speciali che non richiedono la parola chiave, run ma funzionano anche se la includi. Questo script avvierà un test runner chiamato Jest. Il test runner cerca nel tuo progetto tutti i file con estensione .spec.js o estensione .test.js, quindi esegue tali file.
Per eseguire lo script test, digitare il comando seguente:
npm test
Dopo aver eseguito questo script, il tuo terminale avrà l'output della suite di test e il prompt del terminale scomparirà. Sarà simile a questo:
PASS src/App.test.js
✓ renders learn react link (67ms)
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 4.204s
Ran all test suites.
Watch Usage
› Press f to run only failed tests.
› Press o to only run tests related to changed files.
› Press q to quit watch mode.
› Press p to filter by a filename regex pattern.
› Press t to filter by a test name regex pattern.
› Press Enter to trigger a test run.
Ci sono alcune cose da notare qui. Innanzitutto, come notato in precedenza, rileva automaticamente tutti i file con estensioni di prova inclusi .test.js e .spec.js. In questo caso, esiste solo una suite di test, ovvero solo un file con estensione .test.js, e quella suite di test contiene solo un test. Jest è in grado di rilevare i test nella gerarchia del codice, quindi è possibile nidificare i test in una directory e Jest li troverà.
Jest inoltre non esegue la tua suite di test una volta e poi esce. Piuttosto, continua a funzionare nel terminale. Se si apportano modifiche al codice sorgente, si eseguiranno nuovamente i test.
È inoltre possibile limitare i test eseguiti utilizzando una delle opzioni della tastiera. Se digiti o, ad esempio, eseguirai i test solo sui file che sono stati modificati. Questo può farti risparmiare un sacco di tempo man mano che le tue suite di test crescono.
Infine, puoi uscire dal test runner digitando q. Fallo ora per ritornare al tuo prompt dei comandi.
Script Eject
Lo script finale è npm eject. Questo script copia le tue dipendenze e i file di configurazione nel tuo progetto, dandoti il pieno controllo del tuo codice ma espellendo il progetto dalla toolchain integrata di Create React App. Non lo eseguirai ora perché, una volta eseguito questo script, non puoi annullare questa azione e perderai eventuali aggiornamenti futuri di Crea React App.
Il valore in Create React App è che non devi preoccuparti di una quantità significativa di configurazione. La creazione di moderne applicazioni JavaScript richiede molti strumenti dai sistemi di compilazione, come Webpack, agli strumenti di compilazione, come Babel. Create React App gestisce tutta la configurazione per te, quindi espellere significa affrontare da solo questa complessità.
L'aspetto negativo di Create React App è che non sarai in grado di personalizzare completamente il progetto. Per la maggior parte dei progetti non è un problema, ma se si desidera assumere il controllo di tutti gli aspetti del processo di compilazione, è necessario espellere il codice. Tuttavia, come accennato in precedenza, una volta espulso il codice non sarà possibile eseguire l'aggiornamento alle nuove versioni di Create React App e sarà necessario aggiungere manualmente eventuali miglioramenti da soli.
A questo punto, hai eseguito degli script per compilare e testare il tuo codice. Nel passaggio successivo, avvierai il progetto su un server live.
Avviare il server
In questo passaggio, verrà inizializzato un server locale ed eseguito il progetto nel browser.
Inizi il tuo progetto con un altro script npm. Ad esempio npm test, questo script non ha bisogno del comando run. Quando esegui lo script, avvierai un server locale, eseguirai il codice del progetto, avvierai un watcher che ascolta le modifiche del codice e aprirà il progetto in un browser web.
Avviare il progetto digitando il comando seguente nella root del progetto. Per questo tutorial, la radice del tuo progetto è la directory noviello-tutorial. Assicurati di aprirlo in un terminale o una scheda separati, poiché questo script continuerà a funzionare finché lo consenti:
npm start
Vedrai del testo segnaposto per un breve momento prima dell'avvio del server, dando questo risultato:
Compiled successfully!
You can now view noviello-tutorial in the browser.
http://localhost:3000
Note that the development build is not optimized.
To create a production build, use npm run build.
Se esegui lo script localmente, aprirà il progetto nella finestra del browser.
Se ciò non accade, puoi visitare il sito http://localhost:3000/ per vedere il sito in azione. Se hai già un altro server in esecuzione sulla porta 3000, non è un problema. Create React App rileverà la prossima porta disponibile ed eseguirà il server con quella. In altre parole, se hai già un progetto in esecuzione sulla porta 3000, questo nuovo progetto verrà avviato sulla porta 3001.
Se lo stai eseguendo da un server remoto puoi comunque vedere il tuo sito senza alcuna configurazione aggiuntiva. L'indirizzo sarà http://your_server_ip:3000. Se hai configurato un firewall, dovrai aprire la porta sul tuo server remoto.
Nel browser, vedrai il seguente progetto di modello React:
Finché lo script è in esecuzione, avrai un server locale attivo. Per interrompere lo script, chiudere la finestra del terminale o la scheda o digitare CTRL+C o ⌘-+c nella finestra del terminale o nella scheda che esegue lo script.
A questo punto, hai avviato il server e stai eseguendo il tuo primo codice React. Ma prima di apportare modifiche al codice JavaScript di React, vedrai come React esegue il rendering sulla pagina.
Modificare la home page
In questo passaggio, modificherai il codice nella directory public/. La directory public contiene la tua pagina HTML di base. Questa è la pagina che fungerà da root per il tuo progetto. Raramente modificherai questa directory in futuro, ma è la base da cui parte il progetto e una parte cruciale di un progetto React.
Se hai stoppato il tuo server, riavvialo con npm start, quindi apri public/ con il tuo editor di testo preferito in una nuova finestra del terminale:
nano public/
In alternativa, puoi elencare i file con il comando ls:
ls public/
Vedrai un elenco di file come questo:
favicon.ico
logo192.png
manifest.json
index.html
logo512.png
robots.txt
favicon.ico, logo192.png e logo512.png sono icone che un utente vedrebbe nella scheda del browser o sul telefono. Il browser selezionerà le icone della dimensione corretta. Alla fine, ti consigliamo di sostituirli con icone più adatte al tuo progetto. Per ora, puoi lasciarli soli.
Il file manifest.json è un insieme strutturato di metadati che descrive il progetto. Tra le altre cose, elenca quale icona verrà utilizzata per opzioni di dimensioni diverse.
Il file robots.txt contiene informazioni per i crawler web. Indica ai crawler quali pagine sono o non possono indicizzare. Non sarà necessario modificare nessuno dei file a meno che non ci sia un motivo convincente per farlo. Ad esempio, se si desidera assegnare ad alcuni utenti un URL a contenuti speciali a cui non si desidera accedere facilmente, è possibile aggiungerli al file robots.txt e saranno comunque disponibili pubblicamente, ma non indicizzati dai motori di ricerca.
Il file index.html è la root della tua applicazione. Questo è il file letto dal server ed è il file che verrà visualizzato dal browser.
Se stai lavorando dalla riga di comando, puoi aprirlo con il seguente comando:
nano public/index.html
Ecco cosa vedrai:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>Il file è piuttosto breve. Non ci sono immagini o parole in <body>. Questo perché React costruisce l'intera struttura HTML stessa e la inietta con JavaScript. Ma React deve sapere dove iniettare il codice, e questo è il ruolo index.html.
Nel tuo editor di testo, modifica il tag <title> da React App in Sandbox:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
...
<title>Sandbox</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>Salva ed esci dal tuo editor di testo. Controlla il tuo browser. Il titolo è il nome situato nella scheda del browser. Si aggiornerà automaticamente. In caso contrario, aggiornare la pagina e notare la modifica.
Ora torna al tuo editor di testo. Ogni progetto React parte da un elemento root. Possono esserci più elementi root in una pagina, ma deve essercene almeno uno. Ecco come React sa dove inserire il codice HTML generato. Trova l'elemento <div id="root">. Questo è il div che React utilizzerà per tutti gli aggiornamenti futuri. Cambia l'id da root a base:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
...
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="base"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>Salva le modifiche.
Vedrai un errore nel tuo browser:
React stava cercando un elemento con un id di root. Ora che non c'è più, React non può avviare il progetto.
Cambia nuovamente il nome da base a root:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
...
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>Salva ed esci da index.html.
A questo punto, hai avviato il server e apportato una piccola modifica alla pagina HTML principale. Non hai ancora modificato alcun codice JavaScript. Nella sezione successiva, aggiornerai il codice JavaScript React.
Modificaare il tag di intestazione e lo stile
In questo passaggio, apporterai la prima modifica a un componente React nella directory src/. Apporterai una piccola modifica al CSS e al codice JavaScript che si aggiorneranno automaticamente nel tuo browser utilizzando la ricarica automatica integrata.
Se il server è stato arrestato, riavviare con npm start. Puoi aprire la directory completa nel tuo editor di testo preferito oppure puoi elencare il progetto in un terminale con il seguente comando:
ls src/
Vedrai i seguenti file nel tuo terminale o nell'editor di testo.
App.css
App.js
App.test.js
index.css
index.js
logo.svg
serviceWorker.js
setupTests.js
Esaminiamo questi file uno alla volta.
All'inizio non utilizzerai molto tempoil file serviceWorker.js, ma può essere importante quando inizi a creare applicazioni web progressive. Il service worker può fare molte cose, tra cui le notifiche push e la memorizzazione nella cache offline, ma per ora è meglio non modificarlo.
I prossimi file da guardare sono setupTests.js e App.test.js. Questi sono usati per i file di test visti precedentemente. Il file setupTests.js è breve; tutto ciò che include sono alcuni metodi expect personalizzati.
Aperi App.test.js:
nano src/App.test.js
Quando lo apri, vedrai un test di base:
import React from 'react';
import { render } from '@testing-library/react';
import App from './App';
test('renders learn react link', () => {
const { getByText } = render(<App />);
const linkElement = getByText(/learn react/i);
expect(linkElement).toBeInTheDocument();
});Il test sta cercando la frase learn react da inserire nel documento. Se torni al browser che esegue il tuo progetto, vedrai la frase sulla pagina. Il test di React è diverso dalla maggior parte dei unit tests. Poiché i componenti possono includere informazioni visive, come il markup, insieme alla logica per la manipolazione dei dati, i test unitari (unit tests) tradizionali non funzionano altrettanto facilmente. Il test di React è più vicino a una forma di test funzionale o di integrazione.
Successivamente, vedrete alcuni file styling: App.css, index.css, e logo.svg. Esistono diversi modi di lavorare con lo stile in React, ma il più semplice è scrivere CSS semplice poiché non richiede alcuna configurazione aggiuntiva.
Esistono più file CSS perché è possibile importare gli stili in un componente come se fossero un altro file JavaScript. Poiché hai il potere di importare i CSS direttamente in un componente, puoi anche dividere il CSS per applicarlo solo a un singolo componente. Non stai mantenendo tutti i CSS separati da JavaScript. Invece stai mantenendo tutti i CSS, JavaScript, markup e immagini correlati raggruppati insieme.
Apri il file App.css nel tuo editor di testo. Se stai lavorando dalla riga di comando, puoi aprirlo con il seguente comando:
nano src/App.css
Questo è il codice che vedrai:
.App {
text-align: center;
}
.App-logo {
height: 40vmin;
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.App-link {
color: #61dafb;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}Questo è un file CSS standard senza preprocessori CSS speciali. Puoi aggiungerli in seguito se vuoi, ma all'inizio hai solo CSS semplice.
Tornando a App.css, uno dei vantaggi dell'utilizzo dell'app Create React è che monitora tutti i file in tempo reale, quindi se apporti una modifica, la vedrai nel tuo browser senza ricaricare.
Per vederlo in azione, apportare una piccola modifica a background-color in App.css. Modificalo da #282c34 per blue poi salvare il file. Lo stile finale sarà simile al seguente:
.App {
text-align: center;
}
...
.App-header {
background-color: blue
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
...
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}Dovresti notare la seguente modifica del colore:
Ripristina la modifica appena fatta su background-color inserendo nuovamente il codice colore #282c34.
.App {
text-align: center;
...
.App-header {
background-color: #282c34
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
...
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}Salva ed esci dal file.
Hai apportato una piccola modifica al CSS. Ora è il momento di apportare modifiche al codice JavaScript React. Inizia aprendo index.js.
nano src/index.js
Ecco cosa vedrai:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();Nella parte superiore, stai importando React, ReactDOM, index.css, App, e serviceWorker. Con l'importazione di React, stai effettivamente estraendo il codice per convertire JSX in JavaScript. JSX sono gli elementi simili a HTML.
ReactDOM è il codice che collega il tuo codice React agli elementi di base, come la pagina index.html in cui hai visto public/. Guarda la seguente linea evidenziata:
...
import * as serviceWorker from './serviceWorker';
ReactDOM.render(, document.getElementById('root'));
...
serviceWorker.unregister();
Questo codice indica a React di trovare un elemento con un id di root e di iniettare il codice React. <App/> è il tuo elemento di root e tutto si ramificherà da lì. Questo è il punto di partenza per tutti i futuri codici React.
Nella parte superiore del file, vedrai alcune importazioni. Importi index.css, ma in realtà non ci fai nulla. Importandolo, stai dicendo a Webpack tramite gli script React di includere quel codice CSS nel bundle finale compilato. Se non lo importi, non verrà visualizzato.
Esci da src/index.js.
A questo punto, non hai ancora visto nulla che stai visualizzando nel tuo browser. Per vedere questo, apri App.js:
nano src/App.js
Il codice in questo file apparirà come una serie di normali elementi HTML. Ecco cosa vedrai:
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>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;Cambia il contenuto del tag <p> da Edit <code>src/App.js</code> and save to reload. a Hello, world e salva le modifiche.
...
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Hello, world
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
...Vai al tuo browser e vedrai la modifica:
Ora hai effettuato il tuo primo aggiornamento a un componente React.
In questo componente, si importa il file logo.svg e lo si assegna a una variabile. Quindi nell'elemento <img>, aggiungi quel codice come src.
Notare l'elemento img:
...
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Hello, world
</p>
...Nota come si passa logo tra parentesi graffe. Ogni volta che passi attributi che non sono stringhe o numeri, devi usare le parentesi graffe. React li tratterà come JavaScript anziché come stringhe. In questo caso, non stai effettivamente importando l'immagine; invece fai riferimento all'immagine. Quando Webpack crea il progetto, gestirà l'immagine e imposterà l'origine nella posizione appropriata.
Esci dall'editor di testo.
Se guardi gli elementi DOM nel tuo browser, vedrai che aggiunge un percorso. Se stai utilizzando Chrome, puoi ispezionare l'elemento facendo clic con il pulsante destro del mouse sull'elemento e selezionando Ispeziona.
Il DOM ha questa linea:
<img src="/static/media/logo.4c4a7ccp.svg" class="App-logo" alt="logo">Il tuo codice sarà leggermente diverso poiché il logo avrà un nome diverso. Webpack vuole assicurarsi che il percorso dell'immagine sia unico. Pertanto, anche se importi immagini con lo stesso nome, verranno salvate con percorsi diversi.
A questo punto, hai apportato una piccola modifica al codice JavaScript React. Nel passaggio successivo, utilizzerai il comando build per minimizzare il codice in un piccolo file che può essere distribuito su un server.
Creare il progetto
In questo passaggio, costruirai il codice in un bundle che può essere distribuito su server esterni.
Torna al tuo terminale e costruisci il progetto. Hai eseguito questo comando prima, ma come promemoria, questo comando eseguirà lo script build. Creerà una nuova directory con i file combinati e minimizzati. Per eseguire la compilazione, eseguire il comando seguente dalla radice del progetto:
npm run build
Si verificherà un ritardo durante la compilazione del codice e al termine, verrà chiamata una nuova directory build/.
Apri in un editor di testo build/index.html.
nano build/index.html
Vedrai qualcosa del genere:
<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>React App</title><link href="/static/css/main.d1b05096.chunk.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script>!function(e){function r(r){for(var n,a,p=r[0],l=r[1],c=r[2],i=0,s=[];i<p.length;i++)a=p[i],Object.prototype.hasOwnProperty.call(o,a)&&o[a]&&s.push(o[a][0]),o[a]=0;for(n in l)Object.prototype.hasOwnProperty.call(l,n)&&(e[n]=l[n]);for(f&&f(r);s.length;)s.shift()();return u.push.apply(u,c||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,p=1;p<t.length;p++){var l=t[p];0!==o[l]&&(n=!1)}n&&(u.splice(r--,1),e=a(a.s=t[0]))}return e}var n={},o={1:0},u=[];function a(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,a),t.l=!0,t.exports}a.m=e,a.c=n,a.d=function(e,r,t){a.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,r){if(1&r&&(e=a(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(a.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)a.d(t,n,function(r){return e[r]}.bind(null,n));return t},a.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(r,"a",r),r},a.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},a.p="/";var p=this["webpackJsonpdo-create-react-app"]=this["webpackJsonpdo-create-react-app"]||[],l=p.push.bind(p);p.push=r,p=p.slice();for(var c=0;c<p.length;c++)r(p[c]);var f=l;t()}([])</script><script src="/static/js/2.c0be6967.chunk.js"></script><script src="/static/js/main.bac2dbd2.chunk.js"></script></body></html>La directory build prende tutto il tuo codice e compila e lo minimizza nel minimo stato utilizzabile. Non importa se un essere umano può leggerlo, dal momento che questo non è un pezzo di codice rivolto al pubblico. La minimizzazione farà in modo che il codice occupi meno spazio pur continuando a funzionare. A differenza di alcune lingue come Python, lo spazio bianco non cambia il modo in cui il computer interpreta il codice.
Conclusione
In questo tutorial, hai creato la tua prima applicazione React, configurando il tuo progetto usando gli strumenti di generazione JavaScript senza dover andare nei dettagli tecnici. Questo è il valore di Create React App: non è necessario sapere tutto per iniziare. Ti consente di ignorare i complicati passaggi della build in modo da poterti concentrare esclusivamente sul codice React.
