I am building an SPA using React@18 that can be run from browser itself without needing Node / npm start stuff, just with HTML, CSS & JS.
So taking the example of below code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Simple React Component Demo</title>
<style type="text/css">
body {
padding: 20px;
}
</style>
</head>
<body>
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<div id="example"></div>
<script>
let MNMLogo = 'https://i.ibb.co/wgxsH5C/sample-logo-1.jpg';
// console.log('App.js is running!');
// var Template = React.createElement(
// "h1",
// {
// id: "someid"
// },
// "This is JSX from app"
// )
// // Identifying the element by id
// var AppRoot = document.getElementById('example')
// ReactDOM.render(Template, AppRoot)
class SimpleExample extends React.Component {
// React components are simple functions that take in props and state, and render HTML
render() {
return (
<div>{/* React components must have a wrapper node/element */}
<h1>A Simple React Component Example</h1>
<div className="form-group"> {/* class is reserved in JS, so className must be used */}
<img src={MNMLogo} /> { /* Notice no quotes ("") for the src expression */ }
</div>
<div className="form-group">
<label htmlFor="simpleInput">Simple Label</label> {/* for is reserved in JS, so htmlFor must be used */}
<input type="text" className="form-control" id="simpleInput" />
</div>
<div className="form-group">
<button type="button" className="btn btn-primary" disabled={true}>Submit</button> {/* Some form attributes use an expression to set true or false: they include disabled, required, checked and readOnly */}
</div>
<p className="help-block" dangerouslySetInnerHTML={{__html: 'I'm some <span class="text-danger">dangerous</span> helper text.'}} />{/* This inserts raw HTML and is also a self-closing tag */}
</div>
)
}
}
ReactDOM.render(<SimpleExample />, document.getElementById('example'));
</script>
</body>
</html>
When I uncomment the currently commented code and vice-versa with the other code, the code without React Class is working fine(one which says “This is JSX from app”), but the code with React Class throws the below error, though I am sure there’s no really syntax issues in it, cause I’ve taken that code from this CodePen:
Uncaught SyntaxError: expected expression, got '<'
on this line <div>{/* React components must have a wrapper node/element */}.
Why ?? I don’t understand it. Each and every function of React and React DOM can run fine from browser itself without the need to start it from NPM or Node.
So why is the React Class code throwing error with render() method even though the braces comment syntax {/**/} is perfectly fine ?
I am running it from http://localhost:.
The React Class with render() method code should run without any errors from browser as well.