# React • Praxislexikon
Zum Inhalt springen
Was ist React?
Wie kann man React in HTML integrieren?
Man öffnet einen Beitrag, eine Seite in einem Text-Editor .
Man geht an eine beliebige Stelle zwischen dem <body> und dem </body> Befehl.
Folgenden Code einfügen:
<div id="like_button_container">
Ganz am Ende der Datei folgenden Code einfügen:
<!-- Load React. -->
<!-- Note: when deploying, replace "development.js" with "production.min.js". -->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<!-- Load our React component. -->
<script src="like_button.js"></script>
Im Code ersetzt man development.js durch production.min.js:
Jetzt wird die java-script-Datei mit Namen like_button.js erstellt:
'use strict';
const e = React.createElement;
class LikeButton extends React.Component {
constructor(props) {
super(props);
this.state = { liked: false };
}
render() {
if (this.state.liked) {
return 'You liked this.';
}
return e(
'button',
{ onClick: () => this.setState({ liked: true }) },
'Like'
);
}
}
const domContainer = document.querySelector('#like_button_container');
ReactDOM.render(e(LikeButton), domContainer);
Diese Datei wird als like_button.js gespeichert.
Wenn man sich die Funktion im Browser ansieht, erscheint ein Button in Blau. Klickt man darauf erscheint der Text: You liked this.
Die Nutzung von „unpkg.com “ sollte aber eher zum Testen sein.
Diese Anleitung in Englisch findet sich: hier .
So siehts aus:
Wie kann man React lernen?
Wie kann man React programmieren?
Man muss ReactJS installieren.
Die Software ist unter BSD-Lizenz frei.
Mehreren Komponenten werden mit JSX zusammengefügt.
Wofür kann man React verwenden?
Benutzeroberflächen erstellen
Bietet modulare Komponentenarchitektur, einfache Komponenten werden zusammengefügt
Dynamische Webseite (Webframework) erstellen
Single-Page-Webanwendungen
Mit Node.js serverseitig
Browser-Rendering-Performance (Ladegeschwindigkeit) optimieren: nur einzelne DOM-Elemente werden geändert
Leicht in vorhandene Codebasen zu integrieren
Frontend-Code (Code für die Darstellung der Webseite beim Benutzer) vereinfachen, leichter zu sehen, was der Code bewirkt, weniger weit mit anderem Code verwoben.
zu meinen persönlichen Favoriten hinzufügen! 0
Definition
integrieren
lernen
programmieren
verwenden
