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/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/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"));
