Die React -Komponente kann erfolgreich erfolgreich in DOM ausgegeben werden ⇐ JavaScript

[Anonymous]

Ich habe versucht, Reaktionen in ein vorhandenes Projekt zu integrieren. Ich beginne mit der Einrichtung einer einfachen Tastenkomponente, um loszulegen. Das Projekt ist eine Express -App, die im Handel mit den Ansichten umgehen kann. Ich importiere dann diese Ausgabedatei in mein main.js -Skript, das von der Hauptlayoutansicht angefordert wird. Ich habe keine Fehler in der Browserkonsole. Aus irgendeinem Grund wird die Komponente jedoch nicht auf der Seite gerendert. < /p>
Was könnte ich übersehen?

Code: Select all

< /code>
Main.js
import submitHandler from './form.js';
import button from './components/button.js';
import lottieInit from './animations/lottie-handler.js';
import ReactButton from '../../dist/bca-react-component-library/button.js';
import { createRoot } from 'react-dom/client';

function loadButton() {
const root = createRoot(document.getElementById('react-app'));
root.render(

);
console.log('rendered ReactButton');
}

window.addEventListener("load", runAllFunctions);

function runAllFunctions() {
submitHandler();
lottieInit();
button();
loadButton();
}
< /code>
Button.js (kompiliert) < /p>
export default function ReactButton() {
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", null, "click here"));
}
< /code>
 Button.js (vor-kompile) < /p>
export default function ReactButton() {
return (

click here

);
}
< /code>
 Babel.config.json
// .babelrc or babel.config.json
{
"presets": ["@babel/preset-react"]
}