Code breaks
CeoFred opened this issue · comments
Copied the whole code for a test and seems to be broken at the point where we try to do the actual work.
return (
<h1 onClick={() => setState(c => c + 1)}>
Count: {state}
)
At this point my browser says Uncaught SyntaxError: Unexpected token '<'at the point we want to render the html as JSX.
For on i feel there should be more to be done before the code works, the browser does not understand Component tags so it keeps throwing errors, i tried solving the issue above by using string literals
function Counter() {
const [state, setState] = Didact.useState(1)
return <h1 onClick=${() => setState(c => c + 1)}> Count: ${state} </h1>
}
This guy was clearly working till we encountered something else
const element =
this guy above which clearly threw same syntax errors
No, the browser doesn't understand JSX, as explained in the blog posts, JSX needs to be transformed to function calls (React.createElement or Didact.createElement) by a transpiler (Babel or TS). If you want 0 setup, use parcel bundler to generate code and don't forgot to add:
/** @jsx Didact.createElement */
Before writing/adding JSX
How do i get started with parcel bundler?
@CeoFred for webpack, @plugins/transform-react-jsx is a must. no idea about parcel :)
The simplest way to transform JSX to JS using Babel is:
<div id="root"></div>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
// Didact code here
</script>
The simplest way to transform JSX to JS using Babel is:
<div id="root"></div> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> <script type="text/babel"> // Didact code here </script>
yes, this is the simplest way