Vielen Dank für dieses tolle Video. Ich hatte natürlich die üblichen Schwierigkeiten, ähnlich zu den in den übrigen Kommentaren. Und noch andere. Habe mich aber durchgebissen und mich der Webpack Doku bedient. Allein das war bereits eine Lernerfahrung wert. 🙂
Klasse Videos. Sehr interessant und angenehm vorgetragen. Habe kurz überlegt, ob ich Webpack überspringe, hab es aber dann doch versucht. Dabei habe ich festgestellt das webpack-dev-server (zumindest Stand Januar 2021) so nicht mehr läuft. Falls es noch jemandem so geht: 'webpack-dev-server' mit 'webpack serve --mode=development' ersetzen. Der Befehl compiliert auch direkt vor dem Servieren.
[gr] Vielen Dank für Deinen Kommentar - und ja, das mit dem Server stimmt leider. Es ist super, dass Du die Lösung direkt gepostet hast, danke schön :-)
Error: Cannot find module 'webpack-cli/bin/config-yargs' Für alle die auf diesen Fehler stoßen, das ist Problem welcher bereits bekannt ist und durch webpack-cli 4.0+ und webpack-dev-server 3.*+ auftreten kann. Statt "npx webpack-dev-server" einfach "npx webpack serve" ausführen.
Super Video 🙏 Danke euch dafür! Ist der Industrie-Standard für React-Components CSS zu verwenden oder SASS? Grund ist, dass die einzelnen CSS-Files (styles.css, headline.css, usw.) alle separat als Tag im Head aufgeführt werden. Best practise wäre doch hier die CSS-Files zu einem Main-CSS-File zu mergen, oder? Würde mich interessieren wie man SASS dazu in den Webpack Workflow einbaut. LG
Hi Timo, erstmal vielen Dank für dein Feedback. Freut mich, wenn dir die Videos gefallen! Zu CSS bzw. SASS: Erstmal vorab: Woher nimmst du die Annahme, dass die Dateien als -Tag auftauchen? Wenn du die Dateien so wie im Video in den einzelnen Komponenten importierst und dann über Webpack verarbeiten lässt, werden diese tatsächlich gar nicht als CSS Dateien geschrieben, sondern im JavaScript-Code verarbeitet. Bzw. die Styles werden dann quasi über JavaScript gesetzt. Es ist in dem Fall also gar nicht nötig, CSS Dateien einzubinden und auch nicht, diese wie du schreibst zu einer einzelnen zu minifizieren. Aber du hast recht: Würden wir CSS nicht im JS Importieren sondern weiterhin als separatem, "globale" Dateien behandeln, dann würden wir sie per Webpack genau wie du schreibst bundlen (also zusammenfassen) und minifizieren. Da wir in React ja aber eben eher komponentenbasiert arbeiten und damit auch versuchen, die Komponenten in sich geschlossen zu halten, sehe zumindest ich die "globale" Variante immer seltener. Bezgl. CSS vs. SASS: Da würde ich behaupten, dass schon noch eher zu SASS gegriffen wird. In die Webpack-pipeline lässt sich das vergleichsweise einfach mittels des "sass-loaders" (www.npmjs.com/package/sass-loader) einbinden. Dazu musst du im wesentlichen nur: 1. Den Loader und SASS Installieren: "npm install sass-loader sass webpack --save-dev" 2. Die Webpack-Config in der "rule" für "css" um den Eintrag "sass-loader" erweitern, so dass das wie hier aussieht: use: [ "style-loader", "css-loader", "sass-loader", ], Danach kannst du über "import styles.scss" auch SASS-Dateien importieren. ABER: Im React-Kontext gibt es aber einen weiteren, großen Spieler: Styled Components (styled-components.com/). Styled-Components führen im wesentlichen den Gedanken von JSX noch weiter: Statt HTML+JS in einer Datein zu verschmelzen, kommen nun auch noch die Styles hinzu, die sich dann ebenfalls mit JavaScript entsprechend dynamisieren lassen. Ich werde in naher Zukunft auch noch eine Fogle zu Styled-Components in React aufnehmen - bis dahin kannst du du aber schonmal das kurze Intro von meinem Kollegen Golo Roden hier anschauen: ua-cam.com/video/WNpCI7xrp-c/v-deo.html Ebenfalls kannst du dir auch gerne nochmal seinen Artikel zu modernem CSS durchlesen - der gibt auch nochmal einen sehr guten Überblick über die aktuellen Entwicklungen: www.heise.de/developer/artikel/CSS-mit-modernen-Werkzeugen-besser-strukturieren-4973944.html Viele Grüße, David
@@davelosert Hammer! Richtig guter Content und vielen, vielen Dank für die schnelle Rückmeldung! Auf das mit den Style-Tags komme ich, weil ich euer repository 04-webpack aufgesetzt und dann im Browser-Dev-Tool den servered HTML-Code angeschaut habe. Dort sieht der so aus: imgshare.io/image/bildschirmfoto-2021-01-03-um-114749.NFD9Ol Vielen Dank nochmal! Freue mich auf euren weiteren Content!!
@@timokramer5604 Sehr gerne! Freut mich, wenn es hilft. :) Ach und ja stimmt, wenn du den webpack-dev-server startest fügt er das CSS tatsächlich in den Head ein. Im Produktiv-Modus ist das aber anders. Das kannst du selbst sehen, wenn du aus dem Repo einmal `npm run build` ausführst und dir dann im "/dist" Verzeichnis die "index.html" anschaust - da wird dann kein CSS mehr eingefügt, sondern es befindet sich eben in der "main.js". :) Viel Spaß noch mit dem Kurs. Viele Grüße, David
In meinem Verzeichnis ist immer noch ne .babelrc und keine babel.config.json ... hab ich iwo vorher was übersehen? und bei 34:24 funktioniert das npm start bei mir nicht.. Hab es aber richtig im package.log eingetragen. FEHLERMELDUNG: > testapp-2@1.0.0 start /Users/xxx/Desktop/Kiste/ReaktJSTest1/testapp2 > webpack-dev-server internal/modules/cjs/loader.js:834 throw err; ^ Error: Cannot find module 'webpack-cli/bin/config-yargs' ... npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! testapp-2@1.0.0 start: `webpack-dev-server` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the testapp-2@1.0.0 start script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. ...
@Josch Te: Danke für deine Fragen! :) Zur babel.config.json: Du hast recht - das habe ich wohl ohne anzukündigen zwischendurch umgestellt. Beide Formate sind aber valide und im Inhalt identischt. Eine babel.config.json gilt normalerweise einfach im gesamten Projekt, eine .babelrc nur in allen Kindsordnern. Eine .babelrc kann also Hilfreich sein, um in einem Komplexen Projekt eine babel.config.json auf einer höheren Ebene zu überschreiben. Mehr dazu auch heir: babeljs.io/docs/en/config-files#configuration-file-types Bezgl. deines Fehlers: Hast du `webpack-cli` denn installiert? (also `npm install webpack-cli`)?
@@stefcoppenhiller5587 Ich habe das ganze gerade lokal nochmal nachgestellt und bin auf das gleiche Problem gestoßen. Das Problem: Webpack ist inkl. CLI und Webpack-Dev-Server mittlerweile in einer neuen Version erschienen, die etwas anders funktioniert. Da ihr (wie ich es im Video ja auch zeige) diese Tools jeweils ohne Angabe einer Version installiert, schlägt das nun fehl. Es gibt zwei Wege das zu lösen: 1. In Eurer `package.json` könnt ihr unter `scripts.start` den Befehl mit `webpack serve` ersetzen. Das ist der neue Weg, eine Dev-Umgebung hochzufahren. 2. Alternativ könnt Ihr die gesamte package.json an meine hier angleichen: github.com/thenativeweb/techlounge-react/blob/master/04-webpack/package.json Danach noch `npm install` ausführen, dann werden die älteren Webpack Versionen installiert, die dann nach wie vor klappen sollte. Lasst mich gerne Wissen, ob das geholfen hat.
@@davelosert Die Lösung mit dem Befehl "webpack serve" hab nach eigener Recherche in GitHub auch gefunden und angewendet. Werde bei Zeit die 2. Alternative auch mal Testen. Auch wenn ich eine Lösung schon selber Gefunden habe sage ich vielen dank für die Ausführliche Antwort. Selten das man solch gute Antworten bekommt.
@@stefcoppenhiller5587 Sehr gerne und vielen Dank für das Feedback! Meine Hilfe hat in diesem Fall nur etwas gedauert - daher auch Danke für deine Geduld. Gut, dass du auch selbst eine Lösung gefunden hast, dann warst du ja dadurch nicht blockiert! :)
Webpack zu installieren war eine große Fehlentscheidung gewesen. Hinterher wurde gar kein React-Element mehr im Browser gezeigt. Und auch beim Zurückbauen und der Nutzung nur mit Babel war auch kein React mehr im Browser zu sehen. Ich glaube irgendwie das Webpack durch die Installation das normale Babel irgendwie blockiert oder deaktiviert hat. Ich habe aber keine Ahnung wie man das Problem lösen kann.
Sind denn die Styles, die ich auf diesen Weise für eine Komponente definiere auch nur isoliert für diese Komponente wirksam? Oder würde eine CSS-Klasse, die eine Farbe für das h1-Tag in Headline setzt, diese auch für ein h1-Tag in Paragraph und damit alle Komponenten setzen? Dabei ist mir schon klar, dass man für die Komponenten unterschiedlich benannte CSS-Klassen für beide Komponenten definieren und dann in den Komponente auf die h1-Tags anwenden könnte. Aber man kann CSS-Regeln ja aber auch direkt für HTML-Tags vergeben und da wäre es spannend zu wissen, ob sich diese Angaben gegeneinander isolieren lassen. Angular kann so etwas zum Beispiel out-of-the-box ;-).
Hi Roland, auf die Art und Weise wie ich es hier im Video erkläre sind die Styles tatsächlich nicht voneinander isoliert. Das setzten eines "h1" würde also global auch für alle andern Komponetnen gelten. Das liegt vor allem daran, dass die Anwendung der Styles hier ja an React vorbei geht und komplett von Webpack gemacht wird. Der Style- bzw. CSS-Loader macht sturr nichts anderes, als alle importierten Styles aufzusammeln und dann zur Laufzeit anzuwenden - im dev-modus noch über den Import der Stylesheets im Head des HTML Dokuments, im prod-Modus über JS. Und das ganze ohne Kontext, wo importiert oder worauf die Styles angewendet werden (wäre für die loader ja auch mehr oder weniger schwer herauszufinden). Wenn Du also rein bei diesem Setup bleibst, bräuchtest du noch eine Syntax im CSS (sowas wie BEM), um die Komponenten-Styles zu isolieren. Anders als Angular ist React ja kein komplettes Framework und fokussiert sich mehr auf das reine Rendering von HTML. React setzt damit eher auf Plugins um zuätzlichen Funktionalitäten hinzuzufügen. Ein solches Plugin (und das wohl bekannteste) ist "styled-components" (styled-components.com/). Dazu habe ich hier im vorherigen Kommentar an Timo Krämer bereits einige Erklärungen + weiterführende Links geposted, die du dir ja anschauen kannst. :) Viele Grüße, David
Vielen Dank. Super eklärt und Daumen hoch. Allerdings frage ich mich wie ich mal TypeScript Code debuggen soll wenn ich per WebPack eine React Anwendung deploye. Allein diese Formulierung macht mir Knoten in das Gehirn...... Ich frag mal chatGPT :-)
Es hat gesagt: Um Ihren TypeScript Code in einer React-Anwendung zu debuggen, die mithilfe von Webpack deployed wird, können Sie ein Debugger-Tool wie z.B. React Developer Tools verwenden. Dieses Tool bietet Ihnen eine visuelle Oberfläche, über die Sie Ihren Code einfach durchsuchen und debuggen können. Sie können es als Browser-Erweiterung installieren und es dann in Ihrem Browser öffnen, während Sie Ihre React-Anwendung ausführen. Alternativ können Sie auch ein integriertes Entwicklungsumgebung (IDE) wie z.B. Visual Studio Code verwenden, um Ihren Code zu debuggen. Viele IDEs bieten eine integrierte Debugging-Umgebung, die es Ihnen ermöglicht, Ihren Code Schritt für Schritt auszuführen und zu debuggen. Um diese Funktionen in Visual Studio Code zu nutzen, müssen Sie möglicherweise zunächst ein Debugger-Plugin installieren und ein Debugger-Konfigurationsfile für Ihre Anwendung erstellen. Ein weiterer Tipp ist, dass Sie in Ihrem TypeScript Code console.log-Statements einfügen können, um die Werte von Variablen und anderen Ausdrücken zu überprüfen, während Ihre Anwendung läuft. Sie können die Konsole Ihres Browsers öffnen und diese Ausgaben anzeigen, um zu sehen, ob Ihr Code wie erwartet ausgeführt wird. Insgesamt gibt es viele Möglichkeiten, um TypeScript Code in einer React-Anwendung zu debuggen, die mithilfe von Webpack deployed wird. Welche Methode für Sie am besten geeignet ist, hängt von Ihren persönlichen Vorlieben und der Art Ihres Projekts ab. Experimentieren Sie einfach ein wenig herum und finden Sie die Methode, die für Sie am besten funktioniert.
Nach dem "Installieren" der Datein von Github fragt er: "Would you like to install serve?" und wenn ich ja sage, dann kommen da auch eine ganze Reihe von Fehlermeldungen und der Server lässt sich nicht mehr starten und serve installiert sich auch nicht.
Nach endlosen Fehler auswürfen npm ERR!, webpack is not recognised und 'mode' Option Not set, konnte ich nach dem durchlesen der comments den die Fehler beheben, juhu! Im webpack.config.js : Direkt unter module.exports = { mode : 'production', ...... } setzen. Sowie npm install webpack + Den Hinweisen von @Alexander Bergmann & @David Losert vielen Dank, in einem Jahr ändert sich so viel 😅
Hi Nepa, erstmal sorry für die späte Antwort - der Kommentar ist uns irgendwie durchgerutscht. Und ja haha, das ist leider so. Letztes Jahr kam Webpack 5 und das hat einiges kaputt gemacht (ein Upgrade zeige ich in Folge 16: ua-cam.com/video/6FBLMiyF0wU/v-deo.html). Würde ich die Folgen nochmal aufnehmen, ich würde beim Install immer direkt die Version mit anhängen. Das ist definitiv ein Learning - und wer weiß, vlt. nehmen wir die Folge ja auch nochmal neu auf irgendwann. Freut mich, dass du den Fehler auch selbst über die Kommentare lösen konntest. Viele Grüße, David
Guten Morgen und danke für den super Kurs! Leider scheitere ich gerade ein wenig an Webpack. Aus irgendeinem Grund bekomme ich im Browser immer die Meldung "React is not defined" und die Components werden nicht geladen. Ich bin genau dem Kurs gefolgt. Webpack läuft fehlerlos durch und react wird währenddessen auch gefunden ('modules by path ./node_modules/react/ 6.48 KiB 2 modules'). Meine bundle.js scheint deutlich kürzer zu sein, als die im Video gezeigte. Hat da jemand eine Idee? Fehlt React in der bundle.js?
Hi Anton, erstmal vielen Dank für das nette Feedback. Freut mich, wenn dir der Kurs gefällt! :) Hast du denn am Kopf jeder Datei auch ein `import React from 'react'` eingefügt? Das erkläre ich ab ca. Minute 37:54. Das Statement muss in jeder `jsx` Datei eingefügt werden, da es nach dem Kompilieren gebraucht und nun nicht mehr als globale Variable zur Verfügung steht. Viele Grüße, David
@@davelosert Danke David für den Versuch. Hab die Statesments überall eingefügt, wie im Video. Ich komme einfach nicht darauf, was der Fehler sein könnte. Aber ich nehme jetzt deine Sources von Github, damit funktioniert es.
@@drbierei Sehr gerne. Tut mir leid, dass das nicht geholfen hat. Evt. liegt es auch daran, dass Webpack bzw. React mittlerweil beide in einer neuen Version vorliegen. Wenn du also momentan `npm install react webpack` ausführst, unterscheiden sich die Versionen von denen im Video. Das hat schon vorher mal zu Problemen geführt. Ich werde dazu demnächst eine Zwischenfolge aufnehmen, bei der ich entsprechend ein Update durchführe und die Unterschiede der Versionen erkläre. Bis dahin hast du Dir ja schon zu helfen gewusst, das freut mich. :) Viele Grüße, David
Vielen Dank für die tollen Videos. Bisher konnte ich soweit gut folgen, jedoch hänge ich bei einem Schritt. Ich habe die bundle.js Datei im dist-Ordner erstellt und im HTML eingebettet. Jedoch taucht im Browser der Fehler "Failed to load resource: the server responded with a status of 404 (Not Found)" auf. Vielleicht hatte ja jemand schon einen ähnlichen Fehler. edit: Zudem ist meine bundle.js GIGANTISCH lang. Deutlich mehr Inhalt als iM Video.
Hi Colin, ersmtal vielen Dank für dein Feedback und deine Frage. 404 heißt ja eben, dass der Webserver unter der URL nichts gefunden hat. Daher müsstest du da wohl mal sicher stellen, dass du in der index.html den korrekten Pfad zur bundle.js eingegeben hast. Beachte bitte auch, dass das Video fast 2 Jahre alt ist und es mittlerweile auch eine neuen Webpack Version gibt, bei der ggf. ein paar Sachen anders sind. Im Kommentar zu diesem Video von Legincy steht dazu auch was. Viele Grüße David
Ich habe auch den gleichen Fehler gehabt, als Lösung würde ich vorschlagen, den dist Ordner mit Public in der webpack.config zu tauschen . Es hat bei mir funktioniert.
Wenn ich die App.jsx etc. , dass jsx lösche. Bekomme ich diese Fehlermeldung: ERROR in ./src/index.jsx 1:0-28 Module not found: Error: Can't resolve './App' in 'C:\Dev\einführung-react\src' resolve './App' in 'C:\Dev\einführung-react\src' using description file: C:\Dev\einführung-react\package.json (relative path: ./src) Field 'browser' doesn't contain a valid alias configuration using description file: C:\Dev\einführung-react\package.json (relative path: ./src/App) no extension Field 'browser' doesn't contain a valid alias configuration C:\Dev\einführung-react\src\App doesn't exist .js Field 'browser' doesn't contain a valid alias configuration C:\Dev\einführung-react\src\App.js doesn't exist jsx Field 'browser' doesn't contain a valid alias configuration C:\Dev\einführung-react\src\Appjsx doesn't exist as directory C:\Dev\einführung-react\src\App doesn't exist Das Problem ist, dass wenn ich das jsx dahinter machen, funktioniert das ganze nicht wie im Video :(
Hi, hast du in der Webpack-config denn die `resolve` Property gesetzt? Also das hier: resolve: { extensions: [ '.js', '.jsx' ] }, Bitte beachte auch den Kommentar von Legincy, dass Webpack in der neueren Version mit 'npx webpack serve' gestartet werden muss. Viele Grüße David
Vielen Dank für dieses tolle Video. Ich hatte natürlich die üblichen Schwierigkeiten, ähnlich zu den in den übrigen Kommentaren. Und noch andere. Habe mich aber durchgebissen und mich der Webpack Doku bedient. Allein das war bereits eine Lernerfahrung wert. 🙂
[gr] Cool, das hört sich doch gut an - viel Erfolg weiterhin 😊
Klasse Videos. Sehr interessant und angenehm vorgetragen. Habe kurz überlegt, ob ich Webpack überspringe, hab es aber dann doch versucht. Dabei habe ich festgestellt das webpack-dev-server (zumindest Stand Januar 2021) so nicht mehr läuft. Falls es noch jemandem so geht: 'webpack-dev-server' mit 'webpack serve --mode=development' ersetzen. Der Befehl compiliert auch direkt vor dem Servieren.
[gr] Vielen Dank für Deinen Kommentar - und ja, das mit dem Server stimmt leider. Es ist super, dass Du die Lösung direkt gepostet hast, danke schön :-)
Error: Cannot find module 'webpack-cli/bin/config-yargs'
Für alle die auf diesen Fehler stoßen, das ist Problem welcher bereits bekannt ist und durch webpack-cli 4.0+ und webpack-dev-server 3.*+ auftreten kann.
Statt "npx webpack-dev-server" einfach "npx webpack serve" ausführen.
Tausend dank du hast mich gerade vorm aufgeben gerettet =)
Super Video 🙏 Danke euch dafür! Ist der Industrie-Standard für React-Components CSS zu verwenden oder SASS? Grund ist, dass die einzelnen CSS-Files (styles.css, headline.css, usw.) alle separat als Tag im Head aufgeführt werden. Best practise wäre doch hier die CSS-Files zu einem Main-CSS-File zu mergen, oder? Würde mich interessieren wie man SASS dazu in den Webpack Workflow einbaut.
LG
Hi Timo,
erstmal vielen Dank für dein Feedback. Freut mich, wenn dir die Videos gefallen!
Zu CSS bzw. SASS:
Erstmal vorab: Woher nimmst du die Annahme, dass die Dateien als -Tag auftauchen? Wenn du die Dateien so wie im Video in den einzelnen Komponenten importierst und dann über Webpack verarbeiten lässt, werden diese tatsächlich gar nicht als CSS Dateien geschrieben, sondern im JavaScript-Code verarbeitet. Bzw. die Styles werden dann quasi über JavaScript gesetzt. Es ist in dem Fall also gar nicht nötig, CSS Dateien einzubinden und auch nicht, diese wie du schreibst zu einer einzelnen zu minifizieren.
Aber du hast recht: Würden wir CSS nicht im JS Importieren sondern weiterhin als separatem, "globale" Dateien behandeln, dann würden wir sie per Webpack genau wie du schreibst bundlen (also zusammenfassen) und minifizieren. Da wir in React ja aber eben eher komponentenbasiert arbeiten und damit auch versuchen, die Komponenten in sich geschlossen zu halten, sehe zumindest ich die "globale" Variante immer seltener.
Bezgl. CSS vs. SASS:
Da würde ich behaupten, dass schon noch eher zu SASS gegriffen wird.
In die Webpack-pipeline lässt sich das vergleichsweise einfach mittels des "sass-loaders" (www.npmjs.com/package/sass-loader) einbinden.
Dazu musst du im wesentlichen nur:
1. Den Loader und SASS Installieren: "npm install sass-loader sass webpack --save-dev"
2. Die Webpack-Config in der "rule" für "css" um den Eintrag "sass-loader" erweitern, so dass das wie hier aussieht:
use: [
"style-loader",
"css-loader",
"sass-loader",
],
Danach kannst du über "import styles.scss" auch SASS-Dateien importieren.
ABER:
Im React-Kontext gibt es aber einen weiteren, großen Spieler: Styled Components (styled-components.com/).
Styled-Components führen im wesentlichen den Gedanken von JSX noch weiter: Statt HTML+JS in einer Datein zu verschmelzen, kommen nun auch noch die Styles hinzu, die sich dann ebenfalls mit JavaScript entsprechend dynamisieren lassen.
Ich werde in naher Zukunft auch noch eine Fogle zu Styled-Components in React aufnehmen - bis dahin kannst du du aber schonmal das kurze Intro von meinem Kollegen Golo Roden hier anschauen: ua-cam.com/video/WNpCI7xrp-c/v-deo.html
Ebenfalls kannst du dir auch gerne nochmal seinen Artikel zu modernem CSS durchlesen - der gibt auch nochmal einen sehr guten Überblick über die aktuellen Entwicklungen: www.heise.de/developer/artikel/CSS-mit-modernen-Werkzeugen-besser-strukturieren-4973944.html
Viele Grüße,
David
@@davelosert Hammer! Richtig guter Content und vielen, vielen Dank für die schnelle Rückmeldung!
Auf das mit den Style-Tags komme ich, weil ich euer repository 04-webpack aufgesetzt und dann im Browser-Dev-Tool den servered HTML-Code angeschaut habe. Dort sieht der so aus:
imgshare.io/image/bildschirmfoto-2021-01-03-um-114749.NFD9Ol
Vielen Dank nochmal! Freue mich auf euren weiteren Content!!
@@timokramer5604 Sehr gerne! Freut mich, wenn es hilft. :)
Ach und ja stimmt, wenn du den webpack-dev-server startest fügt er das CSS tatsächlich in den Head ein.
Im Produktiv-Modus ist das aber anders. Das kannst du selbst sehen, wenn du aus dem Repo einmal `npm run build` ausführst und dir dann im "/dist" Verzeichnis die "index.html" anschaust - da wird dann kein CSS mehr eingefügt, sondern es befindet sich eben in der "main.js". :)
Viel Spaß noch mit dem Kurs.
Viele Grüße,
David
@@davelosert Perfekt. Danke dir 🙏
In meinem Verzeichnis ist immer noch ne .babelrc und keine babel.config.json ... hab ich iwo vorher was übersehen? und bei 34:24 funktioniert das npm start bei mir nicht.. Hab es aber richtig im package.log eingetragen.
FEHLERMELDUNG:
> testapp-2@1.0.0 start /Users/xxx/Desktop/Kiste/ReaktJSTest1/testapp2
> webpack-dev-server internal/modules/cjs/loader.js:834
throw err;
^
Error: Cannot find module 'webpack-cli/bin/config-yargs'
...
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! testapp-2@1.0.0 start: `webpack-dev-server`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the testapp-2@1.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
...
@Josch Te: Danke für deine Fragen! :)
Zur babel.config.json: Du hast recht - das habe ich wohl ohne anzukündigen zwischendurch umgestellt. Beide Formate sind aber valide und im Inhalt identischt. Eine babel.config.json gilt normalerweise einfach im gesamten Projekt, eine .babelrc nur in allen Kindsordnern. Eine .babelrc kann also Hilfreich sein, um in einem Komplexen Projekt eine babel.config.json auf einer höheren Ebene zu überschreiben. Mehr dazu auch heir: babeljs.io/docs/en/config-files#configuration-file-types
Bezgl. deines Fehlers:
Hast du `webpack-cli` denn installiert? (also `npm install webpack-cli`)?
@@davelosert Hi habe den selben Fehler wie oben.
Habe auch den cli installiert auch verschiedene Versionen.
@@stefcoppenhiller5587 Ich habe das ganze gerade lokal nochmal nachgestellt und bin auf das gleiche Problem gestoßen.
Das Problem: Webpack ist inkl. CLI und Webpack-Dev-Server mittlerweile in einer neuen Version erschienen, die etwas anders funktioniert. Da ihr (wie ich es im Video ja auch zeige) diese Tools jeweils ohne Angabe einer Version installiert, schlägt das nun fehl.
Es gibt zwei Wege das zu lösen:
1. In Eurer `package.json` könnt ihr unter `scripts.start` den Befehl mit `webpack serve` ersetzen. Das ist der neue Weg, eine Dev-Umgebung hochzufahren.
2. Alternativ könnt Ihr die gesamte package.json an meine hier angleichen: github.com/thenativeweb/techlounge-react/blob/master/04-webpack/package.json
Danach noch `npm install` ausführen, dann werden die älteren Webpack Versionen installiert, die dann nach wie vor klappen sollte.
Lasst mich gerne Wissen, ob das geholfen hat.
@@davelosert Die Lösung mit dem Befehl "webpack serve" hab nach eigener Recherche in GitHub auch gefunden und angewendet.
Werde bei Zeit die 2. Alternative auch mal Testen.
Auch wenn ich eine Lösung schon selber Gefunden habe sage ich vielen dank für die Ausführliche Antwort. Selten das man solch gute Antworten bekommt.
@@stefcoppenhiller5587 Sehr gerne und vielen Dank für das Feedback!
Meine Hilfe hat in diesem Fall nur etwas gedauert - daher auch Danke für deine Geduld. Gut, dass du auch selbst eine Lösung gefunden hast, dann warst du ja dadurch nicht blockiert! :)
Webpack zu installieren war eine große Fehlentscheidung gewesen. Hinterher wurde gar kein React-Element mehr im Browser gezeigt. Und auch beim Zurückbauen und der Nutzung nur mit Babel war auch kein React mehr im Browser zu sehen. Ich glaube irgendwie das Webpack durch die Installation das normale Babel irgendwie blockiert oder deaktiviert hat. Ich habe aber keine Ahnung wie man das Problem lösen kann.
Sind denn die Styles, die ich auf diesen Weise für eine Komponente definiere auch nur isoliert für diese Komponente wirksam? Oder würde eine CSS-Klasse, die eine Farbe für das h1-Tag in Headline setzt, diese auch für ein h1-Tag in Paragraph und damit alle Komponenten setzen? Dabei ist mir schon klar, dass man für die Komponenten unterschiedlich benannte CSS-Klassen für beide Komponenten definieren und dann in den Komponente auf die h1-Tags anwenden könnte. Aber man kann CSS-Regeln ja aber auch direkt für HTML-Tags vergeben und da wäre es spannend zu wissen, ob sich diese Angaben gegeneinander isolieren lassen. Angular kann so etwas zum Beispiel out-of-the-box ;-).
Hi Roland,
auf die Art und Weise wie ich es hier im Video erkläre sind die Styles tatsächlich nicht voneinander isoliert. Das setzten eines "h1" würde also global auch für alle andern Komponetnen gelten.
Das liegt vor allem daran, dass die Anwendung der Styles hier ja an React vorbei geht und komplett von Webpack gemacht wird. Der Style- bzw. CSS-Loader macht sturr nichts anderes, als alle importierten Styles aufzusammeln und dann zur Laufzeit anzuwenden - im dev-modus noch über den Import der Stylesheets im Head des HTML Dokuments, im prod-Modus über JS. Und das ganze ohne Kontext, wo importiert oder worauf die Styles angewendet werden (wäre für die loader ja auch mehr oder weniger schwer herauszufinden). Wenn Du also rein bei diesem Setup bleibst, bräuchtest du noch eine Syntax im CSS (sowas wie BEM), um die Komponenten-Styles zu isolieren.
Anders als Angular ist React ja kein komplettes Framework und fokussiert sich mehr auf das reine Rendering von HTML. React setzt damit eher auf Plugins um zuätzlichen Funktionalitäten hinzuzufügen. Ein solches Plugin (und das wohl bekannteste) ist "styled-components" (styled-components.com/). Dazu habe ich hier im vorherigen Kommentar an Timo Krämer bereits einige Erklärungen + weiterführende Links geposted, die du dir ja anschauen kannst. :)
Viele Grüße,
David
Vielen Dank. Super eklärt und Daumen hoch.
Allerdings frage ich mich wie ich mal TypeScript Code debuggen soll wenn ich per WebPack eine React Anwendung deploye. Allein diese Formulierung macht mir Knoten in das Gehirn...... Ich frag mal chatGPT :-)
Es hat gesagt:
Um Ihren TypeScript Code in einer React-Anwendung zu debuggen, die mithilfe von Webpack deployed wird, können Sie ein Debugger-Tool wie z.B. React Developer Tools verwenden. Dieses Tool bietet Ihnen eine visuelle Oberfläche, über die Sie Ihren Code einfach durchsuchen und debuggen können. Sie können es als Browser-Erweiterung installieren und es dann in Ihrem Browser öffnen, während Sie Ihre React-Anwendung ausführen.
Alternativ können Sie auch ein integriertes Entwicklungsumgebung (IDE) wie z.B. Visual Studio Code verwenden, um Ihren Code zu debuggen. Viele IDEs bieten eine integrierte Debugging-Umgebung, die es Ihnen ermöglicht, Ihren Code Schritt für Schritt auszuführen und zu debuggen. Um diese Funktionen in Visual Studio Code zu nutzen, müssen Sie möglicherweise zunächst ein Debugger-Plugin installieren und ein Debugger-Konfigurationsfile für Ihre Anwendung erstellen.
Ein weiterer Tipp ist, dass Sie in Ihrem TypeScript Code console.log-Statements einfügen können, um die Werte von Variablen und anderen Ausdrücken zu überprüfen, während Ihre Anwendung läuft. Sie können die Konsole Ihres Browsers öffnen und diese Ausgaben anzeigen, um zu sehen, ob Ihr Code wie erwartet ausgeführt wird.
Insgesamt gibt es viele Möglichkeiten, um TypeScript Code in einer React-Anwendung zu debuggen, die mithilfe von Webpack deployed wird. Welche Methode für Sie am besten geeignet ist, hängt von Ihren persönlichen Vorlieben und der Art Ihres Projekts ab. Experimentieren Sie einfach ein wenig herum und finden Sie die Methode, die für Sie am besten funktioniert.
Und ihr habt sogar ein Video dafür 👍
Leider wird die bundle.js blockiert wegen eines falschen Types von html/text.
Nach dem "Installieren" der Datein von Github fragt er: "Would you like to install serve?" und wenn ich ja sage, dann kommen da auch eine ganze Reihe von Fehlermeldungen und der Server lässt sich nicht mehr starten und serve installiert sich auch nicht.
Nach endlosen Fehler auswürfen npm ERR!, webpack is not recognised und 'mode' Option Not set, konnte ich nach dem durchlesen der comments den die Fehler beheben, juhu!
Im webpack.config.js :
Direkt unter module.exports = {
mode : 'production',
......
}
setzen.
Sowie npm install webpack
+ Den Hinweisen von @Alexander Bergmann & @David Losert vielen Dank, in einem Jahr ändert sich so viel 😅
Hi Nepa,
erstmal sorry für die späte Antwort - der Kommentar ist uns irgendwie durchgerutscht.
Und ja haha, das ist leider so. Letztes Jahr kam Webpack 5 und das hat einiges kaputt gemacht (ein Upgrade zeige ich in Folge 16: ua-cam.com/video/6FBLMiyF0wU/v-deo.html).
Würde ich die Folgen nochmal aufnehmen, ich würde beim Install immer direkt die Version mit anhängen. Das ist definitiv ein Learning - und wer weiß, vlt. nehmen wir die Folge ja auch nochmal neu auf irgendwann.
Freut mich, dass du den Fehler auch selbst über die Kommentare lösen konntest.
Viele Grüße,
David
Guten Morgen und danke für den super Kurs!
Leider scheitere ich gerade ein wenig an Webpack. Aus irgendeinem Grund bekomme ich im Browser immer die Meldung "React is not defined" und die Components werden nicht geladen. Ich bin genau dem Kurs gefolgt. Webpack läuft fehlerlos durch und react wird währenddessen auch gefunden ('modules by path ./node_modules/react/ 6.48 KiB 2 modules'). Meine bundle.js scheint deutlich kürzer zu sein, als die im Video gezeigte. Hat da jemand eine Idee? Fehlt React in der bundle.js?
Hi Anton,
erstmal vielen Dank für das nette Feedback. Freut mich, wenn dir der Kurs gefällt! :)
Hast du denn am Kopf jeder Datei auch ein `import React from 'react'` eingefügt? Das erkläre ich ab ca. Minute 37:54.
Das Statement muss in jeder `jsx` Datei eingefügt werden, da es nach dem Kompilieren gebraucht und nun nicht mehr als globale Variable zur Verfügung steht.
Viele Grüße,
David
@@davelosert Danke David für den Versuch. Hab die Statesments überall eingefügt, wie im Video. Ich komme einfach nicht darauf, was der Fehler sein könnte. Aber ich nehme jetzt deine Sources von Github, damit funktioniert es.
@@drbierei Sehr gerne. Tut mir leid, dass das nicht geholfen hat.
Evt. liegt es auch daran, dass Webpack bzw. React mittlerweil beide in einer neuen Version vorliegen. Wenn du also momentan `npm install react webpack` ausführst, unterscheiden sich die Versionen von denen im Video. Das hat schon vorher mal zu Problemen geführt.
Ich werde dazu demnächst eine Zwischenfolge aufnehmen, bei der ich entsprechend ein Update durchführe und die Unterschiede der Versionen erkläre.
Bis dahin hast du Dir ja schon zu helfen gewusst, das freut mich. :)
Viele Grüße,
David
Vielen Dank für die tollen Videos. Bisher konnte ich soweit gut folgen, jedoch hänge ich bei einem Schritt. Ich habe die bundle.js Datei im dist-Ordner erstellt und im HTML eingebettet. Jedoch taucht im Browser der Fehler "Failed to load resource: the server responded with a status of 404 (Not Found)" auf.
Vielleicht hatte ja jemand schon einen ähnlichen Fehler.
edit: Zudem ist meine bundle.js GIGANTISCH lang. Deutlich mehr Inhalt als iM Video.
Hi Colin,
ersmtal vielen Dank für dein Feedback und deine Frage.
404 heißt ja eben, dass der Webserver unter der URL nichts gefunden hat. Daher müsstest du da wohl mal sicher stellen, dass du in der index.html den korrekten Pfad zur bundle.js eingegeben hast.
Beachte bitte auch, dass das Video fast 2 Jahre alt ist und es mittlerweile auch eine neuen Webpack Version gibt, bei der ggf. ein paar Sachen anders sind. Im Kommentar zu diesem Video von Legincy steht dazu auch was.
Viele Grüße
David
Ich habe auch den gleichen Fehler gehabt, als Lösung würde ich vorschlagen, den dist Ordner mit Public in der webpack.config zu tauschen . Es hat bei mir funktioniert.
Wenn ich die App.jsx etc. , dass jsx lösche. Bekomme ich diese Fehlermeldung:
ERROR in ./src/index.jsx 1:0-28
Module not found: Error: Can't resolve './App' in 'C:\Dev\einführung-react\src'
resolve './App' in 'C:\Dev\einführung-react\src'
using description file: C:\Dev\einführung-react\package.json (relative path: ./src)
Field 'browser' doesn't contain a valid alias configuration
using description file: C:\Dev\einführung-react\package.json (relative path: ./src/App)
no extension
Field 'browser' doesn't contain a valid alias configuration
C:\Dev\einführung-react\src\App doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
C:\Dev\einführung-react\src\App.js doesn't exist
jsx
Field 'browser' doesn't contain a valid alias configuration
C:\Dev\einführung-react\src\Appjsx doesn't exist
as directory
C:\Dev\einführung-react\src\App doesn't exist
Das Problem ist, dass wenn ich das jsx dahinter machen, funktioniert das ganze nicht wie im Video :(
Hi,
hast du in der Webpack-config denn die `resolve` Property gesetzt?
Also das hier:
resolve: {
extensions: [ '.js', '.jsx' ]
},
Bitte beachte auch den Kommentar von Legincy, dass Webpack in der neueren Version mit 'npx webpack serve' gestartet werden muss.
Viele Grüße
David