How to get react components in a separate static js file read by Django? What is the least to be installed to make it work?

What are the modifications needed to be done ? And/or what is the least needed to be installed for this to work?

First, in a static reactclasses.js file the file only contains this. (Is there anything else needed to be added?)

class Login extends React.Component {
    render() {
        return (
            <div id="login">
                <form action="/login" method="POST">
                    <input type="text" name="username" placeholder="Username" required/>
                    <input type="password" name="password" placeholder="Password" required/>
                    <input type="submit" value="Submit"/>
                </form>
            </div>
        );
    }
}

In an html file

<!--- in the head tag --->
<script src="https://unpkg.com/[email protected]/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
<script src="{% static 'reactclasses.js' %}" type="text/babel"></script>

<!--- in a script tag with type=text/babel in the body tag -->
ReactDOM.render(<login />, document.querySelector("thediv"));

the console errors image

Answer

Figured it out a while back..

Here is a detailed scheme for how to do it
https://dev.to/zachtylr21/how-to-serve-a-react-single-page-app-with-django-1a1l

And
React component in JS file — ReactDOM to be used in script in HTML file

Leave a Reply

Your email address will not be published. Required fields are marked *