Table of Contents
React kann über ein paar JS Dateien von CDNs relativ einfach lokal ohne eine lokal laufende Node.js Instanz laufen.
Dateien
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>First Component</title>
</head>
<body>
<div id="root"></div>
<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone"></script>
<script src="index.js" type="text/jsx"></script>
</body>
</html>Wie hier zu sehen beinhaltet die index.html nicht sehr viele aufregende Elemente:
- Der <head> beinhaltet nur standard HTML5 Meta-Tags und den Title der Seite, nichts React spezifisches.
- Direkt nach dem <body> sehen wir unser „root“ Element über den wir unsere React-App aufbauen werden.
- Vor dem </body> sehen wir einige JS Dateien die extern und eine Datei die lokal eingebunden wird:
- react.development.js: Basis React-Library
- react-dom.development.js: React-DOM Erweiterung um mit dem DOM interagieren zu können
- babel-standalone: Babel ist für die JSX und damit die Javascript-Umwandlung verantwortlich
- index.js: unsere React-App
index.js
class Hello extends React.Component {
render() {
return (
<div>
<h1>Hello there!</h1>
<p>I am a React Component!</p>
</div>
);
}
}
ReactDOM.render(<Hello />, document.getElementById('root'));Hier definieren wir eine Component mit dem Namen „Hello„.
D.h. sie kann über „<Hello />“ gerenderd werden.
In dieser Component beinhaltet sich nur eine render() Funktion, die definiert, was beim rendern dieser Component an DOM ausgegeben wird.
Am Ende wird lediglich definiert, dass die Componente „<Hello />“ in das Element mit der ID „root“ gerendered wird.
Dadurch erhalten wir beim Aufruf der index.html folgenden Output
Wichtig hierbei ist, dass die index.html wirklich über einen Web-Server aufgerufen wird da wegen CORS Einschränkungen das lokale einbinden von weiteren JS-Dateien nicht erlaubt ist.
Alternativ kann natürlich der JS React Code direkt in die index.html geschrieben werden, jedoch wird dies bei größeren und komplexeren Projekten mit mehreren Components nicht wartbar. Tipp hier von mir wäre z.B. der „Live Server“ vom Visual Studio Code Editor.