DEV Community: Aman Kumar Singh

React native and the JavaScript bridge.

Aman Kumar Singh — Sat, 13 Apr 2024 06:03:16 +0000

Introduction

In this article we will discuss how does react native came in existence, what problems it solves.

What is react native?

React native is a framework build by facebook and open-sourced in 2015. It is a JavaScript based mobile app framework, that allows to build natively rendered mobile app for Android and IOS.

wait for both android and ios form single js code how?

The answer is "JavaScript bridge". Or in other words "BLACK MAGIC".

Today i will try to unveil, how react native does it.

At first lets assume that React native might be compiling JavaScript code into native code that can be executed on IOS and Android respectively.

But this analogy is extremely hard to achieve as Objective C and Java are strongly typed languages, while JavaScript is not, so react native does not follow this.

Let's understand JavaScript Bridge.

As you go through the React native Documentation you will see this word "JavaScript Bridge" and this is responsible for the Magic/Black-magic done by react native.

Let's compress the picture, to execute the JavaScript code on native devices there must be some way that the JS thread can communicate with the Native thread at the runtime, this is done by JavaScript bridge it acts as a messenger/postman between the JS thread and Native Thread.

Let me frame this in layman words :

Lets assume conversation two people having different first language. So they communicate in the language that is understood by both.

In the same way React Native, for communication between JS Thread and Native Thread we rely on JSON messages, pushed into the message queue. The first service pushes some commands inside this queue, and the other one has to execute them.

JS thread sends asynchronous JSON message describing the actions that native side needs to accomplish to render the UI.

Creating a native module in react native.

Aman Kumar Singh — Wed, 16 Mar 2022 18:36:37 +0000

I use React native on daily basis and some times i get into an issue for which i need a native solution. In this tutorial i will make a native method in java and i will call it form react native.

Lets start

This is how your Empty react native Project will look like, here we will create a native module now in android studio.

Click on Open Existing project

Select your android folder of react native project.

Step 1

Create a new Java Class for timeBeing we will name it HelloPTModule

Here we will write some Java code


package com.whatsappcamera;

import android.provider.MediaStore;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;

import com.facebook.react.bridge.Callback;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;

import org.jetbrains.annotations.NotNull;

public class HelloPTModule extends ReactContextBaseJavaModule {
     public HelloPTModule (@Nullable ReactApplicationContext reactContext){
         super(reactContext);
     }
    @Override
    public String getName() {
        return "HelloPT";
    }

    @ReactMethod
    public void sayHello (String name, Callback cb) {
        try {
            String hello = "Hello " + name;
            cb.invoke(null, hello);
        } catch (Exception err) {
            cb.invoke(err, null);
        }
    }
}

Lets understand what is written inside this

Every Native Module written for React Native to use always extends ReactContextBaseJavaModule. This class should have a public function getName which returns a string. Note that this string is important as we will use this identifier to call our native function form react native.

sayHello is the function which we will invoke form React Native.

Step 2

Here we will create another Java class for time being lets Name it HelloPTPackage

Your helloPTPackage will look like this

package com.whatsappcamera;

import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;

import java.util.ArrayList;
import java.util.Collections;
import java.util.List;

public class HelloPTPackage implements ReactPackage {
    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }

    @Override
    public List<NativeModule> createNativeModules(
            ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>();

        modules.add(new HelloPTModule(reactContext));

        return modules;
    }
}

Step 3

Now we will register our package Open MainApplication, inside getPackages Method

add this line,

 packages.add(new HelloPTPackage());

This step marks end of the process.

step 5 The Final step

To use this native module you have to import

import React from 'react';
import { NativeModules, SafeAreaView,Button} from 'react-native';
const { HelloPT } = NativeModules; // this is the same name we returned in getName function.

const App = () => {

  const Change = () => {
     HelloPT.sayHello("Aman", (err, msg) => {
      if (err) {
       console.log(err);
       return;
      }
     console.log(msg)
    })
  }

  return (
    <SafeAreaView>
        <Button onPress={Change} title="call native function" />
    </SafeAreaView>
  );
};

When you click the button this will be in your terminal

Thanks for bearing with me 😊, Hope you enjoyed learning.
Please comment and share among your friends.

Improving web performance and Lighthouse performance results

Aman Kumar Singh — Mon, 29 Mar 2021 11:12:53 +0000

From this year google added performance as a key metric to rank your website in google search and ads Give it a look.

Now the question is what is the criteria lighthouse/google uses to measure performance.

Lighthouse Criterias (please check the image below)

Out of these things the google mainly focus on these criteria

FCP (First Contentful Paint)
LCP (Largest Contentful Paint)
CLS (Cumulative Layout Shift)
Time to interact

Let's discuss about these one by one

FCP (First Contentful Paint)

According to lighthouse First contentful paint marks the time at which the first text or image is painted.

According to web.dev FCP measures how long it takes the browser to render the first piece of DOM content after a user navigates to your page. Images, non-white <canvas> elements, and SVGs on your page are considered DOM content; anything inside an iframe isn't included.

Lighthouse FCP evaluating criteria

How to improve FCP

Deliver your website through CDN.
Make sure the chunks is small.

LCP (Largest Contentful Paint)

According to lighthouse Largest Contentful Paint marks the time at which the largest text or image is painted.

According to web.dev LCP measures when the largest content element in the viewport is rendered to the screen. This approximates when the main content of the page is visible to users. See Largest Contentful Paint defined for more details on how LCP is determined.

Lighthouse LCP evaluating criteria

How to improve LCP

Defer the JS.
Lazy load the images and other assets.
Responsive image practice prefer using (use srcset).
Caching
Preconnect and preload practices.

CLS (Cumulative Layout Shift)

According to lighthouse Cumulative layout shift measures the movement of visible elements within the viewport.

According to web.dev CLS measures the sum total of all individual layout shift scores for every unexpected layout shift that occurs during the entire lifespan of the page. A layout shift occurs any time a visible element changes its position from one rendered frame to the next.

Lighthouse CLS evaluating criteria

To calculate the layout shift score, the browser looks at the viewport size and the movement of unstable elements in the viewport between two rendered frames. The layout shift score is a product of two measures of that movement: the impact fraction and the distance fraction (both defined below).

layout shift score = impact fraction * distance fraction

## Time to interact

According to lighthouse Time to interactive is the amount of time it takes for the page to become fully interactive.

What TTI measures

TTI measures how long it takes a page to become fully interactive. A page is considered fully interactive when:

The page displays useful content, which is measured by the First Contentful Paint,
Event handlers are registered for most visible page elements, and
The page responds to user interactions within 50 milliseconds.

Lighthouse TTT evaluating criteria

Thanks for Bearing,
I will be writing articles talking about react hooks and and web performance upcoming articles please follow to stay connected.

Debouncing, and web performance

Aman Kumar Singh — Mon, 22 Mar 2021 07:13:34 +0000

Debouncing is a important when you are making a scalable web product and going to JavaScript interview.

Introduction

Debouncing, is an important practice which is used very often by web developers to improve the performance of browser.

Debounce methods do not execute when invoked. Instead, they wait for a predetermined time before executing. If the same method is called again, the previous is cancelled and the timer restarts.

Example
Consider the example in this the function associated to the button will be called 2 sec after the button is pressed. No matter how many times you press is continuously it will be executed once.

Let us understand the code

function debounce(func, wait, immediate) {
  var timeout;

  return function executedFunction() {
    var context = this;
    var args = arguments;

    var later = function() {
      timeout = null;
      if (!immediate) func.apply(context, args);
    };

    var callNow = immediate && !timeout;

    clearTimeout(timeout);

    timeout = setTimeout(later, wait);

    if (callNow) func.apply(context, args);
  };
};

Here the debounce function takes three argument

The function which needs to be executed.
The wait time.
do you want to invoke this immediately (optional).

we can also implement this in react very easily with help of `lodash`

Consider someone is building a search application making an api call after every key stroke. consider this example with help of debouncing you can visualize the difference between events fired.

Let's understand the code

 onSearchItemWithDebounce = debounce((query) => {
    this.setState({
      queryWithDebounce: query
    }, () => {
      //Do Stuff after state is updated.
      console.log('search with Debounce: ', this.state.queryWithDebounce);
    })
    this.setState({eventsFiredDebounce : this.state.eventsFiredDebounce+ 1})
  }, WAIT_TIME);

**Note : debounce is imported from lodash**

Thanks for Bearing,
I will be writing articles explaining each hook provided by react in upcoming articles please follow to stay connected.

useState hook simplified!

Aman Kumar Singh — Sat, 06 Mar 2021 11:36:48 +0000

Lets Begin the discussion

useState is a react hook, we call it inside a functional component to add some local state to it. Between re-renders React actually preserves the state.

useState returns a pair

1. current state
2. function that lets you update it.

this is how you declare const [ age, setAge ] = React.useState(10);

consider this functional component, it updates the age.

const Age = () => {
     const [ age, setAge ] = React.useState(10);
     // Onclick function to update the state
     const updateAge = ()=> {
           setAge(age => age + 1);
     }
     return (
             <div>
                <button onClick={updateAge}> {age}</button>
             </div>   
    );
}

What happens here lets discuss

Whenever this button is clicked updateAge function is called.
The setAge method is called and state is updated.
The Component renders.
useState is called for updated state value.

This perception is very Wrong !!, personally, I had the same misconception. To clear this and prove this point, I will ask you a question

Did it ever occur to you that useState hook doesn't update immediately ?

The answer to this is because they don't make any direct change to the state object, instead they create queue to optimize performance. This is why they Do not reflect immediately.

React.useState create queues for React core to update the state object of a React component.

So the process to update React state is asynchronous for performance reasons. That’s why changes don’t feel immediate.

Since react.useState is asynchronous now how someone will perform something after after react state is changed

 const Age = () => {
     const [ age, setAge ] = React.useState(10);
     // Onclick function to update the state
     const updateAge = ()=> {
           setAge(age => age + 1);
     }
     // This part will act as a callback whenever state updated 
     React.useEffect(()=>{
     if(age < 0){
        alert("Age can't be less then 0, you dumb");
      }
     },[age])
     return (
             <div>
                <button onClick={updateAge}> {age}</button>
             </div>   
    );
}

Rules for using useState

1. Only call Hooks at the top level.
2. Only call Hooks from React functions

Thanks for Bearing,
I will be writing articles explaining each hook provided by react in upcoming articles please follow to stay connected.

An Introduction to react hooks rules

Aman Kumar Singh — Thu, 25 Feb 2021 17:14:20 +0000

Through this article i will try to explain react hooks in beginner friendly manner hope you enjoy and learn through this article.

Let's try to understand in what ways you can use hooks

Rules of Hooks

Only use hook at the top level

Never call hooks inside

1 .loops

2 .conditions

3 .nested functions

On contrary always use at the top level of your react function. This is necessary to ensure that Hooks are called in the same order each time a component renders. That’s what allows React to correctly preserve the state of Hooks between multiple useState and useEffect calls.

Only hooks from react function

✅ Call Hooks from React function components.
✅ Call Hooks from custom Hooks

Now lets see some example of what we discussed above

function Form() {
  // 1. Use the name state variable
  const [name, setName] = useState('Mary');

  // 2. Use an effect for persisting the form
  useEffect(function persistForm() {
    localStorage.setItem('formData', name);
  });

  // 3. Use the surname state variable
  const [surname, setSurname] = useState('Poppins');

  // 4. Use an effect for updating the title
  useEffect(function updateTitle() {
    document.title = name + ' ' + surname;
  });

  // ...
}

Order of execution

useState('Mary')           // 1. Initialize the name state variable with 'Mary'
useEffect(persistForm)     // 2. Add an effect for persisting the form
useState('Poppins')        // 3. Initialize the surname state variable with 'Poppins'
useEffect(updateTitle)     // 4. Add an effect for updating the title

Example of what we cannot do

  // 🔴 We're breaking the first rule by using a Hook in a condition
  if (name !== '') {
    useEffect(function persistForm() {
      localStorage.setItem('formData', name);
    });
  }

//
useState('Mary')           // 1. Read the name state variable (argument is ignored)
// useEffect(persistForm)  // 🔴 This Hook was skipped!
useState('Poppins')        // 🔴 2 (but was 3). Fail to read the surname state variable
useEffect(updateTitle)     // 🔴 3 (but was 4). Fail to replace the effect

Instead this is what we can do

  useEffect(function persistForm() {
    // 👍 We're not breaking the first rule anymore
    if (name !== '') {
      localStorage.setItem('formData', name);
    }
  });

Conclusion

I will be writing articles explaining each hooks provided by react in upcoming articles please follow to stay connected.

For more detailed explanation please visit

Some important HTML tags, one should know about

Aman Kumar Singh — Tue, 23 Feb 2021 06:15:17 +0000

There are some html tags which is which is lesser talked but has potential to reduce the developer headache.

1. Lazy loading the image

Lazy loading is a strategy to identify resources as non-blocking (non-critical) and load these only when needed. It's a way to shorten the length of the critical rendering path, which translates into reduced page load times.

Lazy loading can occur on different moments in the application, but it typically happens on some user interactions such as scrolling and navigation.

<img src = "image.jpeg" alt = "Image" loading="lazy" />

This also works like magic with iframe and is supported in most of the browsers.

2. Picture tag

The HTML element contains zero or more elements and one element to offer alternative versions of an image for different display/device scenarios.

The browser will consider each child element and choose the best match among them. If no matches are found—or the browser doesn't support the element—the URL of the element's src attribute is selected. The selected image is then presented in the space occupied by the element.

<picture>
    <source srcset="image800px.png"
            media="(min-width: 800px)">
    <img src="imagedefault.png" alt="" />
</picture>

This is supported by every browser except Internet Explorer.

3 http-equiv= “refresh”

I just want to discuss a usecase for this
Suppose when a user first comes to your website, and you want to show him some loading screen for few seconds to pre-fetch content for a better user experience. In this case it is very useful.

<meta http-equiv="refresh" content="30; www.streamstyle.live">

this will redirect to streamstyle after 30 sec

Instructions for content attribute:

The number of seconds until the page should be reloaded - only if the content attribute contains a positive integer.

The number of seconds until the page should redirect to another - only if the content attribute contains a positive integer followed by the string ';url=', and a valid URL.

4. Progress

The tag represents the completion progress of a task.

<progress id="file" value="32" max="100"> 32% </progress>

5. Datalist

The HTML element contains a set of elements that represent the permissible or recommended options available to choose from within other controls.

<label for="ice-cream-choice">Choose a flavor:</label>
<input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" />

<datalist id="ice-cream-flavors">
    <option value="Chocolate">
    <option value="Coconut">
    <option value="Mint">
    <option value="Strawberry">
    <option value="Vanilla">
</datalist>

Conclusion

I Think Html and css is very powerful, and these can be used to inject life in some good websites just by using these two. Despite of heavy usage in industry many people don't dive in deep.

Hope you enjoyed reading my article!

Some important HTML tags, one should know about

Aman Kumar Singh — Tue, 23 Feb 2021 06:09:57 +0000

There are some html tags which is which is lesser talked but has potential to reduce the developer headache.

1. Lazy loading the image

Lazy loading can occur on different moments in the application, but it typically happens on some user interactions such as scrolling and navigation.

<img src = "image.jpeg" alt = "Image" loading="lazy" />

This also works like magic with iframe and is supported in most of the browsers.

2. Picture tag

The HTML element contains zero or more elements and one element to offer alternative versions of an image for different display/device scenarios.

<picture>
    <source srcset="image800px.png"
            media="(min-width: 800px)">
    <img src="imagedefault.png" alt="" />
</picture>

This is supported by every browser except Internet Explorer.

3 http-equiv= “refresh”

<meta http-equiv="refresh" content="30; https://amankumarsingh01.github.io">

this will redirect to streamstyle after 30 sec

Instructions for content attribute:

The number of seconds until the page should be reloaded - only if the content attribute contains a positive integer.

The number of seconds until the page should redirect to another - only if the content attribute contains a positive integer followed by the string ';url=', and a valid URL.

4. Progress

The tag represents the completion progress of a task.

<progress id="file" value="32" max="100"> 32% </progress>

5. Datalist

The HTML element contains a set of elements that represent the permissible or recommended options available to choose from within other controls.

<label for="ice-cream-choice">Choose a flavor:</label>
<input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" />

<datalist id="ice-cream-flavors">
    <option value="Chocolate">
    <option value="Coconut">
    <option value="Mint">
    <option value="Strawberry">
    <option value="Vanilla">
</datalist>

Conclusion

I Think Html and css is very powerful, and these can be used to inject life in some good websites just by using these two. Despite of heavy usage in industry many people don't dive in deep.

Hope you enjoyed reading my article!

Styled-components with typescript

Aman Kumar Singh — Mon, 22 Feb 2021 08:15:41 +0000

First lets discuss what is styled components and how it is useful :-

styled-components is the result of wondering how we could enhance CSS for styling React component systems. By focusing on a single use case we managed to optimize the experience for developers as well as the output for end users.

The Motivation behind styled components were the following
1.Automatic critical CSS
2.No class name bugs
3.Easier deletion of CSS
4.Simple dynamic styling
5.Painless maintenance
6.Automatic vendor prefixing

How we can use styled-component with typescript

consider this example

const DIV = styled.div`
  color: red;
  font-size : 21px;
  margin-left : 1.5rem;
  &::before {
    content: "<div>";
    font-family: "La Belle Aurore", cursive;
    color: yellow;
    font-size: 18px;
    position:absolute;

  }
  &::after {
    content: "</div>";
    font-family: "La Belle Aurore", cursive;
    color: yellow;
    font-size: 18px;
    position:absolute;
  }
`;

So if you are not passing any props for dynamic styling then there is no difference.

Lets Consider you are using something like this

jsx <DIV backgroound ="red" color = "yellow" />

for using this type of component using styled components we need to have a interface for the props variables like this

interface StyledDivProps {
    background: text;
    color : text,
}

const DIV = styled.div<StyledDivProps>`
  color: ${({ color })=> color };
  background-color: ${({ background })=> background };
  font-size : ${Constants.FONT_SIZE_H1};
  margin-left : 1.5rem;
  &::before {
    content: "<div>";
    font-family: "La Belle Aurore", cursive;
    color: green;
    font-size: 18px;
    position:absolute;

  }
  &::after {
    content: "</div>";
    font-family: "La Belle Aurore", cursive;
    color: green;
    font-size: 18px;
    position:absolute;
  }
`;

This is how you can use styled-components with typescript.

JavaScript Scopes.

Aman Kumar Singh — Mon, 07 Sep 2020 17:39:56 +0000

What is Scope?

A set of well defined rules for storing variables in any programming language is termed as scope.

Now we know what is scope, take a pause and read the above line again, can you tell why do we need variables in programming language, we use variables everyday after writing hello world program, but why? Life was pretty simple without variables, why do we need this complexity?

One of the most important paradigms of all programming languages is the ability of declaring variables, and later retrieve and modify those values, This ability gives a state to our program.

To understand scope, lets first see how compiler works.

Compiler Theory.

JavaScript is an interpreted language, not a compiled language. A program such as C++ or Java needs to be compiled before it is run. The source code is passed through a program called a compiler, which translates it into bytecode that the machine understands and can execute. In contrast, JavaScript has no compilation step. Instead, an interpreter in the browser reads over the JavaScript code, interprets each line, and runs it. More modern browsers use a technology known as Just-In-Time (JIT) compilation, which compiles JavaScript to executable bytecode just as it is about to run.

Consider this statement:

var x = 100;

For running a JavaScript code these components play important role

Engine - Responsible for start to finish compilation and execution
Compiler- Handles the work of parsing and code generation.
Scope - Maintains a lookup list of all declared identifiers.

var x =100; Compiler will perform lexing to breakdoen into tokens which will then parse into a tree.
compiler will proceed as:

Encountering var x, compiler will ask scope to check if variables already exist in that particular scope, if so compiler ignores this declaration, Otherwise compiler will ask to declare a new variable called x for that scope.
Compiler then generates code for engine, later execute the assignment x =100.
The Engine runs the code generated by compiler and ask the scope if there is a variable x accessible in current scope, if so engine uses the variable and assigns 100 to it. If not then engine will look into a scope above current scope. If engine eventually do not find any variable x then it will yell out an error!

Knowing about engine

While executing the code Engine has to lookup for x in the scope to see whether it is declared or not. In this case Engine will perform LHS LOOKUP and when engine has to assign 100 to x it preforms RHS LOOKUP
for more clarity lets consider an example

function PrintX(x){
console.log(x);
}
PrintX(100);

When this code will we executed by engine the following steps will happen

Engine will tell scope that it has a RHS reference to PrintX ,

Scope will answer that exist in the scope and it is a function

Engine will execute the function PrintX(), again Engine will ask compiler that it has a LHS reference for x with value 100.

scope will say that compiler declared a formal parameter to the function PrintX.

Engine will assign 100 to x.

Engine will again ask scope that it has a RHS look for X.

Scope will say it has a variable x.

Then the console.log(x) will be executed and result 100.

Nested scope

if scope is unable to find a variable/identifier in current scope then it moves upward a scope and checks there and this continues till it reaches the global scope and still if it didn't get that particular identifier it will yell an error!

to visualize the process of nested scope resolution consider a multistorey building the ground floor is where the current scope lives now suppose the LHS/RHS lookup happens and the identifier is not found, taking the elevator to next floor and searching it there. The topmost floor is where the global state lives.

if the engine is doing a LHS lookup and it didn't find the and arrives into global store it will end up creating a global scope variable. to avoid this we use "strict mode".

Thanks for bearing!

Nodejs terminal app

Aman Kumar Singh — Fri, 04 Sep 2020 04:16:51 +0000

By the end of this post, you will learn to create your own commands for Linux to make your life simpler.

Lets Begin

First of all, you need node and npm installed in your system to install node and npm you can follow install node & npm download and install the latest stable version of node and npm.

* Creating the project

$ mkdir node-cli
$ cd node-cli
$ npm init -y

hurray we created a node application 😃

step 1

you can open the project in any code editor of choice mine is vs code.

there will be a file called package.json that is used by NPM (Node Package Manager) uses this package.json file information about Node JS Application information or Node JS Package details.

{
  "name": "node-cli",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

your package.json will be looking like this after npm init -y

let's add a property "bin":"./index.js" to this package.json file.

Let us start doing the real thing now,
make a file index.js and

//index.js
console.log("Hello, world!");

now for testing purpose, we will do

$ node index.js
Hello, world!

Yes, it is working, great 😃,
let's now focus on the real thing.

in your index.js file

#!/usr/bin/env node;
console.log("Hello, world!");

#!/usr/bin/env node this line should be the first line of your file basically when you execute this file it will tell that the system what interpreter to pass that file to for execution, via the command line following the magic #! prefix (called shebang).

let's make this index.js file executable, in the terminal run the following command

$ chmod +x index.js

it will make the file executable ./index.js to run your application.

let me tell you the capability of our command:
It is capable of doing creating a react app and pushing to your Github account, to keep you synced. creating a new project and pushing it to Github is redundant, it's needed to be automated.

node modules we need for the project

$ yarn add minimist axios path

the use of minimist : the guts of optimist's argument parser without all the fanciful decoration.

the use of axios : it is used for passing the HTTP request.

the use of path : The path module provides utilities for working with file and directory paths.

we will also use child_process it comes prebuild with node.

use of minimist

suppose you want to run our index.js file you do ./index.js but if you want to pass arguments to the program like ./index.js --file ./ --n first
minimist will give you an object like this

{
   file : './',
   n : 'first'
}

we can use minimist in this way

var args = require("minimist")(process.argv.slice(2), {
  boolean: ["help", "check"],
  string: ["n", "path", "setup"],
});

the type of help and check will be boolean and n, path, and setup will be of type string.

use of Axios

Axios is used to make HTTP request, you can use Axios like this.

const { default: Axios } = require("axios");
const payload = {
          name: `${args.n}`,
          description: "this is text",
          homepage: "https://github.com",
          private: false,
        };
        Axios.post("https://api.github.com/user/repos", payload, {
          headers: {
            "Content-Type": "application/json",
            Authorization: `token ${Key}`,
          },
        }).then(res => console.log(res.data")).catch(e => console.err(e));

Axios returns a promise that we check if the promise is fulfilled .then() will we called and if it fails .catch() will be called

use of path

The path module provides utilities for working with file and directory paths.

use of child_process

The child_process module provides the ability to spawn child processes in a manner that is similar, but not identical, to popen(3). This capability is primarily provided by the child_process.spawn() function, but here we will mainly use exec() method

const exec = require("child_process").exec;
exec(` {your linux terminal commands or anything goes here }`,
     function (err, stdout, stderr) {
                if (err) {
                  console.error(`error: ${err.message}`);
                  return;
                }

                if (stderr) {
                  console.error(`stderr: ${stderr}`);
                }
                console.log("");
                if (stdout) {
                  console.error(`stdout: ${stdout}`);
                }
              }
            );

Now we know all about the packages we will be using.

Content of index.js

I guess it is understandable and makes sense!

you can get your key here create personal access token

#!/usr/bin/env node
var path = require("path");
const exec = require("child_process").exec;
const { default: Axios } = require("axios");
const Key = <your_key />
var args = require("minimist")(process.argv.slice(2), {
  boolean: ["help", "check"],
  string: ["n", "path"],
});

const BASEPATH = path.resolve(process.env.BASEPATH || __dirname);
if (args.help) {
  printHelp();
} else if (args.n) {
  if (args.path) {
    var pathto = path.join(BASEPATH, args.path);
    console.log("\x1b[32m", "work is in progress, please wait!");
    exec(
      `cd ${pathto} && mkdir ${args.n} && cd ${args.n} && create-react-app ./`,
      (err, stdout, stderr) => {
        if (err) {
          console.error(`error: ${err.message}`);
          return;
        }

        if (stderr) {
          console.error(`stderr: ${stderr}`);
          //return;
        }

        console.log("\x1b[32m", "Creating github repo!");

        const payload = {
          name: `${args.n}`,
          description: "this is text",
          homepage: "https://github.com",
          private: false,
        };
        Axios.post("https://api.github.com/user/repos", payload, {
          headers: {
            "Content-Type": "application/json",
            Authorization: `token ${Key}`,
          },
        })
          .then((res) => {
            console.log(res.data);
            exec(
              `cd ${pathto}/${args.n} && git init && git remote add origin ${res.data.ssh_url} && git add . && git branch -M master && git push -u origin master `,
              function (err, stdout, stderr) {
                if (err) {
                  console.error(`error: ${err.message}`);
                  return;
                }

                if (stderr) {
                  console.error(`stderr: ${stderr}`);
                }
                console.log("");
                console.log(`cd ${pathto}/${args.n}`);
                console.log("yarn start");
                console.log("Happy hacking");
              }
            );
          })
          .catch((e) => console.log("NetWork Error", e));
      }
    );
  } else {
    printHelp();
  }
} else {
  printHelp();
}
//************************************************
function printHelp() {
  console.log("github usage:");
  console.log("");
  console.log(
    "This package can be used while creating a react app and at the same time get synced with github"
  );
  console.log("");
  console.log("--help                             Gives you help window");
  console.log(
    "--n ={fineName} --path ={path}                    File name of the project"
  );
}

let's create a command-line function for this

$ npm link
npm WARN react-app@1.0.0 No description
npm WARN react-app@1.0.0 No repository field.

audited 35 packages in 0.769s

3 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

/usr/local/bin/react-app -> /usr/local/lib/node_modules/react-app/index.js
/usr/local/lib/node_modules/react-app -> /home/aman/Github

you are all done.😃

Link to the repo

DEV Community: Aman Kumar Singh

React native and the JavaScript bridge.

Introduction

What is react native?

Let's understand JavaScript Bridge.

Let me frame this in layman words :

Creating a native module in react native.

Step 1

Step 2

Step 3

step 5 The Final step

Improving web performance and Lighthouse performance results

Lighthouse Criterias (please check the image below)

FCP (First Contentful Paint)

How to improve FCP

LCP (Largest Contentful Paint)

How to improve LCP

CLS (Cumulative Layout Shift)

What TTI measures

Debouncing, and web performance

we can also implement this in react very easily with help of lodash

useState hook simplified!

Lets Begin the discussion

What happens here lets discuss

Did it ever occur to you that useState hook doesn't update immediately ?

Rules for using useState

An Introduction to react hooks rules

Rules of Hooks

Only use hook at the top level

Only hooks from react function

Now lets see some example of what we discussed above

Conclusion

Some important HTML tags, one should know about

1. Lazy loading the image

2. Picture tag

3 http-equiv= “refresh”

4. Progress

5. Datalist

Conclusion

Some important HTML tags, one should know about

1. Lazy loading the image

2. Picture tag

3 http-equiv= “refresh”

4. Progress

5. Datalist

Conclusion

Styled-components with typescript

First lets discuss what is styled components and how it is useful :-

How we can use styled-component with typescript

JavaScript Scopes.

What is Scope?

Compiler Theory.

Knowing about engine

Nested scope

Nodejs terminal app

Lets Begin

* Creating the project

step 1

node modules we need for the project

use of minimist

use of Axios

use of path

use of child_process

Content of index.js

we can also implement this in react very easily with help of `lodash`