ReactJS React Without JSX

Last modified on: September 7, 2025

<h1 data-start="403" data-end="430"><strong data-start="405" data-end="428">ReactJS Without JSX</strong></h1>
<p data-start="432" data-end="615">JSX is <strong data-start="439" data-end="458">syntactic sugar</strong> for <code data-start="463" data-end="486">React.createElement()</code>.<br data-start="487" data-end="490" />It makes code more readable, but it&rsquo;s not required.<br data-start="541" data-end="544" />React internally uses <code data-start="566" data-end="587">React.createElement</code> to build the virtual DOM.</p>
<hr data-start="617" data-end="620" />
<h2 data-start="622" data-end="655"><strong data-start="625" data-end="653">1. Rendering Without JSX</strong></h2>
<h3 data-start="657" data-end="673">✅ With JSX</h3>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">
<pre class="language-javascript"><code>const element = &lt;h1&gt;Hello, World!&lt;/h1&gt;;
ReactDOM.render(element, document.getElementById('root'));
</code></pre>
</div>
</div>
</div>
</div>
<h3 data-start="785" data-end="804">✅ Without JSX</h3>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">
<pre class="language-javascript"><code>const element = React.createElement("h1", null, "Hello, World!");
ReactDOM.render(element, document.getElementById('root'));
</code></pre>
</div>
</div>
</div>
</div>
<hr data-start="942" data-end="945" />
<h2 data-start="947" data-end="983"><strong data-start="950" data-end="981">2. Adding Props Without JSX</strong></h2>
<h3 data-start="985" data-end="1001">✅ With JSX</h3>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">
<pre class="language-javascript"><code>const element = (
  &lt;div&gt;
    &lt;h1&gt;Hello&lt;/h1&gt;
    &lt;p&gt;Welcome to React!&lt;/p&gt;
  &lt;/div&gt;
);
</code></pre>
</div>
</div>
</div>
</div>
<h3 data-start="1073" data-end="1092">✅ Without JSX</h3>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">
<pre class="language-javascript"><code>const element = React.createElement(
  "div",
  null,
  React.createElement("h1", null, "Hello"),
  React.createElement("p", null, "Welcome to React!")
);
</code></pre>
</div>
</div>
</div>
</div>
<hr data-start="1198" data-end="1201" />
<h2 data-start="1203" data-end="1242"><strong data-start="1206" data-end="1240">3. Nested Elements Without JSX</strong></h2>
<h3 data-start="1244" data-end="1260">✅ With JSX</h3>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">
<pre class="language-javascript"><code>const element = (
  &lt;div&gt;
    &lt;h1&gt;Hello&lt;/h1&gt;
    &lt;p&gt;Welcome to React!&lt;/p&gt;
  &lt;/div&gt;
);
</code></pre>
</div>
</div>
</div>
</div>
<h3 data-start="1359" data-end="1378">✅ Without JSX</h3>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">
<pre class="language-javascript"><code>const element = React.createElement(
  "div",
  null,
  React.createElement("h1", null, "Hello"),
  React.createElement("p", null, "Welcome to React!")
);
</code></pre>
</div>
</div>
</div>
</div>
<hr data-start="1546" data-end="1549" />
<h2 data-start="1551" data-end="1585"><strong data-start="1554" data-end="1583">4. Components Without JSX</strong></h2>
<h3 data-start="1587" data-end="1603">✅ With JSX</h3>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">
<pre class="language-javascript"><code>function Welcome(props) {
  return &lt;h1&gt;Hello, {props.name}&lt;/h1&gt;;
}
</code></pre>
</div>
</div>
</div>
</div>
<h3 data-start="1683" data-end="1702">✅ Without JSX</h3>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">
<pre class="language-javascript"><code>function Welcome(props) {
  return React.createElement("h1", null, "Hello, ", props.name);
}
</code></pre>
</div>
</div>
</div>
</div>
<hr data-start="1808" data-end="1811" />
<h2 data-start="1813" data-end="1858"><strong data-start="1816" data-end="1856">5. Rendering a Component Without JSX</strong></h2>
<h3 data-start="1860" data-end="1876">✅ With JSX</h3>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">
<pre class="language-javascript"><code>ReactDOM.render(&lt;Welcome name="John" /&gt;, document.getElementById("root"));
</code></pre>
</div>
</div>
</div>
</div>
<h3 data-start="1964" data-end="1983">✅ Without JSX</h3>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">
<pre class="language-javascript"><code>ReactDOM.render(
  React.createElement(Welcome, { name: "John" }),
  document.getElementById("root")
);
</code></pre>
</div>
</div>
</div>
</div>
<hr data-start="2100" data-end="2103" />
<h2 data-start="2105" data-end="2133">📊 <strong data-start="2111" data-end="2133">JSX vs Without JSX</strong></h2>
<div class="_tableContainer_1rjym_1">
<div class="_tableWrapper_1rjym_13 group flex w-fit flex-col-reverse" tabindex="-1">
<table class="w-fit min-w-(--thread-content-width)" data-start="2135" data-end="2489">
<thead data-start="2135" data-end="2178">
<tr data-start="2135" data-end="2178">
<th data-start="2135" data-end="2152" data-col-size="sm">Feature</th>
<th data-start="2152" data-end="2163" data-col-size="sm">With JSX</th>
<th data-start="2163" data-end="2178" data-col-size="sm">Without JSX</th>
</tr>
</thead>
<tbody data-start="2223" data-end="2489">
<tr data-start="2223" data-end="2303">
<td data-start="2223" data-end="2240" data-col-size="sm">Syntax</td>
<td data-start="2240" data-end="2264" data-col-size="sm">Easy, looks like HTML</td>
<td data-start="2264" data-end="2303" data-col-size="sm">Verbose, uses <code data-start="2280" data-end="2301">React.createElement</code></td>
</tr>
<tr data-start="2304" data-end="2360">
<td data-start="2304" data-end="2321" data-col-size="sm">Readability</td>
<td data-start="2321" data-end="2328" data-col-size="sm">High</td>
<td data-start="2328" data-end="2360" data-col-size="sm">Harder for nested structures</td>
</tr>
<tr data-start="2361" data-end="2422">
<td data-start="2361" data-end="2378" data-col-size="sm">Tooling</td>
<td data-start="2378" data-end="2392" data-col-size="sm">Needs Babel</td>
<td data-start="2392" data-end="2422" data-col-size="sm">Works directly in plain JS</td>
</tr>
<tr data-start="2423" data-end="2489">
<td data-start="2423" data-end="2440" data-col-size="sm">Flexibility</td>
<td data-start="2440" data-end="2457" data-col-size="sm">Cleaner syntax</td>
<td data-start="2457" data-end="2489" data-col-size="sm">More explicit and controlled</td>
</tr>
</tbody>
</table>
</div>
</div>
<hr data-start="2491" data-end="2494" />
<h2 data-start="2496" data-end="2514">✅ <strong data-start="2501" data-end="2512">Summary</strong></h2>
<ul data-start="2515" data-end="2752">
<li data-start="2515" data-end="2549">
<p data-start="2517" data-end="2549">JSX is not mandatory in React.</p>
</li>
<li data-start="2550" data-end="2597">
<p data-start="2552" data-end="2597">You can use <code data-start="2564" data-end="2585">React.createElement</code> directly.</p>
</li>
<li data-start="2598" data-end="2670">
<p data-start="2600" data-end="2670">Without JSX, code becomes verbose but avoids build tools like Babel.</p>
</li>
<li data-start="2671" data-end="2752">
<p data-start="2673" data-end="2752">Recommended for simple demos, debugging, or environments without transpilers.</p>
</li>
</ul>

Web Technology View More