Using React Without ES6: A Beginner-Friendly Guide to React with ES5 Syntax
Last updated 2 months, 2 weeks ago | 110 views 75 5
Introduction: Why Learn React Without ES6?
Most modern React tutorials rely heavily on ES6+ syntax—arrow functions, classes, let, const, destructuring, and more. But what if you're:
-
Supporting legacy browsers?
-
Working in an old codebase?
-
Learning React with basic JavaScript knowledge?
You don’t need ES6 to write React. React works just fine with ES5 (ECMAScript 5) syntax. This approach can simplify your learning curve or help when you're working in restricted environments (e.g., no Babel/Webpack).
This guide walks you through building React components without ES6, showing how to write and understand React using only plain JavaScript.
React Without ES6: Key Differences
| Concept | ES6 Syntax | ES5 (No ES6) Equivalent |
|---|---|---|
| Class Component | class extends React.Component |
React.createClass() |
| Functional Component | const MyComp = () => {} |
function MyComp() {} |
| Export/Import Modules | export default / import |
<script> tags or require() |
| Arrow Functions | () => {} |
function() {} |
| Destructuring Props | const { name } = props |
var name = props.name; |
| JSX Transpiling | Requires Babel | Optional, can use React.createElement |
Setting Up React Without ES6 or Babel
You can build a React app using just CDN links and write everything in ES5 syntax using React.createElement() or JSX (if Babel is added in the browser).
Step 1: HTML Setup with CDN
<!DOCTYPE html>
<html>
<head>
<title>React Without ES6</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>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="app"></div>
<!-- React Code (written with type text/babel for JSX support) -->
<script type="text/babel">
// Your React code here
</script>
</body>
</html>
⚠️ Note: Babel in the browser is fine for learning, but not for production.
Creating Components Without ES6
✅ 1. Functional Component (ES5)
function Welcome(props) {
return React.createElement('h1', null, 'Hello, ' + props.name);
}
✅ 2. Class Component (ES5 - React.createClass)
React.createClassis deprecated in modern React but usable with legacy code or polyfills.
var HelloMessage = React.createClass({
render: function () {
return React.createElement('div', null, 'Hello ', this.props.name);
}
});
Using JSX Without ES6 Features
JSX is just syntax sugar for React.createElement. You can use JSX with browser Babel or avoid JSX completely.
// JSX
var element = <h1>Hello World</h1>;
// Without JSX
var element = React.createElement('h1', null, 'Hello World');
Complete Example: Counter App Without ES6
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React Without ES6 Example</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>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
var Counter = React.createClass({
getInitialState: function () {
return { count: 0 };
},
increment: function () {
this.setState({ count: this.state.count + 1 });
},
render: function () {
return (
<div>
<h2>Counter: {this.state.count}</h2>
<button onClick={this.increment}>Increment</button>
</div>
);
}
});
ReactDOM.render(<Counter />, document.getElementById('root'));
</script>
</body>
</html>
✅ This entire app is written in ES5 with JSX, and runs in the browser—no build tools required!
Tips & Common Pitfalls
✅ Tips
-
Stick to function declarations and
React.createClass()if avoiding ES6 -
Use CDN links for quick prototyping
-
Use JSX with Babel in the browser for better readability
-
Great for learning React fundamentals without extra tooling
❌ Pitfalls
-
React.createClassis deprecated and not supported in React 17+ unless polyfilled -
Missing ES6 features may make your code more verbose
-
Not suitable for large-scale apps or production-ready code
-
Cannot use Hooks—only available in function components with ES6+
Comparison Table: ES6 vs ES5 React Syntax
| Feature | ES6 Syntax Example | ES5 Equivalent |
|---|---|---|
| Functional Component | const Hello = ({name}) => <div>{name}</div> |
function Hello(props) { return <div>{props.name}</div>; } |
| Class Component | class App extends React.Component |
React.createClass({...}) |
| Arrow Function | () => {} |
function() {} |
| Props Destructuring | const { name } = props |
var name = props.name |
| State Hooks | useState(0) |
❌ Not available in ES5 |
Conclusion: Learn and Use React Without ES6
React doesn't require ES6 to be powerful. Whether you're working in a legacy environment, learning React fundamentals, or prototyping without a build step—React with ES5 still works!
You won’t have access to modern features like Hooks, but it’s a great way to understand how React works under the hood.
Key Takeaways
-
You can write React components using plain ES5 JavaScript
-
Use
React.createClassorfunction()for components -
Prefer JSX with in-browser Babel for clarity
-
This approach is great for legacy support or learning purposes
