nvm install [version]
) die auf dem System installierte Version aktualisieren kann. Für einer Liste aller verfügbaren Version kannst du ganz einfach nvm ls-remote
(Mac/Linux) bzw. nvm list available
(Windows) benutzen. Ich empfehle im weiteren Verlaufe dieses Buches, die aktuelle LTS (Long Term Support) Version zu benutzen. LTS Versionen sind stabile Versionen, die auch längere Zeit Updates erhalten.--global
(bzw. -g
) sorgt dabei dafür, dass die yarn
-Executable global installiert wird und von überall auf eurem Gerät auf der Kommandozeile ausgeführt werden kann, indem ihr yarn
auf der Kommandozeile eingebt.@babel/core
), das lediglich einige APIs bereitstellt, die dann von Plugins für das entsprechende Transpiling verwendet werden. Diese Plugins werden oft zu sog. Presets zusammengefasst, die dann wiederum mehrere Plugins gleichzeitig installieren. Die in React-basierten Projekten üblichsten Presets sind @babel/preset-react
(um JSX zu lesen und zu übersetzen) und @babel/preset-env
, welches abhängig von einer Ziel-Umgebung modernes JavaScript so umschreibt, dass es eben auch ältere Browser verstehen.@
-Zeichen vor dem Namen bedeutet dabei, dass es sich um eine Organisation innerhalb der npm Registry (dem npm-Paketverzeichnis) handelt und kann als eine Art Namespace betrachtet werden. Im Fall von Babel findet man dort die offiziellen Pakete, die von den Babel-Maintainern dort veröffentlicht werden. Bevor Babel in der Version 7 erschien gab es diese Organisation noch nicht und die Pakete wurden mit einem Bindestrich im Namen getrennt. So hieß @babel/preset-react
eben babel-preset-react
, @babel/core
war babel-core
usw.babel-core
statt @babel/core
begegnen. In diesem Fall handelt es sich also einfach um Babel 6 (oder eine ältere Version). Allerdings kommt es gelegentlich vor, dass Entwickler deren Plugins oder Presets nicht offizieller Teil von Babel sind, diese ebenfalls mit babel-
prefixen, während die Pakete dennoch mit Babel 7 arbeiten. Hier hilft in der Regel nur ein Blick in die Readme des jeweiligen Pakets.@babel/preset-env
@babel/preset-react
@babel/plugin-proposal-object-rest-spread
@babel/plugin-proposal-class-properties
@babel/plugin-syntax-dynamic-import
@babel/preset-flow
für Flow bzw. @babel/preset-typescript
für TypeScript.--dev
-Flag gibt hier an, dass es sich um eine devDependency
handelt, also nur für die Entwicklung relevant ist und nicht Teil des Produktionscodes sein soll.import
oder require()
in ihren eigenen Module-Scope laden und damit innerhalb des Moduls verfügbar machen. Am Ende fällt dann nur noch eine einzelne JavaScript-Datei heraus (auf Wunsch auch mehrere), so dass nicht mehr jede einzelne unserer Komponenten, und das können schnell mal über 100 werden, einzeln über <script src="..."></script>
im HTML eingebunden werden muss.build
-Ordner zu kopieren, der später auf einen Server deployed wird und viele andere Dinge. Wie eine solche Konfiguration aussehen kann, beleuchten wir später noch einmal genau, weshalb das Webpack-Kommandozeilen-Tool auch an dieser Stelle noch nicht installiert werden muss.eslint-plugin-react
, eslint-plugin-babel
und eslint-plugin-react-hooks
als solide Basis erwiesen.Create React apps with no build configuration
name
-Eigenschaft des package.json
-Formats von npm haben. Dies bedeutet, neben einigen anderen Kriterien, er darf nur Kleinbuchstaben beinhalten, keine Leerzeichen und darf aus maximal 214 Zeichen bestehen. Die vollständigen Kriterien finden sich in der npm-Dokumentationyarn start
) auf Performance optimiert, weswegen das Ausführen von yarn build
für gewöhnlich deutlich länger dauert als yarn start
.yarn eject
können wir uns von Create React App „verabschieden“. Dabei werden alle Build-Scripts, Dependencies und Config-Files in das aktuelle Projektverzeichnis kopiert und wir sind fortan selbst dafür verantwortlich, dass alles korrekt läuft. Dadurch haben wir mehr Verantwortung, aber eben auch deutlich mehr Freiheiten, da wir von nun an eigene Änderungen an der Standard-Konfiguration von CRA vornehmen können. Wann und ob dieser Schritt überhaupt jemals nötig wird, ist völlig abhängig vom Projekt. Ich selbst habe bereits in Projekten über Monate mit dem CRA Standard-Setup gearbeitet, in anderen Projekten hat es sich bereits nach wenigen Tagen oder Wochen ergeben, dass Änderungen am Setup vorgenommen werden müssen, so dass ein Eject recht frühzeitig vorgenommen wurde.App.js
-Datei aus Create React App übertragen und ausgeführt werden. Um den Lern-Effekt zu erhöhen, würde ich sogar empfehlen, die Beispiele nicht zu kopieren, sondern tatsächlich abzutippen.