Kev's Development Toolbox

January 10, 2017

Comparing React with ES5 versus React with ES6

Learning React in 2016 seemed like it was stuck halfway transitioning from examples and tutorials using ES5 JavaScript, to the similar but different ES6 JavaScript syntax. If you haven’t done any JavaScript for a while (or at all), it was easy to get confused between the different styles. 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). As I was learning React, I’m sure I wasn’t the first to paste some ES5 style React syntax into a app using ES6 and get into a complete mess. Once you’ve got to the point of recognizing the differences then 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.

I like to build example apps to help me understand what’s going on with any new tech or framework, so 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.

Here’s a rundown of the differences and similarities (I’m sure there’s others too, but these are the ones I’m familiar with).

First up, the entry index.html for each app is mostly the same. 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:

Next up, the first index.js to set up the root container component is almost identical. The only difference the JavaScript ES5 using the RequireJS module syntax, versus the ES6 style imports:

Now looking at the AppContainer component. React with ES5 on the left, and ES6 on the right:

Using React with ES5:

uses the React.createClass() api
defines component state using getInitialState()
exports the component as a module using ‘module.exports’

React with ES6:

uses the ES6 class
defines component state using this.state in the constructor()
exports the component as a module using ‘export default’

The render() function is similar in both.

CalculatorComponent – here you’ll notice some more significant differences:

React with ES5:

props are implicit
implicit binding of ‘this’ to functions

React with ES6:

props are passed into the component via the constructor()
explicit binding of ‘this’ to functions in the constructor, using this.functionname.bind(this)

And that’s it! Hope this is a useful reference if you’re looking for a side by side comparison. You can clone my example apps from github here: https://github.com/kevinhooke/ReactJavaScriptComparisons

As I’m still learning as I go, if I’ve misunderstood anything or got anything wrong, please leave a comment and let me know!

January 8, 2017

React: _registerComponent(…): Target container is not a DOM element

Using Webpack with React, it’s critical you import your bundle.js after any DOM elements in your page that you intend to reference. See this issue discussed in this SO question here.

For example:

<body>
<h2>React with ES5</h2>
 <script src="dist/bundle.js"></script>
 <div id="app"></div>
</body>

Importing bundle.js before a DIV element that you reference in your app will result in this error:

Uncaught Error: _registerComponent(...): Target container is not a DOM element.
    at invariant (bundle.js:839)
    at Object._renderNewRootComponent (bundle.js:20668)
    at Object._renderSubtreeIntoContainer (bundle.js:20758)
    at Object.render (bundle.js:20779)

Instead, you need to ensure bundle.js is loaded after the elements you need to reference:

<body>
<h2>React with ES5</h2>
 <div id="app"></div>
 <script src="dist/bundle.js"></script>
</body>

January 7, 2017

New WoSign/StartCom certificates issued after Jan 1st 2017 blocked on Apple products

My first 1 year free SSL certificate with StartSSL is about to expire this month, so time to renew for another year. At this point last year I wasn’t sure what would happen at this point 1 year later, but appears you just apply for another new certificate, and then replace it on the servers where you are using it.

However, once I had requested my new certificate and uploaded it to my OpenShift account, Chrome blocked access to my site with a ‘certificate revoked’ error. I bit of digging turned up this article. Due to a number of security related issues with the Certificate Authority WoSign and later their undisclosed purchase of StartCom/StartSSL, it appears use of certificates from either of these companies are now blocked on all Apple products if issued after Jan 1st 2017, and also on Firefox and Chrome too. More info on Wikipedia here, and Mozilla here and here.

January 2, 2017

Cookie blocking and using third party logons (like OpenID)

It’s one thing to block cookies because you don’t want to be tracked, but in most cases cookies provide essential functionality for some sites, like sites using a logon via another third party site, like OpenID.

Trying to logon with your Google account to the Kinja network of sites for example doesn’t work if you’re blocking third party cookies in Chrome. The logon fails silently. To work around this (and presumably for other similar sites too), just add a ‘Cookie and site data exception’ in your Chrome settings, in this case for [*.]kinja.com