2.3 ES6 Syntax

Welcome back. For the React Deep Dive project, we'll be writing most of our application code in the ES2015 syntax. In this lesson, we'll take a quick walkthrough of the syntax, just essentials we will need for the project. So rather than showing you a bunch of slides, let's jump right into the code. Let's start by looking at Importing Modules. Import is a new keyword introduced introduced in 2015, that is kind of like your JavaScript sugar for the required statement. So here, I'm importing the rule of React framework into the React variable within the file. But just like importing from a MP module, you can also import from a local file. So here, you can see that I'm importing the HelloComponent from the relative file toward our JS located in the same folder. Note that you can also import multiple items from a file with a comma-separated list inside the braces. Next, let's look at destructuring, which I think will be the most used feature from ES2015. Destructuring provides a convenient way of extracting values from objects and arrays. On line 22, you can see that I've created a object light structure on the left-hand side with the start and end variables. Now on the right-hand side, we have an object with exactly those properties. And by having the properties match the variables names, we're able to extract the values of all of them. You can easily see the convenience offered by the syntax. On line 23, you can see an analog structure on the left-hand side with an actual array on the right. Here, first and second are variables pointing at the first and second positions of the items in the array. The dot, dot, dot rest will take in the rest of the values from the array. You can probably guess what the values of first, second and rest would be. On line 24, we can actually see the power of destructuring, which can even go deep into a nested structure and extract values from it. Here inner is a variable pointing at the first element in the array, which happens to be the value of the list property. Take a moment to guess what that value would be. You can check your values with a console.log statement, which I'm printing out over here. Make sure you've got the right values. Next is template strings. If you find it tedious to construct a JavaScript string out of all the variables in your context, template string is almost godsend. By enclosing a strings inside back ticks, which is a symbol on the top left of your keyboard, you can interpolate variables from the surrounding context and construct your strings. The interpolation itself is done by enclosing the expressions inside the dollar braces characters, as can be seen over here. An example here shows you how easy it is to make HTML inside JavaScript using template strings. Next up is arrow functions. Arrow Functions is a more concise way of creating functions in ES2015. This is especially useful when assigning functions to variables or properties of an object. In an attempt to simplify our syntax, you also get the advantage of electrically bound disc value. So this inside the function is the same value, which was available at the time the function was defined. So moving along in our speed tour, the next stop is Object Literals. The biggest change over here is to be able to find function values for properties rather than creating a property and assigning a function to it, we can define the function right in line. The name of the function becomes the name of the property, as well. Also, there's no function keyword being used over here. Overall, this results in much more cleaner looking Object Literals. Next, we have Classes, which is definitely one of the big ticket items in ES2015. We have a familiar syntax, which is reminiscent of most object oriented languages. The constructor function is special and this is very initialized the default state of the class instance. The functions are similar to the functions defined in Object Literals and that also put on the prototype of the class. So here in this example, the render function goes on to the prototype of my component. And finally, let's look at exporting items from module. So here I have the constants object and also a class HelloComponent. I can export both these items by putting them inside a comma separated list within braces. Note that if you're going to export only one item from a module, you do have to use export default in front of the item as can be seen in the comment over here. Those are a quick tour of the ES2015 syntax and we covered a lot of ground with features like Destructuring, Template Strings, Arrow Functions, Object Literals, Classes, and Importing and Exporting Modules. For more in-depth coverage, please take a look at the resources in the notes for this lesson. In the next lesson, we'll do an overview of the project we'll be building for this course. Look forward to seeing you there.