Guida all'installazione di ReactJS per principianti
Ciao a tutti, futuri sviluppatori React! Sono entusiasta di essere il vostro guida in questo emozionante viaggio nel mondo di ReactJS. Come qualcuno che ha insegnato scienze informatiche per anni, posso assicurarvi che imparare React è come imparare a pedalare una bicicletta - potrebbe sembrare spaventoso all'inizio, ma una volta che avrete preso la mano, andrete forte e veloci in breve tempo!
Cos'è ReactJS?
Prima di immergerci nell'installazione, cerchiamo di capire rapidamente cos'è ReactJS. React è una libreria JavaScript molto popolare per costruire interfacce utente, in particolare per applicazioni a pagina singola. Si tratta di creare componenti UI riutilizzabili che gestiscono il loro propio stato, rendendo più semplice la costruzione di interfacce complesse.
Ora, mettiamo le mani sporche e iniziamo a configurare React!
La catena degli strumenti: Il tuo toolkit React
Quando si lavora con React, utilizziamo un set di strumenti chiamato "catena degli strumenti" o "toolchain". Pensate a esso come il vostro coltello svizzero React - ha tutto il necessario per iniziare a costruire fantastiche applicazioni web.
Strumenti essenziali nella nostra catena degli strumenti
| Strumento | Scopo |
|---|---|
| Node.js | Runtime JavaScript |
| npm (Node Package Manager) | Gestore di pacchetti per JavaScript |
| Babel | Compilatore JavaScript |
| Webpack | Bundler di moduli |
| ESLint | Analizzatore del codice |
| Jest | Framework di test |
Non preoccupatevi se questi termini sembrano un linguaggio alieno adesso. Esploreremo ognuno di essi man mano!
Il server statico: Il vostro parco giochi locale
Prima di immergerci in configurazioni complesse, iniziiamo con qualcosa di semplice - un server statico. Questo ci permetterà di servire la nostra applicazione React localmente sul nostro computer.
Configurazione di un semplice server statico
-
Prima di tutto, assicuratevi di avere Node.js installato. Potete scaricarlo da nodejs.org.
-
Aprite il terminale o la riga di comando e eseguite:
npm install -g serveQuesto comando installa il pacchetto 'serve' globalmente sul vostro sistema.
- Ora, create una nuova directory per il vostro progetto:
mkdir my-react-app
cd my-react-app- Create un简单的 HTML file chiamato
index.html:
<!DOCTYPE html>
<html>
<head>
<title>La mia prima app React</title>
</head>
<body>
<div id="root"></div>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
ReactDOM.render(
<h1>Ciao, React!</h1>,
document.getElementById('root')
);
</script>
</body>
</html>- Ora, eseguite il comando serve:
serveVoilà! Dovreste vedere un messaggio che vi dice dove l'app è essere servita. Solitamente, è a http://localhost:5000. Aprite questo URL nel vostro browser, e vedrete la vostra prima app React!
Il compilatore Babel: Tradurre il futuro
Ricordate Babel dalla nostra catena degli strumenti? È giunto il momento di conoscere questo traduttore magico! Babel è un compilatore JavaScript che vi permette di utilizzare le ultime funzionalità di JavaScript anche se i browser non le supportano ancora.
Perché abbiamo bisogno di Babel?
Immaginate di scrivere una lettera a un amico che parla una lingua diversa. Babel è come avere un traduttore che può convertire istantaneamente la vostra lettera nella lingua del vostro amico. Nel mondo di React, Babel traduce il JavaScript moderno e JSX (estensione della sintassi React) in una versione di JavaScript che tutti i browser possono comprendere.
Utilizzare Babel nel nostro progetto
Abbiamo già incluso Babel nel nostro semplice file HTML sopra. Analizziamo quella parte:
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
// Il vostro codice React qui
</script>La prima linea include la libreria Babel standalone. La seconda linea dice a Babel di compilare il codice all'interno del tag script.
La catena degli strumenti Create React App: La soluzione tutto-in-uno
Ora che abbiamo fatto un pezzo diReact, immergiamoci con Create React App toolchain. Questo è un ambiente confortevole e ricco di funzionalità per imparare e costruire nuove applicazioni a pagina singola React.
Configurazione di Create React App
- Aprite il terminale e eseguite:
npx create-react-app my-app- Una volta completato, navigate alla vostra nuova app:
cd my-app- Avviate il server di sviluppo:
npm startLa vostra nuova app React dovrebbe aprirsi automaticamente nel vostro browser, solitamente a http://localhost:3000.
Cos'è dentro?
Create React App configura un ambiente di sviluppo completamente configurato. Diamo un'occhiata a cosa otteniamo:
| Funzionalità | Descrizione |
|---|---|
| React | La libreria core di React |
| webpack | Bundla il vostro codice e risorse |
| Babel | Compila il JavaScript moderno |
| ESLint | Controlla gli errori nel vostro codice |
| Jest | Vi permette di scrivere test |
| Hot Reloading | Vedete istantaneamente le vostre modifiche nel browser |
Il vostro primo componente
Creiamo un semplice componente React. Aprite src/App.js e sostituite il suo contenuto con:
import React from 'react';
function App() {
return (
<div>
<h1>Benvenuti nella mia app React</h1>
<p>Questo è il mio primo componente!</p>
</div>
);
}
export default App;Salvate il file e controllate il browser. Dovreste vedere il vostro nuovo componente visualizzato!
Conclusione
Complimenti! Avete appena fatto i vostri primi passi nel mondo emozionante dello sviluppo React. Abbiamo coperto molto terreno - dalla configurazione di un semplice server statico all'uso della potente catena degli strumenti Create React App.
Ricordate, imparare React è un viaggio. Non preoccupatevi se tutto non è chiaro subito. Continuate a praticare, a costruire e, soprattutto, a divertirvi!
Nella nostra prossima lezione, esploreremo più a fondo i componenti React e inizieremo a costruire applicazioni più complesse. Fino a quel momento, buon coding!
Credits: Image by storyset