The Web Workers specification defines an API for spawning background scripts in your web application. Web Workers allow you to do things like fire up long-running scripts to handle computationally intensive tasks, but without blocking the UI or other scripts to handle user interactions.

// Code from https://www.html5rocks.com/en/tutorials/workers/basics/

var worker = new Worker('task.js');
worker.postMessage(); // Start the worker.

Communication between a work and its parent page is done using an event model and the postMessage() method.

// Code from https://www.html5rocks.com/en/tutorials/workers/basics/

// Main script
var worker = new Worker('doWork.js');

worker.addEventListener('message', function(e) {
  console.log('Worker said: ', e.data);
}, false);

worker.postMessage('Hello World'); // Send data to our worker.

// Worker script
self.addEventListener('message', function(e) {
  self.postMessage(e.data);
}, false);

There are two ways to stop a worker: by calling worker.terminate() from the main page or by calling self.close() inside of the worker itself.

References:

• https://www.html5rocks.com/en/tutorials/workers/basics/
• https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API

The CSS Object Model is a set of APIs allowing the manipulation of CSS from JavaScript. It is much like the DOM, but for the CSS rather than the HTML. It allows users to read and modify CSS style dynamically.

document.body.style.background = 'lightblue';

References:

• https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model
• https://css-tricks.com/an-introduction-and-guide-to-the-css-object-model-cssom/
• https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model

The Document Object Model (DOM) is the data representation of the objects that comprise the structure and content of a document on the web.

A Web page is a document. This document can be either displayed in the browser window or as the HTML source. But it is the same document in both cases. The Document Object Model (DOM) represents that same document so it can be manipulated. The DOM is an object-oriented representation of the web page, which can be modified with a scripting language such as JavaScript.

In the beginning, JavaScript and the DOM were tightly intertwined, but eventually, they evolved into separate entities. The page content is stored in the DOM and may be accessed and manipulated via JavaScript.

const paragraphs = document.getElementsByTagName("p");
// paragraphs[0] is the first <p> element
// paragraphs[1] is the second <p> element, etc.
alert(paragraphs[0].nodeName);

References:

• https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction

React Hot Loader is a plugin that allows React components to be live reloaded without the loss of state. Basically DOM is re-rendered on each save without doing a full reload. It works by replacing a module of the application during runtime with an updated one so that it’s available for instance use.

References:

• React Hot Loader
• React Hot Loader - Getting Started
• Set up React Hot Loader in 10 minutes

Hooks let you use more of React’s features without classes. Hooks embrace functions, but without sacrificing the practical spirit of React.

// code from https://reactjs.org/docs/hooks-overview.html

// State Hook example
import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

// code from https://reactjs.org/docs/hooks-overview.html

// Effect Hook example
import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

References:

• Introducing Hooks