July 05, 2019

published by: Yonseo

React JS Study Notes

React JS is a javascript library used to build dynamic single page web applications. It separates the back-end from the front-end and is great for multi-user development.

Arrow functions

A simplified way of typing functions by using arrows.

In a regular function we have:

function print(name, age){

    console.log(name, age);


In an arrow function we have:

const print = (name, age) => {

    console.log(name, age);


print("John", 21);

A simplified arrow function

const print = (name, age) => console.log(name, age);

Notice how an arrow function uses const instead of function.

A simplified arrow function with one variable

const print = name => console.log(name);

An arrow function with one argument does not need parenthesis. If we try to do this with two variables or more it will fail.

Imports and Exports

To bring all files together we need to bootstrap them to one file. This file is called app.js

no image found

app.js will import all files to one location, this is sometimes referred to as bootstrap. Before I can import anything I need to export a function. I can import a file or a function by calling its name. I can also give a new name to my import files or assign a new name to my import functions.

no image found

Default Export

A default export will use the same name as the function, however once I import this I can give it a new name. boba.js can import with import boba from './boba.js' but I can also import the same file and give it a new name. 

import bubble from './boba.js' 

I am using the same file to import regardless of the name I gave.

Named Export

With a named export I can assign a name to an import file or function.

Creating Components

React uses classes to create components. Classes are referred to as objects. Within a class we have methods. To access a method I need to first call an object.

//an object named milktea
class milktea {

        this.tea = 'jasmine';




//an object named pearl that extends millktea
class pearl extends milktea{

        //super constructor I need to access object milktea and it's  methods
        this.boba = 'black';




//create an instance of new object
const drink = new pearl();
//get a method within object
//get an extended method

Spread Operator

I have 3 toppings and I want to add a new topping to the existing toppings. To do that I need a rest operator which is 3 dots ... followed by a variable. So it will look like this ...toppings

const toppings = ['pearl', 'pandan', 'egg pudding'];
const newToppings = [...toppings, 'aloe vera'];

The output:

[ 'pearl', 'pandan', 'egg pudding', 'aloe vera' ]

What if I did not include the 3 dots ... The output will look like this:

[ ['pearl', 'pandan', 'egg pudding'], 'aloe vera' ]

It is now a separate element inside an element. The 3 dots let us know that it is a continuation not a separate element.

Another way to use a spread operator is by taking the properties of a function and combining them.

const tea = {
    name: 'Jasmine'

const newTea = {
    color: 'green'



{ name: 'Jasmine', color: 'green' }

Rest Operator

Collect all the remaining elements into an array. Instead of typing multiple arguments in a function I can use rest operator to create an array and insert as many arguments as I like into the new instanced function.

const toppings = (...items) => {
    result = items;
    return result;

console.log(toppings('pearl', 'pandan', 'pudding'));

This will simply print out an array.

[ 'pearl', 'pandan', 'pudding' ]


Extract array elements from objects properties and store them in variables.

const tea = ['jasmine', 'black', 'oolong'];
    [a, c] = tea;
console.log(a, c);


jasmine oolong


I have an object with a property name. 

const tea = {
    name: 'jasmine'

I create a new object that equals the first created object. Now if I print tea or newTea it will return jasmine because both objects point to the same property.

const newTea= tea;

What happens if I add this line of code? Will I get oolong or jasmine?

tea.name = 'oolong';

The answer is oolong because I changed the property name of object tea to oolong. This is called a reference because object newTea points to object tea therefore they equal the same value.

Let's look at the code together.

const tea = {
    name: 'jasmine'
const newTea = tea;
tea.name = 'oolong';


To make this a copy instead of a reference I need to make newTea an object and copy the properties.

const tea = {
    name: 'jasmine'
const newTea = {
tea.name = 'oolong';

Now if i try to print this it will return jasmine because newTea is a copy not a reference.

map() function

A function to execute on every element in an array.

var array = [1, 4, 9, 16];

// pass a function to map
const double = array.map(num => num * 2);



> Array [2, 8, 18, 32]

Let's try to find the square root of each number in the array.

var numbers = [1, 4, 9];
var roots = numbers.map(num => Math.sqrt(num));


> Array [1, 2, 3]

#reactJS #javascript #study

Last edit: 0000-00-00