Was ist Reagieren?
React ist eine von Facebook erstellte JavaScript- Bibliothek
React ist eine Bibliothek für Benutzeroberflächen (UI).
React ist ein Tool zum Erstellen von UI-Komponenten
Reagieren Sie auf das Schnellstart-Tutorial
Dies ist ein Schnellstart-Tutorial.
Bevor Sie beginnen, sollten Sie ein grundlegendes Verständnis haben von:
Für ein vollständiges Tutorial:
React-Tutorial starten ❯Hinzufügen von React zu einer HTML-Seite
Dieses Schnellstart-Tutorial fügt React zu einer Seite wie dieser hinzu:
Beispiel
<!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>
Was ist Babel?
Babel ist ein JavaScript-Compiler, der Auszeichnungs- oder Programmiersprachen in JavaScript übersetzen kann.
Mit Babel können Sie die neuesten Funktionen von JavaScript (ES6 - ECMAScript 2015) verwenden.
Babel ist für verschiedene Konvertierungen verfügbar. React verwendet Babel, um JSX in JavaScript umzuwandeln.
Bitte beachten Sie, dass <script type="text/babel"> für die Verwendung von Babel benötigt wird.
Was ist JSX?
JSX steht für Java S cript X ML .
JSX ist eine XML/HTML-ähnliche Erweiterung von JavaScript.
Beispiel
const element = <h1>Hello World!</h1>
Wie Sie oben sehen können, ist JSX weder JavaScript noch HTML.
JSX ist eine XML-Syntaxerweiterung für JavaScript, die auch mit der vollen Leistung von ES6 (ECMAScript 2015) ausgestattet ist.
Genau wie HTML können JSX-Tags Tag-Namen, -Attribute und -Kinder haben. Wenn ein Attribut in geschweifte Klammern eingeschlossen ist, ist der Wert ein JavaScript-Ausdruck.
Beachten Sie, dass JSX keine Anführungszeichen um die HTML-Textzeichenfolge verwendet.
DOM Render reagieren
Die Methode ReactDom.render() dient zum Rendern (Anzeigen) von HTML-Elementen:
Beispiel
<div id="id01">Hello World!</div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello React!</h1>,
document.getElementById('id01'));
</script>
JSX-Ausdrücke
Ausdrücke können in JSX verwendet werden, indem sie in geschweifte Klammern {} eingeschlossen werden.
Beispiel
<div id="id01">Hello World!</div>
<script type="text/babel">
const name = 'John Doe';
ReactDOM.render(
<h1>Hello {name}!</h1>,
document.getElementById('id01'));
</script>
Reaktionselemente
React-Anwendungen sind normalerweise um ein einzelnes HTML-Element herum aufgebaut .
React-Entwickler nennen dies oft den Root-Knoten (Root-Element):
<div id="root"></div>
Reaktionselemente sehen so aus:
const element = <h1>Hello React!</h1>
Elemente werden mit der Methode ReactDOM.render() gerendert (angezeigt):
ReactDOM.render(element, document.getElementById('root'));
Reaktionselemente sind unveränderlich . Sie können nicht geändert werden.
Die einzige Möglichkeit, ein React-Element zu ändern, besteht darin, jedes Mal ein neues Element zu rendern:
Beispiel
function tick() {
const element = (<h1>{new
Date().toLocaleTimeString()}</h1>);
ReactDOM.render(element, document.getElementById('root'));
}
setInterval(tick, 1000);
Reaktionskomponenten
React-Komponenten sind JavaScript-Funktionen.
Dieses Beispiel erstellt eine React- Komponente namens „Welcome“:
Beispiel
function Welcome() {
return <h1>Hello React!</h1>;
}
ReactDOM.render(<Welcome />, document.getElementById('root'));
React kann auch ES6-Klassen verwenden, um Komponenten zu erstellen.
Dieses Beispiel erstellt eine React-Komponente namens Welcome mit einer render- Methode :
Beispiel
class Welcome extends React.Component {
render() {
return(<h1>Hello React!</h1>); }
}
ReactDOM.render(<Welcome />,
document.getElementById('root'));
Eigenschaften der Reaktionskomponente
Dieses Beispiel erstellt eine React- Komponente namens „Welcome“ mit Eigenschaftsargumenten:
Beispiel
function Welcome(props) {
return <h1>Hello
{props.name}!</h1>;
}
ReactDOM.render(<Welcome name="John Doe"/>,
document.getElementById('root'));
React kann auch ES6-Klassen verwenden, um Komponenten zu erstellen.
Dieses Beispiel erstellt auch eine React-Komponente namens „Welcome“ mit Eigenschaftsargumenten:
Beispiel
class Welcome extends React.Component {
render() {
return(<h1>Hello {this.props.name}</h1>); }
}
ReactDOM.render(<Welcome
name="John Doe"/>, document.getElementById('root'));
JSX-Compiler
Die Beispiele auf dieser Seite kompilieren JSX im Browser.
Für Produktionscode sollte die Kompilierung separat erfolgen.
React-Anwendung erstellen
Facebook hat eine React-Anwendung erstellen mit allem, was Sie zum Erstellen einer React-App benötigen.
Es ist ein Entwicklungsserver, der Webpack verwendet, um React-, JSX- und ES6-CSS-Dateien mit automatischem Präfix zu kompilieren.
Die Create React App verwendet ESLint, um Fehler im Code zu testen und vor Fehlern zu warnen.
Um eine Create React App zu erstellen, führen Sie den folgenden Code auf Ihrem Terminal aus:
Beispiel
npx create-react-app react-tutorial
Stellen Sie sicher, dass Sie über Node.js 5.2 oder höher verfügen. Andernfalls müssen Sie npx installieren:
Beispiel
npm i npx
Beginnen Sie einen Ordner über dem Ort, an dem Ihre Anwendung bleiben soll:
Beispiel
C:\Users\myUser>npx create-react-app react-tutorial
Erfolgsergebnis:
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