How can I add react components to normal HTML?-CodePudding

I'm trying to make a webpage and I want to condense some of the HTML and respective code into a react components, but I can't seem to do this without creating an entire react app, which is undesired for this project. I have followed the steps in the react documentation to add a JSX preprocessor and then render the react component into the page using script tag, but nothing shows up.

In the console in the page, it just says Uncaught ReferenceError: require is not defined. I tried using browserify to compile all of the react libraries to one file, but it said Error: Can't walk dependency graph: Cannot find module 'reactjs' from '/home/user/code/website/src/slideshow.js'. If I try and npm install reactjs it installs react, and neither give any definitions or descriptions for the react classes when editing the code.

I'm kind of lost, and completely willing to look like an idiot. My HTML and JS is below.

const { React, ReactDOM } = require('react');
const root = ReactDOM.createRoot(document.getElementById("slideshowContainer"));

class Slideshow extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            slide: 1,
        }
        this.slides = {
            1: {
                src: './assets/coding.jpeg',
                caption: "this is slide 1."
            },
            2: {
                src: './assets/coding2.jpeg',
                caption: "this is slide 2."
            },
            3: {
                src: './assets/templimg.jpg',
                caption: "this is slide 3."
            }
        }
    }

    slideTransitionPrev() {
        let ok = Object.keys(this.slides);

        if (this.state.slide === 1) {
            this.setState({ slide: ok });
        } else {
            this.setState({ slide: this.state.slide - 1 });
        }
    }

    slideTransitionNext() {
        let ok = Object.keys(this.slides);

        if (this.state.slide === ok) {
            this.setState({ slide: 1 });
        } else {
            this.setState({ slide: this.state.slide   1 });
        }
    }

    render() {
        return (
            <div >
                <span >{this.state.slide} / {Object.keys(this.slides)}</span>
                <img style="width: 100%" src={this.slides[this.state.slide].src} />

                <button  onClick={() => this.slideTransitionPrev()}>&#10094;</button>
                <button  onClick={() => this.slideTransitionNext()}>&#10095;</button>

                <span >{this.slides[this.state.slide].caption}</span>
            </div>
        )
    }
}

root.render(<Slideshow />);

(boring necessary html stuff)

<body>
    <div id="slideshowContainer"></div>

    <script src="./src/slideshow.js"></script>
</body>

CodePudding user response：

The client's browser must ultimately consume plain JavaScript. JSX is not plain JavaScript. You need to decide whether you want to compile the JSX into JavaScript on your end (as the developer) or the client's.

For anything remotely professional, you should do so on your end; doing so on the client puts a good amount of load onto the client's device which may not work well for some, like with lower-end phones. Processing the JSX into JS yourself also allows for many other nice enhancements. I think it's really worth it for anything outside of small toy snippets. An often-used tool for this is create-react-app.

If you really don't want to use that route, you can use Babel Standalone to turn JSX into JS on the client, like this:

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<div class='react'></div>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
const App = () => {
    return 'foo';
};

ReactDOM.createRoot(document.querySelector('.react')).render(<App />);
</script>

You'll need to include React, React DOM, Babel, and lastly your own script (in a <script type="text/babel"> tag).

CodePudding user response：

npm is used for node js. You can't import those libraries to a normal html/js file. On this page there are reference links to the javascript files you need: https://reactjs.org/docs/add-react-to-a-website.html