React Cheat Sheet

Inheriting Methods & Properties

When creating a new Class you can inherit and use the properties and methods from the parent Class with calling super(); in your constructor();

Class Human(){ constructor(){ this.race = "Human"; } printRace(){console.log(this.race)} } Class Person extends Human { constructor(){ this.name = "Jasmin"; super(); // <= this executes the initializaton of the parent methods and properties } printName(){ console.log(this.name) } me = new Person(); me.printName() // "Jasmin" me.printRace() // "Human" }
Code language: JavaScript (javascript)

 

Classes, Properties & Methods

Properties are like variables attached to Classes & Objects

  • in ES6 you have to define properties within the constructor function
constructor(){ this.prop = "something"; }
Code language: JavaScript (javascript)

 

In ES7 you can define it without constructor via myProperty = "Something"

 

Spread & Rest operator “…”

Spread & Rest operator is simple (three-dot) function that is used to split up array elements or object properties (SPREAD) or merge a list of function arguments into an array (REST)

const newArray = [...oldArray,5,6,7]; // spread const newObject = { // Spread ...oldObject, propNickName: "Mickey" } function newFunction(...args){ //rest return args.sort(); }
Code language: JavaScript (javascript)

 

Equality test of a property

When comparing the variables, properties or filtering an array, we often use == and ===, the main and only difference is:

  • == compares the value of the argument and
  • === compares value & type of the argument

 

Destructuring Arrays & Objects

Easily extract array values or object properties to store them in variables

// Array Destructuring [greeting, name] = myArray // myArray = ["Hello","Mickey"] console.log(greeting) // Hello console.log(name) // Mickey //Object Destructuring myObj = { name: "Jasmin", age: 32 } {name} = myObj; console.log(name) // Jasmin console.log(age) // undefined (since we did not extract age, only name
Code language: JavaScript (javascript)

Reference & Primitive types

Important to notice, when copying the value of primitive types (boolean, string, number…) you will strictly copy their value. If you copy an Array or Object you will only refer to the existing object. This can give you a headache in React development sometimes, that is why “real” copying for Arrays and Objects is done with a spread operator. For example:

// Primitive types: String, number, boolean yourAge = 34; myAge = yourAge; console.log(myAge) // 34 yourAge = 55; //redefine yourAge console.log(myAge) // 34 <= stays as is // Objects or Arrays: cat = { name: "Jasmin" } dog = cat; console.log(dog.name) // Jasmin //change value of cat.name changes the name of the dog as well cat.name = "Manuela" console.log(dog.name) // Manuela
Code language: JavaScript (javascript)

In order to really copy your object properties, you can use the spread operator

cat = {name: "Jasmin"} dog = {...cat} console.log(dog.name) // Jasmin cat.name = "Manuela"; console.log(dog.name) // Jasmin
Code language: JavaScript (javascript)

Array Functions

Those functions like map() , find(), filter() or similar, are often used in react components. Check the for more information check the Mozilla Docs

Category: Uncategorized