Image for post
Image for post
Spiss Castle, Slovakia

In this passage, we will mainly focus on those built-in array functions and several use cases.

  1. reduce()

Execute the function for each element in array and accumulate them to be the final result

Example 1let numbers = [1, 2, 3, 4, 5];let result = numbers.reduce(sum);//total - the value of last result
//At the beginning, the total is 1 - 1st element in array,
//and num is 2 - 2nd element array
//Then the value of total will be 1 + 2 = 3,
//and num will be 3 - 3rd element array
//Then the value of total will be 1 + 2 + 3 = 6,
//and num will be 4 - 4th element…

Image for post
Image for post

1. callbacks

First, we have to understand some key concepts in Javascript — synchronous/ asynchronous and blocking/ non-blocking

Consider the following snippets

//simple callbacks exampleconst greetings = () => {
console.log('Hello');
};
const greetingsLater = () => {
console.log('Hi');
}
setTimeout(greetingsLater, 5000);
greetings();

Like most of the programming language, Javascript execute the code from top to bottom, one line after another — Synchronous
In the above code snippet, it creates 2 functions — “greetings” and “greetingsLater”, then execute functions “greetingsLater” by built-in function “setTimeout” and lastly execute greetings

Other built-in aynchronous functions including: setInterval(), requestAnimationFrame(), navigator.geolocation.getcurrentposition …

It will output

Hello
Hi //after 5 seconds…


This time we would go a little bit deeper about state, including shouldComponentUpdate(), PureComponent and Context API

Before we continue, let’s have a look How ReactJS update our pages

  1. Detected changes in props or state
  2. Trigger shouldComponentUpdate(), by default return true, that means it always go to the next step render()
  3. render() is called to render the new virtual DOM
  4. Compare the old virtual DOM with the newly rendered virtual DOM
  5. Update the real DOM if any difference found, only update the parts which are different instead of the whole DOM

By default, if any changes in props or state, React will always render() the new virtual DOM including all components and compare it with the last version.
For example, user just click the submit button and trigger the modal panel and confirm dialog. Obviously, this is a small changes in screen, probably a boolean in state indicated the confirm dialog have to be shown, nothing related with other components.
However, React will still render a virtual DOM including all components and check against with the old version. Think about if we have a large application and every single change will trigger the same behavior - render and check again all components. It would spend a lot of resources and slowdown the application. …


What is state?

state is the property in your app. When the app is running, it changing the state according the business logic in order to fulfil the user requirement.

If you familiar with Java, state is something like private variable, we can’t edit it outside of the class which created it. They’re invisible to other class unless we explicitly pass to another class (or function component) and they’re called “props” there. Other class can edit the state only if we explicitly pass the function

Before React 16.8, state is only available in class component. …


If you are a Java developer and you want to learn about modern Javascript, then this page may give you some idea. Some programming concepts/syntax are similar in both languages, some are not. I try to list out the difference below in simple English

  1. Class

In Java, everything is required to contain in Class.
In Javascript, you’re not necessarily contain everything in Class. If you only have a few lines of code, you can just put everything in the global scope. Although in React.JS, …


Image for post
Image for post
The Library of Trinity College
  1. More about Promise
  • Promise.resolve()

Mostly we return a resolved promise object with a given value, that value can be everything, it can be another promise or thenable statement, if that value is a thenable statement, then the fulfillment status will be depends on it. For more, please refer to the MDN docs

Promise.resolve("finished").then(data=> {console.log(data)})//output
//finished
  • Promise.reject()

Same as Promise.resolve() but return a rejected promise, others are same

_______________________________________________________________

Below are built-in promise functions that handle multi promise

We will re-use the promisfy examples from last post

//Promisfied setTimeout
const delay = (msg, ms) => new Promise(resolve => setTimeout(
() => resolve(msg)…

As in last passage, I will try to list out the difference and explain them in simple English and examples. After reading both passages, you should be able to understand the syntax of Javascript with no more confusion.

1.
Pre-compiled vs Not pre-compiled,
Static type vs Dynamic type,
Strong type vs Weak Type

Java has to compile to bytecode — the .class file, before you can run on the JVM. That means our code would be review by the compiler, and once we decide the type of variable, we couldn’t change it later.

The following Java code snippet would cause compiler error of — incompatible types. Once we declare “text” as String, we can only store String variable, we can’t t store anything else. …


In Javascript, there are lots of method related with Object and Array, it is not easy for beginners to remember them.

In this session, I am going to introduce you Object.keys() / Array map() / […] (spread operator) and an example related with them. Once you understand that example, I am sure you will understand and remember them.

Object in Javascript
Start and end with curly braces

***Never use arrow function inside Javascript object, for detail, please read ES6 JavaScript — “this” keyword

let car = {type:"Tesla", model:"Modal X", color:"white"};//In Javascript, objects can contains function
let car = {
type:"Tesla",
model:"Modal X",
color:"white",
summary: function() {
console.log(this.type, this.model, this.color); …


Try to summarize the usage of “this” with examples

  • Every function created with the function keyword or with the method shorthand has its own “this”, and it generally binds to “who” called it.
  • Arrow functions don’t bind “this” to anything, the “this” inside depends on the surrounding context

Example 1

“handler” declared by error function here, that means the “this” is nothing, just same as outside the handler, thus the output is Window object

const handler = () => {
console.log(this);
};
btn1.addEventListener('click', handler);

Output

Window {parent: Window, opener: null, top: Window, length: 0, frames: Window, …}

Example 2

With “function” keyword here, the “this” binds to something. In this case, the browser automatically bind the “this” to button, because the button trigger the…


Problem

As everything finally will be import to App.js, we have to define unique style class name for different components. By default, all CSS class defined in React available globally. You can define all CSS class with unique name, but normally we have several dozen of class, in large project, maybe more than one hundred, it is very waste time to check whether that name is unique or not when you going to define a new CSS class.

Objective

Limit the styles to certain components instead of the whole applications

Result

The scope of that CSS class will limit to those imported that CSS file, that means you’re free to use same naming for CSS class by import different CSS files, we can use same naming for style class in different components. In the background React will automatically append random string to those style class when we import to App.js …

About

Johnny Lai

Self-taught programmer locating in New Zealand.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store