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"));
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