JSX is not required. Literally, all you need is to include script tags for `react.js` and `react-dom.js`, and then you write "raw" `React.createElement()` calls.
However, most people find that to be too repetitive. So, the "default" approach is to use JSX syntax, which converts `<MyComponent a={1} b="blah">Text</MyComponent>` into `React.createElement(MyComponent, {a : 1, b : "blah"}, "Text")`.
Yes, JSX requires a transformation/compiler step. As I said earlier, a typical "real" app needs build tools to bundle anyway, and you're probably targeting a variety of browsers but don't want to restrict yourself to the least common denominator subset of JS syntax, so you're probably already using a transpiler too.
But, if you truly don't want to use JSX for whatever reason, there's plenty of choices:
- Write raw `React.createElement()` calls by hand
- Alias `React.createElement()` as `h()` so it's shorter
- Use a functional VDOM wrapper generation library like `react-hyperscript-helpers` (https://github.com/Jador/react-hyperscript-helpers/).
- Use a runtime JS templating library like Dominic Gannaway's `t7` templates(https://github.com/trueadm/t7)
- Use an actual separate templating library, like `react-templates`(https://github.com/wix/react-templates) or `handlebars-react`(https://github.com/stevenvachon/handlebars-react)
Almost everyone chooses to use JSX. The docs use JSX. Tutorials across the internet use JSX. It's the accepted approach. But, it's not _required_. You do not _need_ it. There are other options. It's your choice.
[0] https://www.reddit.com/r/javascript/comments/81fkhi/this_may...
{isVisible && <div>Hello World</div>}
<div ng-if="isVisible">Hello World</div>
<div v-if="isVisible">Hello World</div>
{{#if isVisible}}
<div>Hello World</div>
{{/if}}
And you can also create stateless components without any logic, eg.:
const Header = () => <h1>Hello World</h1>