ebody: React - Wie lade und binde ich eine App in eine bestehende Webseite ein?

Beitrag lesen

SELF-Forum

React - Wie lade und binde ich eine App in eine bestehende Webseite ein?

ebody
– Informationen zu den Bewertungsregeln

Hallo,

ich habe eine erste React App erstellt und u.a. dieses m.M.n. sehr empfehlenswerte Tutorial genutzt.

Jetzt möchte die App in eine bestehende Webseite (example.html) und in ein darin existierendes HTML Element mit der id="searchApp" einbinden und frage mich, ob ich es richtig verstanden habe, welche Wege es dafür gibt und was der beste Weg wäre.

Ich habe create-react-app verwendet, wodurch diese Ordnerstruktur generiert wird und einige Ordner und einige Dateien von mir ergänzt/gelöscht wurden.

my-app/
- node_modules/
- public/  
-- index.html
-- favicon.ico 
- src/
-- components/
-- App.css
-- App.js 
-- index.css 
-- index.js
- README.md
- package.json
- .gitignore

Ich würde jetzt nur den /src/ Ordner per FTP hochladen und in der index.js das Ziel Element von root in searchApp ändern:

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('searchApp')
);

In example.html würde ich diese Tags vor das </body> Tag einbauen:

<!-- React einbinden -->
<script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin></script>

<!-- Da ich JSX verwende -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

<!-- Meine App oder Komponente -->
<script src="src/index.js"></script>

</body>

Wäre das soweit ein (möglicher) und guter Weg? Oder wäre npm run build besser, gleich gut, schlechter? Wenn ja warum?

Gruß ebody

Beitrag melden
–
Informationen zu den Bewertungsregeln