
The only difference the JavaScript ES5 using the RequireJS module syntax versus the ES6 style imports can be seen here: Next, the first index.js to set up the root container component is almost identical. The only difference with the ES5 version on the left is that I manually included the webpacked bundle.js, whereas this was done for me from the create-react-app scripts: Here’s a rundown of the differences and similarities (I’m sure there are others, too, but these are the ones I’m familiar with).įirst up, the entry index.html for each app is mostly the same.

I like to build example apps to help me understand what’s going on with any new tech or framework, so I thought it would be useful to build the same app twice - once using React with ES5 and then rebuild it with React and ES6 as a comparison. Once you’ve got to the point of recognizing the differences, it becomes more obvious which is which and becomes easier to spot an older (and possibly out of date) article with a newer, up-to-date article. Even worse, you could easily spend some time reading an article before realizing that it was using ES5 or ES6 syntax and recognizing the differences (or not).Īs I was learning React, I’m sure I wasn’t the first to paste some ES5-style React syntax into an app using ES6 and get into a complete mess.

If you haven’t done any JavaScript for a while (or at all), it could be easy to get confused between the different styles. When I was learning React in 2016, it seemed like it was stuck halfway, transitioning from examples and tutorials using ES5 JavaScript to the similar but different ES6 JavaScript syntax.
