If you are interested to learn about the React ES6 Classes

Array Methods

There are many JavaScript array methods. One of the most useful in React is the .map() array method. The .map() method allows you to run a function on each item in the array, returning a new array as the result. In React, map() can be used to generate lists.

Example

Generate a list of items from an array:

const myArray = ['apple', 'banana', 'orange'];

const myList = myArray.map((item) => <p>{item}</p>)

React ES6 Destructuring

Destructuring

To illustrate destructuring, we’ll make a sandwich. Do you take everything out of the refrigerator to make your sandwich? No, you only take out the items you would like to use on your sandwich. Destructuring is exactly the same. We may have an array or object that we are working with, but we only need some of the items contained in these. Destructuring makes it easy to extract only what is needed.

Destructing Arrays

Here is the old way of assigning array items to a variable:

Before:

const vehicles = ['mustang', 'f-150', 'expedition'];

// old way
const car = vehicles[0];
const truck = vehicles[1];
const suv = vehicles[2];

Here is the new way of assigning array items to a variable:

With destructuring:

const vehicles = ['mustang', 'f-150', 'expedition'];

const [car, truck, suv] = vehicles;

When destructuring arrays, the order that variables are declared is important. If we only want the car and suv we can simply leave out the truck but keep the comma:

const vehicles = ['mustang', 'f-150', 'expedition'];

const [car,, suv] = vehicles;

Destructuring comes in handy when a function returns an array:

Example

function calculate(a, b) {
  const add = a + b;
  const subtract = a - b;
  const multiply = a * b;
  const divide = a / b;

  return [add, subtract, multiply, divide];
}

const [add, subtract, multiply, divide] = calculate(4, 7);

React ES6 Spread Operator

Spread Operator

The JavaScript spread operator (...) allows us to quickly copy all or part of an existing array or object into another array or object.

Example

const numbersOne = [1, 2, 3];
const numbersTwo = [4, 5, 6];
const numbersCombined = [...numbersOne, ...numbersTwo];

The spread operator is often used in combination with destructuring.

Example

Assign the first and second items from numbers to variables and put the rest in an array:

const numbers = [1, 2, 3, 4, 5, 6];

const [one, two, ...rest] = numbers;

We can use the spread operator with objects too:

Example

Combine these two objects:

const myVehicle = {
  brand: 'Ford',
  model: 'Mustang',
  color: 'red'
}

const updateMyVehicle = {
  type: 'car',
  year: 2021, 
  color: 'yellow'
}

const myUpdatedVehicle = {...myVehicle, ...updateMyVehicle}

React ES6 Modules

Modules

JavaScript modules allow you to break up your code into separate files. This makes it easier to maintain the code-base. ES Modules rely on the import and export statements.

Export

You can export a function or variable from any file. Let us create a file named person.js, and fill it with the things we want to export. There are two types of exports: Named and Default.

Named Exports

You can create named exports two ways. In-line individually, or all at once at the bottom.

In-line individually:

export const name = "Jesse"
export const age = 40

All at once at the bottom:

const name = "Jesse"
const age = 40

export { name, age }

Default Exports

Let us create another file, named message.js, and use it for demonstrating default export. You can only have one default export in a file.

Example

const message = () => {
  const name = "Jesse";
  const age = 40;
  return name + ' is ' + age + 'years old.';
};

export default message;

Import

You can import modules into a file in two ways, based on if they are named exports or default exports. Named exports must be destructured using curly braces. Default exports do not.

Import from named exports

import { name, age } from "./person.js";

Import from default exports

import message from "./message.js";

React ES6 Ternary Operator

Ternary Operator

The ternary operator is a simplified conditional operator like if / else.

Syntax: condition ? <expression if true> : <expression if false>

Here is an example using if / else:

Before:

if (authenticated) {
  renderApp();
} else {
  renderLogin();
}

Here is the same example using a ternary operator:

With Ternary

authenticated ? renderApp() : renderLogin();