Forem: Ravi Ojha

Javascript: Implement your own setInterval using setTimeout

Ravi Ojha — Tue, 17 Aug 2021 10:10:45 +0000

In one of my recent interview I was asked to implement setInterval.

Here is the question definition:

Let's assume there is no setInterval available to us, but you do have setTimeout and using setTimeOut you have to implement setInterval. It should satisfy these two conditions:

It should be able to take callback and delay as parameter.
There should be a way to clear the interval.

This is what I was able to come up with (NOTE: This is a brushed up code similar to what I wrote in interview):

function mySetInterval(callback, delay) {
  let clears = [];

  // NOTE: A recursive function which gets called after **delay**
  (function recFun() {
    clears.push(setTimeout(() => {
      callback();
      recFun();
    }, delay));
  }())


  return  () => {
    for (let i = 0; i < clears.length; i++) {
      clearTimeout(clears[i]);
    }
  };
}

// To Test
let count = 1;
let clear = mySetInterval(() => {
  console.log("hello world", count++);
}, 1000);


setTimeout(() => {
  clear();
}, 5000);

There might/will be different ways to solve this, the one thing that I love about the above code is, it gives a practical example of using closures in javascript.

If you have any other way to solve it or you find something wrong with above, please do let me know me in comments.

Approach II: This can handle multiple setInterval

(function(window) {
  let interval = {}
  window.setInterval = function(fun, delay) {
    let rndId = Math.floor(Math.random() * 1000);
    const execute = function() {
      let id = setTimeout(() => {
        fun();
        execute();
      }, delay)

      if (!interval[rndId]) {
        interval[rndId] = []
      }

      interval[rndId].push(id)
      console.log(rndId, interval[rndId])
    }

    execute();

    return rndId;
  }

  window.clearInterval = function(rid) {
    console.log("Rid and Interval", rid, interval)
    while (interval[rid].length > 0) {
      console.log(interval[rid])
      clearTimeout(interval[rid].pop());
    }
  }
}(window))


const pid = setInterval(() => {
  console.log("Hello world");
}, 2000);

console.log("PID", pid)


setTimeout(() => {
  clearInterval(pid)
}, 10000)

-- Thanks, Ravi

Build dark mode theme toggle in React

Ravi Ojha — Wed, 23 Jun 2021 07:47:59 +0000

I got my inspiration for this post from Article By @murtuzaalisurti

Pre-requisite:

Setting up React Project from Scratch

Ravi Ojha ・ May 30 '20

#react #javascript

In this post we will build a dark mode theme toggle. This is what we are aiming for:

Nice, Let's start !!

1. Follow everything from Here (Also mentioned in pre-requisite) to start with react project from basic.

I just created a new folder sun-moon and copied everything from the previous post (react-from-scratch) except node_modules and did a fresh npm i.

2. Add `css-loader` and `mini-css-extract-plugin` as dependency:

npm i css-loader mini-css-extract-plugin -D

This will allow us to import css in our js file, as shown below:

// in App.js file
import "./App.css";

So, let's create App.css in src folder and import it in App.js.

3. Update `webpack.config.js` to include `css-loader` and `mini-css-extract-plugin` to this:

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "./public"),
    filename: "bundle.js",
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: "babel-loader",
      },
      {
        test: /(\.scss|\.css)$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },
  plugins: [new HtmlWebpackPlugin({ template: "./public/index.html" }), new MiniCssExtractPlugin()],
};

4. Create `Sun` and `Moon` component

This is basically going to contain Sun/Moon svg as react component.

We can get Sun and Moon SVG from here:

Sun
Moon

Although, We can manually create React Component from SVG but we can also use this playground which will just convert the SVG to react component for us: React SVGR

Now, After doing all above, this is how our project will look like:

---sun-moon
  |--node_modules
  |--...
  |--src
     |--App.js
     |--App.css
     |--index.js
     |--Sun.js
     |--Moon.js

5. Create `DarkContext` context

Create a file DarkContext.js in src folder, with this content:

import { createContext } from "react";

export const DarkContext = createContext(false);

This creates a context object DarkContext using createContext method from React library.
DarkContext has the default theme value as false.

6. Wrap the `App` with `DarkContext.Provider`

Wrap App with DarkContext.Provider and specify the initial value.
Now, other components can access the value of the theme by using DarkContext.
For our example, Sun and Moon Component needs to know if current context is Dark or Light (not-dark).

Note: We could have passed the value of theme using props, and that would also be okay, but let's try to get a feel of react's context api.

So, after this our App.js will look like this:

import React, { useState } from "react";
import { DarkContext } from "./DarkContext";

import "./App.css";

const App = () => {
  const [isDark, setIsDark] = useState(false);

  return (
    <DarkContext.Provider value={isDark ? true : false}>
      <div className="instruction">Click On Sun/Moon &#128071;</div>
      <div className={`app${isDark ? " dark" : ""}`}>
        Hello World
      </div>
    </DarkContext.Provider>
  );
};

export default App;

Here, App is also maintaining an internal state isDark, which helps to update our context value:

<DarkContext.Provider value={isDark ? true : false}>
...
</DarkContext.Provider>

7. Create `ThemeIcon` component to hold `Sun` & `Moon` component:

import React, { useContext } from "react";
import Moon from "./Moon";
import Sun from "./Sun";

function ThemeIcon(props) {
  const { onClick } = props;

  return (
    <div className="theme-icon" onClick={onClick}>
      <Sun></Sun>
      <Moon></Moon>
    </div>
  );
}

export default ThemeIcon;

Nothing fancy here, it's just a component which holds our Sun and Moon component, it also needs to have an onClick handler which will change the value of isDark from App's internal state and that has to be passed down from App component.

8. Include `ThemeIcon` component in `App` component and pass down the `onClick` handler:

import React, { useState } from "react";
import { DarkContext } from "./DarkContext";
import ThemeIcon from "./ThemeIcon";

import "./App.css";

const App = () => {
  const [isDark, setIsDark] = useState(false);

  return (
    <DarkContext.Provider value={isDark ? true : false}>
      <div className={`app${isDark ? " dark" : ""}`}>
        <ThemeIcon onClick={() => setIsDark(!isDark)}></ThemeIcon>
      </div>
    </DarkContext.Provider>
  );
};

export default App;

If we look at this line:

<div className={`app${isDark ? " dark" : ""}`}>

And also take a look at some corresponding css:

.app {
  width: 100vw;
  height: 100vh;
  ...
}

.dark {
  ...
}

We will notice that, We are saying html element div.app is going to be full width and full height. And whenever the value of isDark is true i am going to add css class dark as well.

9. Use context in `Sun` and `Moon` Component:

As for the useContext

It accepts a React Context object as an input. For us it will be DarkContext.
The output of useContext is the current value of the context (true/false).

So, we will use useContext to get the current value of the context in Sun/Moon component.

This is how we will be doing it:

const isDark = useContext(DarkContext);

Our, Sun and Moon will now look like this:

import React, { useContext } from "react";
import PropTypes from "prop-types";
import { DarkContext } from "./DarkContext";

function Sun() {
  // Things to notice here:
  const isDark = useContext(DarkContext);

  return (
    <svg
      version="1.1"
      id="Capa_1"
      x="0px"
      y="0px"
      viewBox="0 0 457.32 457.32"
      // Things to notice here:
      className={`sun ${isDark ? " sun-dark" : ""}`}
    >
      ...
    </svg>
  );
}

export default Sun;

It will exactly be same for Moon component as well.
Now, if we do:

npm run start:dev

We should be able to see our app at http://localhost:8080/.

The only thing that we didn't discuss in entirety is it's css part, but if we are able to understand how sun is disappearing and how moon comes up, and how moon disappears and sun comes up, then we can say we understood it completely.

Although, we can see the css code here or in github (link shared at the end of this post) and try to understand what is going on, but instead let's look at these two screenshots, I believe that should be enough to understand the logic, rest all is just writing code for that logic.

So, to understand this, Let's look at this screenshot first, this is our initial state:

So, We see there is IconContainer (in terms or our code it is ThemeIcon component, that we created above), that is holding Sun icon/component, the opacity of sun is 1 and there we also see Moon but it's not going to be visible because it's opacity is 0 {opacity: 0}, when i click on IconContainer our Sun is going to be invisible by making its opacity as Zero(0) (by adding extra class sun-dark) and moon's opacity will become One(1) (by adding extra class, moon-dark to the moon svg, based on the value of isDark), we can have another look at Sun/Moon component and see how css classes are getting added.

When we click on IconContainer, this is what it will look like:

So, this is what happened when we clicked:

DarkContext's value is going to be true.
Sun/Moon is going to know that change, through context, based on that they are going to act.
Sun is going to attach sun-dark class to it's SVG, which will make it invisible (opacity: 0)
Moon is going to attach moon-dark class as well to it's SVG, which will make it visible (opacity: 1)

When we click again, same thing is going to happen just in reverse.

There are some transitions and transformation that I have added to make it more interesting, but not to worry, if we are able to understand the logic above, things will be easy.

We can see the live demo here: Sun Moon
We can see the entire code here

--Thanks, Ravi

npm: Making sense of versions

Ravi Ojha — Mon, 21 Jun 2021 08:11:30 +0000

While giving a code walkthrough, some one recently asked "How do we keep our dependencies updated?" and "what is the meaning of caret ^ in package.json?". This seems like a very easy question, but sometimes it confuses people and i feel it's good to know these little things.

Introducing Semantic Version

tilde (~) in package.json, it means when someone gets your repo or package and try to install the library, it is going to install latest patch version.

So if package.json looks like this:

...
"dependencies": {
  "some_dependencies": "^4.17.1",
},
...

So if the latest version is 4.17.11 then 4.17.11 version is going to be installed.

caret (^) in package.json, it means when someone gets your repo or package and try to install the library, it is going to install latest minor version.

so if package.json looks like this:

...
"dependencies": {
  "some_dependencies": "^4.17.8",
},
...

And latest version is 4.18.9, then if we do npm i it is going to pick up 4.18.9 version.

When it is written as ("lodash": "*") it basically says to go ahead and install its absolute new version. This is not always a good idea, it might break your system, so we need to plan these kind of changes.

Node v14.8+: Top Level Async Await

Ravi Ojha — Wed, 09 Jun 2021 09:16:48 +0000

We all know what callback hell is, there is dedicated page for it. I recommend to go through it once. We all know how difficult it is to maintain a pyramid structure of code.

Then came promises which made our life much easy and code started looking much better, and much easy to maintain.

Then came async/await which made it even better.

In this post, let's see how to use top level async await.

But first, let us see how does it look now.

Setup

mkdir top-level-async
cd top-level-async
touch async-await.js

Copy Paste the below code.

function fakeApiCall() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("I am resolved, after 1000ms!!");
    }, 1000);
  });
}

async function doSomething() {
  let result = await fakeApiCall();
  console.log(result);
}

doSomething();

Explanation:

fakeApiCall is function which returns a promise, call could also be reduced by any other client, for example axios (At the end of this post i will add a live example).
doSomething is an async function, for now we can only use await in an async function.
doSomething(); calling doSomething

Let's run the code in terminal:

node async-await.js

In terminal you should be seeing something like this:
I am resolved, after 1000ms!!.

So, you see we can't use await at the top level or without being wrapped inside an async function.

But there is a workaround to use await without having the need to declare async function and without the need of calling them separately, calling them using IIFE:

function fakeApiCall() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("I am resolved, after 1000ms!!");
    }, 1000);
  });
}

(async function() {
  let result = await fakeApiCall();
  console.log(result);
})();

Personally, I didn't see much progress from above, we still have to have anonymous function, although not the named one, and by the virtue of IIFE, it is being called immediately, although not manually.

Wrapping code in an async function is not a bad way to do it, It's just a way to enable the await keyword. But, Do we have any better to do this? The answer is YES, that's what we are discussing here.

With the latest node version(s) (v14.8+), we should be able to rewrite the above code to something like this. proposal-top-level-await

function fakeApiCall() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("I am resolved, after 1000ms!!");
    }, 1000);
  });
}

let result = await fakeApiCall();
console.log(result);

Copy above code and paste it to async-await.js and re-run:

node async-await.js

Did we see any error?

huh? What happened?
Let's go back to this link again. Let's read Synopsis one more time:

Top-level await enables modules to act as big async functions: With top-level await, ECMAScript Modules (ESM) can await resources, causing other modules who import them to wait before they start evaluating their body.

Now, the catch is top-level await is available only in ES modules. These are the three ways to make a Node.js script an ECMAScript module. Let's look at it one by one.

Here is a good place to get started with JS Modules . Link.

1. Whole package as a `Module`

Do the following:

npm init -y
touch async-await-package-module.js

This will generate a package.json as well.
Copy the below code and paste it in async-await-package-module.js

function fakeApiCall() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("I am resolved, after 1000ms!!");
    }, 1000);
  });
}

let result = await fakeApiCall();
console.log(result);

Note: This is exactly the same code as above, for which we got an error while running.

Update the package.json to look something like this:

{
  "name": "top-level-async",
  "version": "1.0.0",
  "description": "",
  "type": "module", // TODO: Add this
  "main": "async-await-package-module.js", //TODO: Update this
  "scripts": {
    "dev": "node async-await-package-module.js" //TODO: Update this
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Let's run in terminal:

npm run dev

Why do we have to run it like npm run dev? Can't we use node async-await-package-module.js?
The answer is YES.

So what does it mean?

Basically, by adding "type": "module", to your package, you have declared that this package is based on ECMAScript modules, and all .js files inside the folder containing this package.json (with type: module) will be executed as ECMAScript modules.

2. Using `.mjs` file extension

touch async-await-mjs-file.mjs

Copy the code from above for which we got an error and paste it to async-await-mjs-file.mjs.

Run it in terminal:

node async-await-mjs-file.mjs

Awesome, it works, we can see output as I am resolved, after 1000ms!!.

Also V8's documentation does recommends this. Here is the link.

3. Passing an argument `--input-type=module` and passing code as string to eval like `--eval="<module_code>"`

For example:

node --input-type=module --eval='function fakeApiCall() { return new Promise((resolve) => { setTimeout(() => { resolve("I am resolved, after 1000ms!!"); }, 1000); }); } let result = await fakeApiCall(); console.log(result);'

The code that is added here --eval="code" is still the same one from above for which we got an error, its just in one line.

When we run it in terminal, it should work and give us:
I am resolved, after 1000ms!!

As promised, here is the live example using axios:

touch async-await-live.mjs

Paste this code in async-await-live.mjs

import axios from "axios";

const response = await axios("https://randomuser.me/api");
console.log("****Got result***** \n", response.data);

Run in terminal like this:

node async-await-live.mjs

Awesome, this should work as expected:

Code used in this Post can be found here

References used in this post:

-- Thanks, Ravi

javascript: Making multiple API calls the right way

Ravi Ojha — Sun, 06 Jun 2021 09:34:46 +0000

Recently while reviewing a PR I realized a function was making multiple calls one by one which could have been making calls in parallel. In this post I want to share two different pieces of code (with mock) and a graph which shows how both of them progresses independently.

Let's start!!

Suppose there is a scenario where we have to make multiple calls to an API to get the full list of users, suppose there are 500 users in system, but API is capped by maximum pageSize, which could be let's suppose 100.

With above assumptions we will have to make 10 calls to get the full list of users.

Let's create a mock/fake API endpoint:



function fakeApiCall(currentPage) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({
        data: {
          currentPage,
          total: 100000,
        },
      });
    }, 1000);
  });
}

This returns a promise which will be resolved after 1000ms

One more use case: Let's suppose we get a requirement to get the list of all users to process something beforehand (it could be anything, for eg: may be we just want to show the list of active users when admin lands on Admin Panel, to do that we will have to get all the users and then filter out the in-active one).

1. First way to solve this:



async function oneByOneCall() {
  ...
  let currentPage = 1;

  while (currentPage <= 5) {
    let { data } = await fakeApiCall(currentPage);
    result = [...result, data];
    currentPage++;
  }
  ...
  // Do something with final result
}

async/await brings a lot of comfortability while dealing with promises, it's also very easy to write and understand code.

But, let's look at the code one more time.

So, what is happening here.



let { data } = await fakeApiCall(currentPage);

Here we are saying, make the api call and wait for the result to come back, then process that result and then continue with while loop. Execution will kind of stop at this point while waiting for result to come back

huh?? That's not what we want, we wanted to process it in parallel. right?

NOTE: There will be scenarios where you will have wait, could be because you are making calls to multiple APIs and you want to decide or send some data from previous response, but thats not something we are tackling here

2. Second way to solve this:



async function parallelCall() {
  ...
  let start_time = new Date().getTime();
  let promises = [];
  let result = [];

  let currentPage = 1;

  while (currentPage <= 5) {
    promises.push(fakeApiCall(currentPage));
    currentPage++;
  }

  const data = await Promise.all(promises);
  data.forEach(({ data }) => {
    result = [...result, data];
  });

  ...
  // Do something with final result
}

So, here we are saying we will have a promise array.



  let promises = [];

And in loop we are going to push each promise returned from fakeApiCall and not going to wait for result right now.



    promises.push(fakeApiCall(currentPage));

When we are done with loop or collecting all the promises, we are going to wait for each of them to be finished only once.



  const data = await Promise.all(promises);

And here is the graph for better representation of the execution sequence and their comparison:

1. Making API calls one by one, waiting for response after every call.

2. Making API calls in parallel, collecting all the promises in an array and waiting only at the end.

So, finally, we can see we are gaining close to 4 secs (4000ms) here. That's a huge gain. So second option is much better than going with first option.

The code used in this post is available here.

-- Thanks, Ravi

Setting up React Project from Scratch

Ravi Ojha — Sat, 30 May 2020 15:09:04 +0000

create-react-app is great tool to get started with react, it gives us everything we need initially for react learning, hacking some things together or even starting a new project.

But some times we do need to know what is going on behind the scene and most importantly what are all the libraries or tools that are being used under the table.

We will try to understand different tools involved to get up and running with react from scratch. We don't have to remember everything, it just gives us a feeling of knowing that makes us more confident.

So, Let's get started

First: Create project folder

Create a project directory, it can be anywhere we want. I personally like to keep everything in one place, for me it's ~/repos/....

mkdir react-from-scratch && cd $_

Next: Initialize project with npm

npm init -y

-y flag to create default package.json, If we don't provide this flag with npm init then it will open up a CLI questionnaire. We can read more about this here

Now we have a directory to hold code for our project.

Next: Install React and React-DOM

react: This only contains the functionality necessary to define React components. We can find more on this here
react-dom: This serves as the entry point to the DOM. We can find more on this here

Lets get them installed now:

npm install react react-dom -S

-S (alternate as --save) to save it as dependencies. we don't need to provide this flag it's there by default. But it's good to know that it's there.

Next: Install babel and required plugins

Babel lets us try and use new JavaScript features (ES2015+). So Babel is basically JavaScript transpiler which enables us to write new/modern JavaScript that will be transpiled/converted into backwards compatibility version of JavaScript or widely supported ES5 JavaScript.

We usually customize Babel with preset, preset is a set of plugins used to support particular language. For us we will be using react-preset

We will also need to install babel core (@babel/core) which has the core functionality of Babel.

Lets get them installed now:

npm i -D @babel/preset-react @babel/core

-D (alternate as --save-dev) to save it as dev dependencies.

NOTE: Do have a look at @babel/preset-env which allows us to use the latest JavaScript without needing to micromanage which syntax transforms are needed by our target environment(s). But for this demo we are not specifically targeting any environments, we should be good to proceed, and we don't need to install it. We can read more here

Next: Install Babel Loader

This allows transpiling JavaScript files using Babel and later webpack will be using it to transpile Modern JavaScript into the JavaScript code that browsers can understand.

npm i -D babel-loader

Next: Configure Babel

In root folder of our directory, create a file called .babelrc and add the below content to it. Here we are basically telling Babel to use this configuration while transpiling.

{
  "presets":[
    "@babel/preset-react"
  ]
}

Next: Install Webpack, Webpack cli (the tool used to run webpack on the command line) and Webpack Dev Server

webpack: It is JavaScript Module bundler. We can read more here
webpack-cli: is required to run the project from the terminal.
webpack-dev-server: This will be use to serve our content.

Lets get them installed now:

npm i -D webpack webpack-cli webpack-dev-server

Next: Install HtmlWebpackPlugin

It simplifies creation of HTML files to serve our webpack bundles. We can either let the plugin generate an HTML file for us or supply our own template.

The plugin will generate an HTML5 file for us that includes all our webpack bundles in the body using script tags. We can read more about this here

npm i -D html-webpack-plugin

Now, we still need to create webpack.config.js for webpack configuration. But to understand it more clearly first we will write our component and get our html out.

As of now, Our project's folder structure should look like this:

.
├── node_modules
├── package.json
├── .babelrc

And, package.json should look like this:

{
  "name": "react-from-scratch",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
  },
  "keywords": [],
  "author": "Ravi Ojha",
  "license": "ISC",
  "dependencies": {
    "react": "^16.13.1",
    "react-dom": "^16.13.1"
  },
  "devDependencies": {
    "@babel/core": "^7.10.1",
    "@babel/preset-react": "^7.10.1",
    "babel-loader": "^8.1.0",
    "html-webpack-plugin": "^4.3.0",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.11.0"
  }
}

Next: Create Directory and Files for Project

In root of project folder create couple of files add the contents as given below:

mkdir src && cd $_
touch index.js App.js index.html

Index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>React App From Scratch</title>
</head>
<body>
  <div id="root"></div>
</body>
</html>

Note:

We don't have any <script> added into html, this html will be used later as a template for HtmlWebpackPlugin in webpack.config.js.
We have div#root in out html, this is where react-dom will inject or attach our root level component.

App.js

import React from 'react';

const App = () => {
  return (
    <div>
      Hello!! This is React Session from Scratch
    </div>
  );
};

export default App;

Note: This is App Component that will be Inserted into DOM

index.js

import React from 'react';
/**
  As suggested in comment the above line was missing,
  -- Thanks Ross.
*/
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<APP/>, document.getElementById("root"))

Note:

Notice we are referring div#root to attach our Root Component.
This will be our entry point for our application, same will be added in webpack.conf.js later.

Now, Lets take a pause and look at our project folder structure, it should be similar to this:

.
├── node_modules
├── src
        ├── App.js
        ├── index.html
        ├── index.js
├── package.json
├── .babelrc

Note: Now lets create the webpack.config.js file.

Next: Create Webpack Configuration file

In root of our project create a file called webpack.config.js and add the below content to it:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, '/dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: 'babel-loader',
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({ template: './src/index.html' }),
  ],
};

entry: An entry point indicates which module webpack should use to begin building out its internal dependency graph. For us it is src/index.js
output: The output property tells webpack where to emit the bundle file it creates and how to name these files.
module:rules[...]:use: We are specifying which loader to use to transpile our code. For us it will be babel-loader.
plugin: We will see multiple plugins to do multiple thing, here we have only used the html-webpack-plugin to generate our final html to be served.

Note: We are using the index.html we created earlier as a template, in here output:filename will be inserted as <script> tag in our final html to be served.

Next: Add script in package.json

Add the below content in script section in package.json like below:

"scripts": {
    "start:dev": "webpack server"
  },

/**
  As pointed in comment, With latest Webpack It has to be
  * "webpack server"
  Rather than just
  * "webpack-dev-server"
  -- Thanks Aakarshak
*/

Next: Run the application

Run the below command from terminal

npm run start:dev

Finally: This is what we will get!!

Happy Coding!! Thanks for reading.

Forem: Ravi Ojha

Javascript: Implement your own setInterval using setTimeout

Approach II: This can handle multiple setInterval

Build dark mode theme toggle in React

Setting up React Project from Scratch

Ravi Ojha ・ May 30 '20

1. Follow everything from Here (Also mentioned in pre-requisite) to start with react project from basic.

2. Add css-loader and mini-css-extract-plugin as dependency:

3. Update webpack.config.js to include css-loader and mini-css-extract-plugin to this:

4. Create Sun and Moon component

5. Create DarkContext context

6. Wrap the App with DarkContext.Provider

7. Create ThemeIcon component to hold Sun & Moon component:

8. Include ThemeIcon component in App component and pass down the onClick handler:

9. Use context in Sun and Moon Component:

npm: Making sense of versions

Introducing Semantic Version

More read on Semantic Versioning

Node v14.8+: Top Level Async Await

Setup

Explanation:

1. Whole package as a Module

So what does it mean?

2. Using .mjs file extension

3. Passing an argument --input-type=module and passing code as string to eval like --eval="<module_code>"

References used in this post:

javascript: Making multiple API calls the right way

1. First way to solve this:

2. Second way to solve this:

1. Making API calls one by one, waiting for response after every call.

2. Making API calls in parallel, collecting all the promises in an array and waiting only at the end.

Setting up React Project from Scratch

First: Create project folder

Next: Install React and React-DOM

Next: Install babel and required plugins

Next: Install Babel Loader

Next: Configure Babel

Next: Install Webpack, Webpack cli (the tool used to run webpack on the command line) and Webpack Dev Server

Next: Install HtmlWebpackPlugin

Next: Create Directory and Files for Project

Next: Create Webpack Configuration file

Next: Add script in package.json

Next: Run the application

Finally: This is what we will get!!

2. Add `css-loader` and `mini-css-extract-plugin` as dependency:

3. Update `webpack.config.js` to include `css-loader` and `mini-css-extract-plugin` to this:

4. Create `Sun` and `Moon` component

5. Create `DarkContext` context

6. Wrap the `App` with `DarkContext.Provider`

7. Create `ThemeIcon` component to hold `Sun` & `Moon` component:

8. Include `ThemeIcon` component in `App` component and pass down the `onClick` handler:

9. Use context in `Sun` and `Moon` Component:

1. Whole package as a `Module`

2. Using `.mjs` file extension

3. Passing an argument `--input-type=module` and passing code as string to eval like `--eval="<module_code>"`