React Create App

React Symbol

Create React App ist ein Tool für die Kommandozeile des Terminals und erstellt einen Ordner mit allen erforderlichen Dateien eines Projekts als Umgebung für die lokale Entwicklung mit React. Dabei benutzt Create App Babel und Webpack unter einem Deckel, so dass ES6 zum Zuge kommen kann und keine weitere Konfiguration nötig ist.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

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.

react-developer-tools-chrome

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/.

React Projekt-Ordner

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.

React Logo animated

npm run build erzeugt den Ordner für die Produktion.

npm run build

In Chrome mit der React-Erweiterung zeigt sich das React-Logo.

React Developer Tools
Ansicht: Chrome mit React-Logo
tours-app node_modules package-lock.json package.json public README.md src App.css App.js App.test.js index.css index.js logo.svg serviceWorker.js setupTests.js