反应组件不在 laravel ui 反应项目中呈现

Question

i am new to laravel ui react and cant find solution to this problem

i just installed laravel 9 with laravel/ui react and tried to render react component inside app.blade.php like this

    <div id="example"></div>

example.jsx

import React from "react";
import ReactDOM from "react-dom";

function Example() {
    return (
        <div className="container">
            <div className="row justify-content-center">
                <div className="col-md-8">
                    <div className="card">
                        <div className="card-header">Example Component</div>

                        <div className="card-body">
                            I'm an example component!
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}

export default Example;

if (document.getElementById("example")) {
    ReactDOM.render(<Example />, document.getElementById("example"));
}

but the react component doesn't render

Answer 1

You are rendering the Example Component in the same File. You have to do it in the index.js

index.js

const example = ReactDOM.createRoot(document.getElementById("example"));

example.render(
  <React.StrictMode>
    <Example />
  </React.StrictMode>
);