ReactJS React Without ES6 ECMAScript

Last modified on: September 7, 2025

<h1 data-start="408" data-end="448"><strong data-start="410" data-end="446">ReactJS Without ES6 (ECMAScript)</strong></h1>
<p data-start="450" data-end="671">React is often used with <strong data-start="475" data-end="497">modern ES6+ syntax</strong> (classes, arrow functions, import/export).<br data-start="540" data-end="543" />But React also works with <strong data-start="569" data-end="602">ES5 (older JavaScript syntax)</strong>, which is useful if your environment doesn&rsquo;t support ES6 or Babel.</p>
<hr data-start="673" data-end="676" />
<h2 data-start="678" data-end="720"><strong data-start="681" data-end="718">1. Component Creation Without ES6</strong></h2>
<h3 data-start="722" data-end="744">✅ With ES6 Class</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>class Hello extends React.Component {
  render() {
    return &lt;h1&gt;Hello, {this.props.name}&lt;/h1&gt;;
  }
}
</code></pre>
</div>
</div>
</div>
</div>
<h3 data-start="860" data-end="899">✅ Without ES6 (ES5 <code data-start="883" data-end="896">createClass</code>)</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>var Hello = React.createClass({
  render: function () {
    return &lt;h1&gt;Hello, {this.props.name}&lt;/h1&gt;;
  }
});
</code></pre>
</div>
</div>
</div>
</div>
<hr data-start="1022" data-end="1025" />
<h2 data-start="1027" data-end="1064"><strong data-start="1030" data-end="1062">2. Default Props Without ES6</strong></h2>
<h3 data-start="1066" data-end="1082">✅ With ES6</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>class Hello extends React.Component {
  static defaultProps = {
    name: "Guest"
  };
  render() {
    return &lt;h1&gt;Hello, {this.props.name}&lt;/h1&gt;;
  }
}
</code></pre>
</div>
</div>
</div>
</div>
<h3 data-start="1247" data-end="1266">✅ Without ES6</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>var Hello = React.createClass({
  getDefaultProps: function () {
    return { name: "Guest" };
  },
  render: function () {
    return &lt;h1&gt;Hello, {this.props.name}&lt;/h1&gt;;
  }
});
</code></pre>
</div>
</div>
</div>
</div>
<hr data-start="1457" data-end="1460" />
<h2 data-start="1462" data-end="1506"><strong data-start="1465" data-end="1504">3. State Initialization Without ES6</strong></h2>
<h3 data-start="1508" data-end="1524">✅ With ES6</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>class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }
}
</code></pre>
</div>
</div>
</div>
</div>
<h3 data-start="1655" data-end="1674">✅ Without ES6</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>var Counter = React.createClass({
  getInitialState: function () {
    return { count: 0 };
  },
  render: function () {
    return &lt;p&gt;Count: {this.state.count}&lt;/p&gt;;
  }
});
</code></pre>
</div>
</div>
</div>
</div>
<hr data-start="1861" data-end="1864" />
<h2 data-start="1866" data-end="1904"><strong data-start="1869" data-end="1902">4. Event Handling Without ES6</strong></h2>
<h3 data-start="1906" data-end="1940">✅ With ES6 (Arrow Functions)</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>class ButtonClick extends React.Component {
  handleClick = () =&gt; {
    alert("Button clicked!");
  };
  render() {
    return &lt;button onClick={this.handleClick}&gt;Click Me&lt;/button&gt;;
  }
}
</code></pre>
</div>
</div>
</div>
</div>
<h3 data-start="2140" data-end="2180">✅ Without ES6 (Binding Not Needed)</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>var ButtonClick = React.createClass({
  handleClick: function () {
    alert("Button clicked!");
  },
  render: function () {
    return &lt;button onClick={this.handleClick}&gt;Click Me&lt;/button&gt;;
  }
});
</code></pre>
</div>
</div>
</div>
</div>
<hr data-start="2392" data-end="2395" />
<h2 data-start="2397" data-end="2439">📊 <strong data-start="2403" data-end="2437">ES6 vs ES5 (React Without ES6)</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="2441" data-end="2975">
<thead data-start="2441" data-end="2497">
<tr data-start="2441" data-end="2497">
<th data-start="2441" data-end="2461" data-col-size="sm">Feature</th>
<th data-start="2461" data-end="2474" data-col-size="md">ES6 Syntax</th>
<th data-start="2474" data-end="2497" data-col-size="sm">ES5 Syntax (No ES6)</th>
</tr>
</thead>
<tbody data-start="2556" data-end="2975">
<tr data-start="2556" data-end="2647">
<td data-start="2556" data-end="2576" data-col-size="sm">Components</td>
<td data-start="2576" data-end="2617" data-col-size="md"><code data-start="2578" data-end="2616">class MyComp extends React.Component</code></td>
<td data-start="2617" data-end="2647" data-col-size="sm"><code data-start="2619" data-end="2645">React.createClass({...})</code></td>
</tr>
<tr data-start="2648" data-end="2720">
<td data-start="2648" data-end="2668" data-col-size="sm">Default Props</td>
<td data-start="2668" data-end="2697" data-col-size="md"><code data-start="2670" data-end="2696">static defaultProps = {}</code></td>
<td data-start="2697" data-end="2720" data-col-size="sm"><code data-start="2699" data-end="2718">getDefaultProps()</code></td>
</tr>
<tr data-start="2721" data-end="2799">
<td data-start="2721" data-end="2741" data-col-size="sm">State</td>
<td data-start="2741" data-end="2776" data-col-size="md"><code data-start="2743" data-end="2760">this.state = {}</code> in constructor</td>
<td data-start="2776" data-end="2799" data-col-size="sm"><code data-start="2778" data-end="2797">getInitialState()</code></td>
</tr>
<tr data-start="2800" data-end="2880">
<td data-start="2800" data-end="2820" data-col-size="sm">Methods</td>
<td data-start="2820" data-end="2854" data-col-size="md">Arrow functions / class methods</td>
<td data-start="2854" data-end="2880" data-col-size="sm">Function inside object</td>
</tr>
<tr data-start="2881" data-end="2975">
<td data-start="2881" data-end="2901" data-col-size="sm">Event Binding</td>
<td data-start="2901" data-end="2961" data-col-size="md">Needed (<code data-start="2911" data-end="2959">this.handleClick = this.handleClick.bind(this)</code>)</td>
<td data-start="2961" data-end="2975" data-col-size="sm">Not needed</td>
</tr>
</tbody>
</table>
</div>
</div>
<hr data-start="2977" data-end="2980" />
<h2 data-start="2982" data-end="3000">✅ <strong data-start="2987" data-end="2998">Summary</strong></h2>
<ul data-start="3001" data-end="3250">
<li data-start="3001" data-end="3064">
<p data-start="3003" data-end="3064">React can work <strong data-start="3018" data-end="3033">without ES6</strong> using <code data-start="3040" data-end="3061">React.createClass()</code>.</p>
</li>
<li data-start="3065" data-end="3140">
<p data-start="3067" data-end="3140">State is initialized with <code data-start="3093" data-end="3112">getInitialState()</code> instead of <code data-start="3124" data-end="3137">constructor</code>.</p>
</li>
<li data-start="3141" data-end="3197">
<p data-start="3143" data-end="3197">Default props are defined using <code data-start="3175" data-end="3194">getDefaultProps()</code>.</p>
</li>
<li data-start="3198" data-end="3250">
<p data-start="3200" data-end="3250">Event binding is automatic (unlike ES6 classes).</p>
</li>
</ul>
<p data-start="3252" data-end="3410">⚠️ Note: <code data-start="3261" data-end="3280">React.createClass</code> is <strong data-start="3284" data-end="3298">deprecated</strong> in newer React versions. For modern apps, it&rsquo;s better to use ES6 classes or functional components with Hooks.</p>

Web Technology View More