Two Distinct ways of Initializing React Class: The web is still somewhat transitioning from EcmaScript5 to EcmaScript6. When EcmaScript 2015 (ES6) came out about a few years ago, it caused a lot of turbulence in the JavaScript world. And divided programmers into “the old way” and “the new way” categories. And some prefer to use one style over the other based on the circumstance without any problem. Neither one is either better or worse.
However, in the end, both ES5 and ES6 are executing exactly the same code. Most of the difference is syntactic. Surely working in two different languages at the same time might create unnecessary headaches, especially where learning React for the first time. There simply isn’t “one standard way” of doing anything in a loosely typed language such as JavaScript. This has always been the case. It is extremely important to make this distinction when it comes to creating React components. There isn’t one way of doing it.
Two Distinct ways of Initializing React Class Example
Let’s see the creation of two exactly the same React components in two different ways. The difference here is the difference between ECMAScript 5 and ECMAScript 6 itself. For the most part, one significant difference is in the usage of the constructor (ES6) and a specialized init state function method (ES5). Let’s take a look.
ECMAScript 5 Example
var New Component = React.createClass({
getInitialState() {
return {/* initial state */ };
}
});
Notice that in EcmaScript 5 the constructor keyword does not exist. And this is why in this case React provides getInitialState function. If you are writing your app in ES5, you should use this method to initialize the default state of your component. We’ll get to states in just a moment. Because it’s such an important subject. States are tied to react components.
You should draw a mental association between the component and its state while planning your application. Each component is responsible for having a state. Above we demonstrated ES5 syntax. I won’t tell you which one of the two you should use.
ECMAScript 6
Eventually, ES6 is going to become the newly adopted standard within a few years, but many programmers still prefer ES5 formatting. Both still work as JavaScript supports ES5 as a subset of ES6 for compatibility with future applications. If this works for you, use ECMAScript 6 as demonstrated below, now using the new keywords not available in ES5: class, extends, super and constructor.
ECMAScript 6 Example
class New Component extends React
component( {
constructor(props) {
super(props);
this.state = {/* initial state */ };
}
});
It’s the same thing, except using ES6 syntax. If you’re coming from Java, C# or C++ languages, you might be more familiar with this class creation syntax and might prefer it over the outdated ES5 format.
Note another difference here is that we’re using. Component method to create our component, instead of createClass method. But essentially, the same exact thing takes place in the same place. I know that having two different ways of doing the same thing can sound complex. But here you have a choice of using ES5 and have your code execute in all browsers out of the box, or use ES6 syntax, and transpile it back to ES5.
However, the advantage of learning the relatively new ES6 syntax is that your application will look cleaner and more intuitive. It’s just the period of time we’re faced with right now, as JavaScript specification matures. Until browsers fully adopt ECMAScript6, studying this syntax format gives you an advantage of learning something that isn’t yet in wide use, but that will definitely become the next standard over the next few years.