React w/ES6 vs. React w/out ES6

ES6, or ECMAScript 6, is an update to the Javascript language that plays a key role in how code is written when using Javascript’s React Library.

Before ES6, React did not have access to some some of the features available for use that developers consider normal practice when coding in React today: classes, arrow functions, and different ways of defining variables (var, let, const).

CLASS VS CREATE REACT MODULE:

The first new feature implemented in ES6 were classes, which allows for developers to define React components as Javascript class functions.

Class Component (Using ES6) Exp:

Before React had access to classes, to define a class one would have to use React’s createReactClass module.

Create React Class Exp:

As you can tell, this syntax is a lot harder-to read and is a lot more work to write than when written as with Class Component syntax made available by ES6.

Arrow Functions:

ES6 also allows for a shorter arrow function syntax to be used.

Regular Function Syntax:

Arrow Function (ES6) Syntax:

Arrow function syntax is great because you can either write the functions with implicit returns if it’s only a one-line expression, or explicit returns.

Arrow Function Syntax (With Implicit Returns):

Variables:

Before ES6, there was only one keyword for defining a variable (var), but ES6 introduced two more ways to define variables (let & const) to React.

This makes our variables more dynamic in what they can do because each type of variable has it’s own functionality.

Types:

• var (variables): can change, belongs to function or global scope (not block-scope alone)
• const (variables): will never change once defined, belongs to scope defined in, including block scope
• let (variables): can change, are limited to the scope in which they are defined, including block scope