React - scheitere beim Auslagern des Codes in index.js

_killy_

Commodore
Registriert
Juni 2009
Beiträge
5.041
Moin Zusammen,

als Training für die grauen Zellen hab ich mir mal React geschnappt und wollte da ein bissl was leichtgewichtiges Programmieren. (vorher ein paar Tuturials durchgehen, was so geht)

Leider scheitere ich schon beim Einstieg. Wenn ich mein Code komplett in der HTML File lasse, so bekomme ich mein Hello React, sobald ich aber auf die index.js verweise, bleibt meine Seite leer.

HTML:
<!DOCTYPE html>
<html>
<head>
    <title>
        React Test
    </title>
    <style>     
    </style>
</head>
<body>

    <div id="root"></div>

  
    <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js" crossorigin></script>
    <script scr="index.js"></script>
      
</body>
</html>

und inhalt der index.js - beide Dateien liegen noch in selben Verzeichnis ... damit wirklich gar nichts schiefgehen sollte

Javascript:
import React from 'react';
import ReactDOM from 'react-dom';

const myfirstelement = <h1>Hello React!</h1>


const rootElement = document.getElementById('root');
ReactDOM.render(myfirstelement, document.getElementById('root'));

Ich bin grad irgendwie zu Blond den Fehler zu finden.

Wer erster ist, bekommt ein Cookie ;)
 
HTML:
   <script scr="index.js"></script>

Da ist doch schon das Problem. scr statt src ;)
 
  • Gefällt mir
Reaktionen: _killy_ und Photon
@kachiri

Fehler gefunden. Jetzt spuckt auch die Konsole eine Fehlermeldung aus, womit ich mal arbeiten kann

"Cannot use import statement outside a module".

Klingt lösbar - ich meld mich dann hoffentlich demnächst mit der Lösung.
Ergänzung ()

Lösung für obigen Fehler:

Javascript:
<script type="module" src="index.js"></script>

Einfach den Type Module ergänzen ...
 
Zuletzt bearbeitet:
Für React würde ich, sobald es über die ersten Experimente hinausgeht ein Build System aufsetzen. Das geht recht einfach mit Create React App oder einer Reihe von anderen, ähnlichen Systemen. Das bringt einiges an Komplexität mit, weshalb der Anfang so wie du ihn gerade machst auch sehr gut ist.

Aber sobald es etwas komplizierter wird bietet CRA einiges was wirklich hilfreich ist. Gerade wenn du mit Hooks anfängst bringt es die Linter Regeln mit die dich darauf hinweisen wenn du sie falsch benutzt. Nachteil ist das es für Anfänger (und manchmal auch Profis) schwierig sein kann Probleme mit dem Buildsystem zu beheben, wenn sie auftreten.
 
Zurück
Oben