Key words used in React JS

1.Const key word:

Constants are block-scoped, much like variables defined using the let keyword. The value of a constant can’t be changed through reassignment, and it can’t be re declared.

The const declaration creates a read-only reference to a value. It does not mean the value it holds is immutable—just that the variable identifier cannot be reassigned. For instance, in the case where the content is an object, this means the object’s contents (e.g., its properties) can be altered.

2.JavaScript map :

The Map object holds key-value pairs and remembers the original insertion order of the keys. Any value (both objects and primitive values) may be used as either a key or a value.

Object is similar to Map—both let you set keys to values, retrieve those values, delete keys, and detect whether something is stored at a key. For this reason (and because there were no built-in alternatives), Objects have been used as Maps historically.

For more information

3.Arrow function expressions:

When you just need a simple function with one argument, the new arrow function syntax is simply Identifier => Expression. You get to skip typing function and return, as well as some parentheses, braces, and a semicolon.

To write a function with multiple arguments (or no arguments, or rest parameters or defaults, or a destructuring argument) you’ll need to add parentheses around the argument list.

There is one subtle difference in behavior between ordinary function functions and arrow functions. Arrow functions do not have their own this value. The value of this inside an arrow function is always inherited from the enclosing scope.

var adder = {
  base: 1,

  add: function(a) {
    var f = v => v + this.base;
    return f(a);
  },

  addThruCall: function(a) {
    var f = v => v + this.base;
    var b = {
      base: 2
    };

    return f.call(b, a);
  }
};

console.log(adder.add(1));         // This would log 2
console.log(adder.addThruCall(1)); // This would log 2 still

For more information,

1. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

4.Array operators:

The JavaScript Array class is a global object that is used in the construction of arrays; which are high-level, list-like objects.

1. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators
2. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array

5.Filter function:

The filter() method creates a new array with all elements that pass the test implemented by the provided function.

1. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

6.React Fragment for header:

A common pattern in React is for a component to return multiple elements. Fragments let you group a list of children without adding extra nodes to the DOM.

1. https://reactjs.org/docs/fragments.html

7.Back quotes:

So a back quote means whatever is enclosed inside here, so if I put a JavaScript value there that could be evaluated and then replace that value there. So when I say back quote, and inside the back quote I will say, menu slash dollar dish ID. That’s it. So, what happens here is that for each specific dish, the corresponding dish ID value is evaluated here, and this will be substituted by the dish ID values. So, if the ID is one this will become menu slash one, if the ID is two it will become menu slash two and so on. So, that is the reason for enclosing this in back quotes here. So remember that these are back quotes not forward quotes. It’s very important that you implement this correctly here, otherwise your code will show errors.d

1. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals