Reagisci per iniziare
Per utilizzare React in produzione, è necessario npm incluso in Node.js .
Per avere una panoramica di cosa sia React, puoi scrivere il codice React direttamente in HTML.
Ma per utilizzare React in produzione, è necessario installare npm e Node.js.
Reagisci direttamente in HTML
Il modo più rapido per iniziare a imparare React è scrivere React direttamente nei tuoi file HTML.
Spazi W3Schools
Il modo più semplice per iniziare a creare file HTML è W3Schools Spaces!
È il luogo perfetto per creare, modificare e condividere il tuo lavoro con gli altri!
Inizia includendo tre script, i primi due ci consentono di scrivere il codice React nei nostri JavaScript e il terzo, Babel, ci consente di scrivere la sintassi JSX ed ES6 nei browser meno recenti.
Imparerai di più su JSX nel capitolo React JSX .
Esempio
Includi tre CDN nel tuo file HTML:
<!DOCTYPE html> <html> <head> <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> </head> <body> <div id="mydiv"></div> <script type="text/babel"> function Hello() { return <h1>Hello World!</h1>;} ReactDOM.render(<Hello />, document.getElementById('mydiv')) </script> </body> </html>
Questo modo di usare React può andare bene per scopi di test, ma per la produzione dovrai configurare un ambiente React .
Ottieni la certificazione!
ISCRIVITI A $95
Impostazione di un ambiente di reazione
Se hai installato npx e Node.js, puoi creare un'applicazione React utilizzando create-react-app.
Se hai già installato in precedenza create-react-appa livello globale, ti consigliamo di disinstallare il pacchetto per assicurarti che npx utilizzi sempre l'ultima versione di create-react-app.
Per disinstallare, eseguire questo comando: npm uninstall -g create-react-app.
Esegui questo comando per creare un'applicazione React denominata
my-react-app:
npx create-react-app my-react-app
Installerà create-react-apptutto ciò di cui hai bisogno per eseguire un'applicazione React.
Eseguire l'applicazione Reagire
Ora sei pronto per eseguire la tua prima vera applicazione React!
Esegui questo comando per spostarti nella my-react-appdirectory:
cd my-react-app
Esegui questo comando per eseguire l'applicazione React
my-react-app:
npm start
Verrà visualizzata una nuova finestra del browser con l'app React appena creata! In caso contrario, apri il browser e digita
localhost:3000nella barra degli indirizzi.
Il risultato:
Modifica l'applicazione React
Fin qui tutto bene, ma come faccio a modificare il contenuto?
Cerca nella my-react-appdirectory e troverai una
srccartella. All'interno della
srccartella c'è un file chiamato
App.js, aprilo e apparirà così:
/myReactApp/src/App.js:
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;Prova a modificare il contenuto HTML e salva il file.
Si noti che le modifiche sono visibili subito dopo aver salvato il file, non è necessario ricaricare il browser!
Esempio
Sostituisci tutto il contenuto all'interno di <div className="App">con un
<h1>elemento.
Visualizza le modifiche nel browser quando fai clic su Salva.
function App() {
return (
<div className="App">
<h1>Hello World!</h1>
</div>
);
}
export default App;Si noti che abbiamo rimosso le importazioni non necessarie (logo.svg e App.css).
Il risultato:
Qual è il prossimo?
Ora hai un ambiente React sul tuo computer e sei pronto per saperne di più su React.
Nel resto di questo tutorial utilizzeremo il nostro strumento "Mostra React" per spiegare i vari aspetti di React e come vengono visualizzati nel browser.
Se vuoi seguire gli stessi passaggi sul tuo computer, inizia eliminando la srccartella in modo che contenga un solo file: index.js. Dovresti anche rimuovere tutte le righe di codice non necessarie all'interno del index.js
file per farle sembrare come nell'esempio nello strumento "Mostra reazione" di seguito:
Esempio
Fare clic sul pulsante "Esegui esempio" per vedere il risultato.
index.js:
import React from 'react';
import ReactDOM from 'react-dom';
const myfirstelement = <h1>Hello React!</h1>
ReactDOM.render(myfirstelement, document.getElementById('root'));