novelmetrix-php/resources/js/views/Bookslist.jsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import Sidebar from '../components/Sidebar';

const Bookslist = () => {
    return (
        <React.Fragment>
            <Sidebar/>

            <div className="container">
                <div className="row justify-content-center">
                    <div className="col-md-8">
                        <div className="card">
                            <div className="card-header">NovelMetrix</div>

                            <div className="card-body">Bookslist</div>
                        </div>
                    </div>
                </div>
            </div>
        </React.Fragment>
    );
}

export default Bookslist;

if (document.getElementById('books')) {
    const Index = ReactDOM.createRoot(document.getElementById("books"));

    Index.render(
        <React.StrictMode>
            <Bookslist/>
        </React.StrictMode>
    )
}