Code breaks

[CeoFred]

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.

[CeoFred]

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

[eddyw]

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

[CeoFred]

How do i get started with parcel bundler?

[cnscorpions]

@CeoFred for webpack, @plugins/transform-react-jsx is a must. no idea about parcel :)

[harryheman]

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>

[MuLoo]

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