React Without JSX: Writing Pure React with React.createElement
Last updated 2 months, 2 weeks ago | 133 views 75 5
Introduction: Why Learn React Without JSX?
JSX is a fantastic syntactic sugar in React—but it’s not mandatory.
In fact, JSX is just a transformation of React.createElement() calls under the hood. While JSX makes code easier to read, it requires a build step (like Babel), which adds complexity to small projects or learning environments.
If you’re:
-
Working in a limited environment (e.g., CodePen, legacy project)
-
Building tools where JSX can’t be compiled
-
Or just want to understand how React works internally
...then knowing how to write React without JSX is a valuable skill.
Let’s explore how React works without JSX and how you can write clean, maintainable code using pure React.createElement() syntax.
What is JSX and Why Avoid It?
JSX is an XML-like syntax that makes React code declarative and readable. It looks like HTML but isn’t valid JavaScript.
const element = <h1>Hello, JSX</h1>;
The JSX above gets compiled to:
const element = React.createElement('h1', null, 'Hello, JSX');
Avoiding JSX means:
-
No need for Babel or a build step
-
More transparent understanding of how React builds its virtual DOM
Using React.createElement() Instead of JSX
The core method of writing React without JSX is React.createElement():
React.createElement(type, props, ...children)
Parameters:
-
type: A string for HTML elements (e.g.,'div','h1') or a React component -
props: An object for element attributes (e.g.,{ className: 'title' }) -
children: One or more children (strings, elements, or arrays)
Step-by-Step Without JSX
✅ 1. Simple Element
// <h1>Hello World</h1>
React.createElement('h1', null, 'Hello World');
✅ 2. Element with Props
// <h1 className="greeting">Hi</h1>
React.createElement('h1', { className: 'greeting' }, 'Hi');
✅ 3. Nested Elements
// <div><h1>Hello</h1><p>Welcome</p></div>
React.createElement(
'div',
null,
React.createElement('h1', null, 'Hello'),
React.createElement('p', null, 'Welcome')
);
Functional Components Without JSX
function Welcome(props) {
return React.createElement('h1', null, 'Hello, ' + props.name);
}
You can use this just like any other component:
ReactDOM.render(
React.createElement(Welcome, { name: 'React Dev' }),
document.getElementById('root')
);
Full Example: React Counter Without JSX
<!DOCTYPE html>
<html>
<head>
<title>React Without JSX</title>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
</head>
<body>
<div id="root"></div>
<script>
function Counter() {
const [count, setCount] = React.useState(0);
return React.createElement(
'div',
null,
React.createElement('h2', null, 'Count: ' + count),
React.createElement(
'button',
{ onClick: function () { setCount(count + 1); } },
'Increment'
)
);
}
ReactDOM.render(
React.createElement(Counter),
document.getElementById('root')
);
</script>
</body>
</html>
✅ No JSX. No Babel. Just plain old React and ES5/ES6 JavaScript.
Tips & Common Pitfalls
✅ Best Practices
-
Use helper functions to reduce repetition when building complex UIs
-
Wrap frequently used UI patterns into custom components
-
Use variables to store nested children before passing them
❌ Common Pitfalls
-
Writing deeply nested
React.createElement()calls can be hard to read -
No syntax highlighting or linting for
React.createElement()trees -
Harder to visualize your component structure at a glance
Comparison: JSX vs No JSX
| Feature | JSX | No JSX (React.createElement) |
|---|---|---|
| Readability | ✅ Clean and declarative | ❌ Verbose for complex structures |
| Build Tool Required | ✅ Yes (e.g., Babel) | ❌ No |
| Great for Prototyping | ❌ Needs build | ✅ Works with CDN-only setup |
| Control & Transparency | ❌ Abstracted away | ✅ Full control of element creation |
| Suitable for Beginners | ✅ Easier syntax | ❌ Can be harder to learn initially |
Conclusion: Writing React Without JSX is Simpler Than You Think
While JSX is the standard way to write React, it’s not the only way. Learning how to use React.createElement():
-
Improves your understanding of how React builds elements
-
Helps you debug JSX transformations
-
Allows development in simpler environments without build tools
Use this knowledge to prototype faster, maintain legacy codebases, or build React apps in constrained environments.
Key Takeaways
-
JSX compiles to
React.createElement(), which you can use directly -
Writing React without JSX removes the need for build tools
-
It’s great for small apps, teaching, or internal tools
-
Use nesting carefully to avoid unreadable code
