react js-tutorial

React ES6

In 2015, the next version of the ECMA script programming language, dubbed ES6, was made available to the public. To allow for multiple, decoupled implementations of the JavaScript language, it is used to provide guidelines for the language.

A Guide to Using ES6

While ES6 enjoys widespread support, there is still the issue with Internet Explorer. Since you can’t be sure that all browsers will behave consistently once you begin writing in ES6 style, you should proceed with caution.

Tools like Babel make it possible to convert ES6 code to the “simpler” syntax of ES5. Babel is a compiler that facilitates the process of migrating ES6 code from a development environment to a production environment; it is typically used in conjunction with web-pack, which bundles and minifies the code.

To use ES6 syntax in your.js files, just create them in your IDE. Setting up a web-pack to load js files via Babel is preferable to loading them directly. Whenever you save a new version of your code, webpack-dev-server will be launched immediately. You can now load bundle.js, which contains all of your code, instead of index.js.

A new variable declaration syntax, let, was added to ES6. Before ES6, the keyword var was required whenever a variable needed to be declared.

Functionally scoped variables begin with the var keyword, while block-scoped variables begin with the let keyword. If a variable is defined using the var keyword, it will be elevated to the top of its scope. However, variables declared with the let keyword will not be elevated.

Commonly used ES6 Features

Throughout the rest of this book, a number of ES6 features will be used consistently. If you do not have prior experience with ES6 features, this brief introduction will come in handy. If you’re comfortable with ES6 features, skip this section and head to chapter 2 to get started writing your first component.

let and const

let and const are two new keywords that were introduced in ES6 for declaring variables. When used to declare variables, they are scoped to the block and not the function; this means they are only available within that block. Variables declared with let can be re-assigned but cannot be redeclared within the same scope whereas those declared by const must be assigned an initial value but cannot be redeclared within the same scope.

In summary, use let when you plan on re-assigning new values to the variable and const if you’re not planning to re-assign a variable. See an example of using let

let name = 'Edmond';
name = 'Atto';
console.log(name);

//output
Atto

The spread operator

The spread operator denoted by … is used to expand iterable objects into multiple elements as shown in the example below.


const cities = ["Kampala", "Nairobi", "Lagos"];
console.log(...cities);

//output
Kampala Nairobi Lagos

The spread operator can also be used to combine multiple arrays into one array containing all array elements as shown below.


const east = ["Uganda", "Kenya", "Tanzania"];
const west = ["Nigeria", "Cameroon", "Ghana"];

const countries = [...east, ...west];
console.log(countries);

//output
[ 'Uganda', 'Kenya', 'Tanzania', 'Nigeria', 'Cameroon', 'Ghana' ]

Template literals

Before ES6, strings were concatenated using the + operator as shown in the example below.

const student = {
 name: 'John Kagga',
 city: 'Kampala'
};

let message = 'Hello ' + student.name + ' from ' + student.city;
console.log(message);

//output
Hello John Kagga from Kampala

ES6 introduced template literals which are essentially string literals that include embedded expressions. They are denoted by backticks instead of single or double quotes. The template literals can contain placeholders which are represented by ${expression}. The quotes and + operator are dropped when using template literals as shown in the rewrite of the above example below.

let message = `Hello ${student.name} from ${student.city}`;

//output
Hello John Kagga from Kampala

Default function parameters

ES6 introduced a way of adding default values to the function’s parameter list as shown below.

function greet(name = 'Fellow', greeting = 'Welcome') {
 return `${greeting} ${name}`;
}

console.log(greet()); // Welcome Fellow
console.log(greet('Kagga')); // Welcome Kagga
console.log(greet('Mike', 'Hi')); // Hi Mike

A default parameter is created when an equal ( = ) is added and whatever the parameter should default to if an argument is not provided (this parameter) can be any JavaScript data type.

RECOMMENDED ARTICLES





Leave a Reply

Your email address will not be published. Required fields are marked *