[ReactJS] Rendern

Fastel · 31. März 2023

Hi, also ich bin React-Anfänger (mit HTML und JS Grundwissen) und folge dem w3schools Tutorial. Genau gesagt hänge ich hier:
https://www.w3schools.com/REACT/react_render.asp
Das Problem ist allerdings sehr grundlgend: Wenn ich das erste Beispiel aus dem Link copy-paste zeigt der Browser nichts mehr an und die Konsole des Dev-Tools meckert.

1 Ich habe eine ReactApp erstellt - anscheinend erfolgreich.
2 Ich starte über die Powershell npm start - eine Seite mit der LocalHost:3000 Adresse öffnet sich (drehendes Logo)
3 Ich konnte inhalte ändern (allerdings in der App.js)
=> soweit so gut
Im Rahmen des w3Schools Tutorial gab es die Anweisung aus dem scr alle Dateien zu entfernen, bis auf die Index.js - um eine bessere übersicht zu behalten (gemacht).
Ab dann werden deren Beispiele doch in der index.js ausgeführt(???).

Auch wenn ich das oben verlinkte, sehr übersichtliche Beispiel einfüge, passiert nicht wirklich das was ich erwarte. Ich habe einen Screenshot angehängt.

GoogleChrome (localhost:3000 mit offener Konsole), VSCode mit der index.js und index.html / PowerShell Ergebnis des npm start.

Irgendwas ganz Grundlegendes mach ich doch falsch oder habe ich missverstanden?

Danke für Eure unterstützung

krsp13 · 31. März 2023

vorab, ich habe absolut null plan worum es geht,
aber in letzter zeit wahnsinnige freude darin gefunden genau solche fragen chatgpt zu stellen.
daher alles ohne gewähr, aber vielleicht ein denkansatz, der dir weiterhilft?

lg

Code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>React Example</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
    <script src="index.js"></script>
  </body>
</html>

cx01 · 31. März 2023

Entferne mal das "/client" am Ende von dem ReactDOM-Import.

Generell ist w3schools nicht für gute Tutorials bekannt. Und "create-react-app" würde ich auch nicht benutzen.

Meine Empfehlung wäre: https://vitejs.dev

Fastel · 2. April 2023

Sorry für die späte Rückmeldung. Das mit dem Client hat etwas gebracht.
Das mit w3schools werd ich mir merken (aber ich mag die "Schritt für Schritt"-Mentalität gerne

)
Was meinst du mit

cx01 schrieb:
... "create-react-app" würde ich auch nicht benutzen.

Also... gar kein React? Das Probelm ist, dass ich eine React-App pflegen will / muss (Hobby), ich denke ich komm nicht darum herum.

cx01 · 2. April 2023

"create-react-app" ist eine Art Starter-Template für eine React-Anwendung. Problematisch an create-react-app ist unter anderem, dass es auf Webpack basiert, einem Bundler, der technisch veraltet und langsam ist.

Es gibt aber noch andere Wege, ein React-Projekt aufzusetzen. Zum Beispiel Vite, welches auf moderner Technik basiert. Du musst einfach nur in der Konsole "npm create vite@latest" eingeben und dann als Framework "React" wählen und hast ein fertiges React-Projekt.

Als Tutorial ist die offizelle React-Dokumentation mittlerweile auch ganz gut: https://react.dev/learn

Ich verstehe bei dem w3schools-Tutorial zum Beispiel nicht, warum sie überhaupt auf die "render()"-Methode eingehen, da der moderne Weg "createRoot()" ist, welches ja auch in einem vorigen Kapitel erwähnt wird.

Suche

[ReactJS] Rendern

Fastel

Cadet 4th Year

Anhänge

krsp13

Lieutenant

cx01

Lt. Junior Grade

Fastel

Cadet 4th Year

cx01

Lt. Junior Grade

Ähnliche Themen