Cos'è Reagire?
React è una libreria JavaScript creata da Facebook
React è una libreria di interfaccia utente (UI).
React è uno strumento per la creazione di componenti dell'interfaccia utente
Reagire al tutorial di avvio rapido
Questo è un tutorial di avvio rapido.
Prima di iniziare, dovresti avere una conoscenza di base di:
Per un tutorial completo:
Inizia il tutorial Reagire ❯Aggiunta di React a una pagina HTML
Questo tutorial di avvio rapido aggiungerà React a una pagina come questa:
Esempio
<!DOCTYPE html>
<html lang="en">
<title>Test React</title>
<!-- Load React API -->
<script src= "https://unpkg.com/react@16/umd/react.production.min.js"></script>
<!-- Load React DOM-->
<script src= "https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<!-- Load
Babel Compiler -->
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
<body>
<script type="text/babel">
// JSX Babel code goes here
</script>
</body>
</html>
Cos'è Babele?
Babel è un compilatore JavaScript in grado di tradurre markup o linguaggi di programmazione in JavaScript.
Con Babel, puoi utilizzare le più recenti funzionalità di JavaScript (ES6 - ECMAScript 2015).
Babel è disponibile per diverse conversioni. React usa Babel per convertire JSX in JavaScript.
Tieni presente che <script type="text/babel"> è necessario per utilizzare Babel.
Cos'è JSX?
JSX sta per Java S Script X ML .
JSX è un'estensione simile a XML/HTML per JavaScript.
Esempio
const element = <h1>Hello World!</h1>
Come puoi vedere sopra, JSX non è JavaScript né HTML.
JSX è un'estensione della sintassi XML per JavaScript che include anche tutta la potenza di ES6 (ECMAScript 2015).
Proprio come l'HTML, i tag JSX possono avere nomi, attributi e figli di tag. Se un attributo è racchiuso tra parentesi graffe, il valore è un'espressione JavaScript.
Si noti che JSX non utilizza le virgolette attorno alla stringa di testo HTML.
Reagire al rendering DOM
Il metodo ReactDom.render() viene utilizzato per il rendering (visualizzazione) di elementi HTML:
Esempio
<div id="id01">Hello World!</div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello React!</h1>,
document.getElementById('id01'));
</script>
Espressioni JSX
Le espressioni possono essere utilizzate in JSX racchiudendole tra parentesi graffe {} .
Esempio
<div id="id01">Hello World!</div>
<script type="text/babel">
const name = 'John Doe';
ReactDOM.render(
<h1>Hello {name}!</h1>,
document.getElementById('id01'));
</script>
Elementi di reazione
Le applicazioni React sono generalmente costruite attorno a un singolo elemento HTML .
Gli sviluppatori di React spesso chiamano questo il nodo radice (elemento radice):
<div id="root"></div>
Gli elementi di reazione sono simili a questo:
const element = <h1>Hello React!</h1>
Gli elementi vengono visualizzati (visualizzati) con il metodo ReactDOM.render():
ReactDOM.render(element, document.getElementById('root'));
Gli elementi React sono immutabili . Non possono essere cambiati.
L'unico modo per modificare un elemento React è rendere ogni volta un nuovo elemento:
Esempio
function tick() {
const element = (<h1>{new
Date().toLocaleTimeString()}</h1>);
ReactDOM.render(element, document.getElementById('root'));
}
setInterval(tick, 1000);
Componenti di reazione
I componenti React sono funzioni JavaScript.
Questo esempio crea un componente React chiamato "Benvenuto":
Esempio
function Welcome() {
return <h1>Hello React!</h1>;
}
ReactDOM.render(<Welcome />, document.getElementById('root'));
React può anche utilizzare le classi ES6 per creare componenti.
Questo esempio crea un componente React chiamato Welcome con un metodo di rendering :
Esempio
class Welcome extends React.Component {
render() {
return(<h1>Hello React!</h1>); }
}
ReactDOM.render(<Welcome />,
document.getElementById('root'));
Reagire alle proprietà dei componenti
Questo esempio crea un componente React denominato "Benvenuto" con argomenti di proprietà:
Esempio
function Welcome(props) {
return <h1>Hello
{props.name}!</h1>;
}
ReactDOM.render(<Welcome name="John Doe"/>,
document.getElementById('root'));
React può anche utilizzare le classi ES6 per creare componenti.
Questo esempio crea anche un componente React denominato "Benvenuto" con argomenti di proprietà:
Esempio
class Welcome extends React.Component {
render() {
return(<h1>Hello {this.props.name}</h1>); }
}
ReactDOM.render(<Welcome
name="John Doe"/>, document.getElementById('root'));
compilatore JSX
Gli esempi in questa pagina compilano JSX nel browser.
Per il codice di produzione, la compilazione deve essere eseguita separatamente.
Crea un'applicazione di reazione
Facebook ha creato un'applicazione Crea React con tutto il necessario per creare un'app React.
È un server di sviluppo che utilizza Webpack per compilare React, JSX ed ES6, file CSS con prefisso automatico.
L'app Create React utilizza ESLint per testare e segnalare errori nel codice.
Per creare un'app Create React, esegui il seguente codice sul tuo terminale:
Esempio
npx create-react-app react-tutorial
Assicurati di avere Node.js 5.2 o versioni successive. Altrimenti devi installare npx:
Esempio
npm i npx
Avvia una cartella da dove vuoi che rimanga la tua applicazione:
Esempio
C:\Users\myUser>npx create-react-app react-tutorial
Risultato di successo:
npx: installed 63
in 10.359s
Creating a new React app in C:\Users\myUser\react-tutorial.
Installing packages. This might take a couple of minutes.
Installing react,
react-dom, and react-scripts...
+ [email protected]
+ [email protected]
+
[email protected]
added 1732 packages from 664 contributors and audited
31900 packages in 355.501s
found 0 vulnerabilities+ [email protected]
Success! Created react-tutorial at C:\Users\myUser\react-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 react-tutorial
npm start