React App veröffentlichen
Der Angang über die Entwicklungs-Umgebung auf dem eigenen Rechner erzeugt nur eine Entwickler-Version. Die Create React-App setzt ein optimiertes React-Projekt mit allen benötigten Zutaten für die Produktionsumgebung auf.
React Create App wird mit NPM (Node Package Manager) installiert, ohne dass dafür Tools wie Webpack (Bündeln von Ressourcen eines Projekts) oder Babel (Transpiler) installiert und konfiguriert werden müssen.
Die App wird auf dem lokalen Entwickler-System installiert und muss nicht auf dem Webserver installiert sein.
Version von NPM und Node JS abfragen:
npm -v 6.14.4 node -v v14.1.0
Wenn Node JS nicht installiert ist: Node.js
sudo npm install -g create-react-app
In den jüngeren Versionen von React muss create-react-app nicht mehr installiert werden. Stattdessen kann create-react-app mit npx (x für execute) direkt aufgerufen werden.
React Developer Tools
Auf jeden Fall hilfreich: Die Chrome React Developer Tools aus dem Chrome Web Store.
Die React-Developer-Tools setzen das React-Icon in die Browserleiste – z.B. zu sehen bei der Bearbeitung von WordPress-Seiten mit Gutenberg. Die Developer-Tools gibt es auch als Add Ons für Firefox.
Create App
Jetzt beginnt die Transformation der Entwickler-Version zur Produktions-Version. Dazu in den Ordner, in dem die Anwendung auf dem lokalen Rechner erzeugt werden soll.
Im Terminal kommt man am einfachsten zum Ordner, in dem das Projekt installiert werden soll, wenn man den Ordner aus dem Finder direkt ins Terminal zieht. create-react-app mit dem Namen des Projekts aufrufen.
npx create-react-app hello-react --use-npm
Der Aufruf npx create-react-app erzeugt einen vollständigen React App-Ordner tours-app und startet die Seite unter localhost:3000/.
Unter node-modules liegt eine ellenlange Liste von Modulen, unter public liegen die Projektdateien vom Favicon über die index.html-Datei bis hin zum Manifest und zur robots.txt. Unter src liegen CSS und js-Dateien.
In der Datei package.json sehen wir react, react-dom und react-scripts als dependencies (Abhängigkeit). react-scripts packt alle Pakete wie Babel und Webpack.
Aufgepasst: create-react-app geht davon aus, dass das Projekt direkt unter dem root-Verzeichnis der Webseite sitzt!
The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.
Soll die App nicht ins Homeverzeichnis, reicht ein zusätzlicher Eintrag in package.json.
"private": true, "homepage": ".", "dependencies": {
Struktur eines React-Projekts
In der index.js sitzt ReactDOM.render (…), dass durch den ReactDOM.render-Aufruf der Entwickler-Version ersetzt wird. Dazu kommen die Daten der App. Entsprechend dem letzten Beispiel aus React.
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
const tourTarget = [
{id: 1, name: "Xantener Nordsee", route: "Ab Bahnhof Xanten"},
{id: 2, name: "Fossa Eugeniana", route: "Ab Bahnhof Rheinberg"},
{id: 3, name: "Samans Hof", route: "Ab Vluyner Platz"},
];
ReactDOM.render (
<App touren={tourTarget} />,
document.getElementById("root")
);
<span style="color:gray">// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA</span>
serviceWorker.unregister();
In App.js liegen die Komponenten und werden durch die eigenen Components ersetzt.
import React from 'react';
const App = ({touren}) => (
<ul>
{touren.map (rad =>
<li key={rad.id}>{rad.name} Start: {rad.route}</li>
)}
</ul>
);
export default App;
In dem kleinen Beispiel können Component-Import genauso wie App.css und logo-Import gelöscht werden. Sonst gibt es eine Warnung:
./src/App.js Line 2:8: 'logo' is defined but never used no-unused-vars
Wenn die Projekte größer werden, wird i.d.R. jede Komponente ihre eigene Datei haben. Das hält die Struktur übersichtlich und erlaubt überschaubare Erweiterungen und Änderungen.
Jetzt noch im Terminal in den Projekt-Ordner und npm install aufrufen.
Mit npm start wird localhost:3000 im Browser geöffnet – et voilà – fast fertig. Während der Tests zeigt localhost:3000 jede Änderung sofort an, wenn index.js geändert und gespeichert wurde.
Um die App für die Produktion vorzubereiten, den Server anhalten (^C) und npm run build setzt die optimierte Fassung für die Produktionsseite im build-Ordner auf.
Kurzfassung: React-Anwendung
create-react-app braucht nur den Namen des Projekts. Das Erzeugen des Projektordners spult die Aktionen automatisch ab.
create-react-app mein-projekt … We sugget that you begin by typing: cd touren npm start
Die Anweisung npm start in der Console startet den Browser (Chrome) mit localhost:3000, der automatisch ein Reload ausführt, wenn die Anwendung gespeichert wird.
npm run build erzeugt den Ordner für die Produktion.
npm run build
In Chrome mit der React-Erweiterung zeigt sich das React-Logo.
