react js

let count = Object.keys(myobj).length

npx create-react-app my-app
cd my-app
npm start
You have to download Node.js for this because you need NPM.

//With node and npm already installed for basic start

npx create-react-app my-app-name

// if you want to use npm 

npx create-react-app my-app-name --npm

//if you want to use typescript 

npx create-react-app my-app-name --template typescript

yarn start // app will be hosted on localhost:3000

/* start making changes at ./my-app-name/src/App.js
	React documentation: https://reactjs.org/docs/hello-world.html
*/

This is a formatted version of Komadori's answer 
(https://tinyurl.com/Komadori)
React is a JavaScript library for building user interfaces. 
It is maintained by Facebook and a community of 
individual developers and companies. 
React can be used as a base in the development of single-page 
or mobile applications.

React is a JavaScript library for building user interfaces.

It is maintained by Facebook and a community of individual developers and
companies.

React can be used as a base in the development of single-page or mobile
applications.

/**
 * This function allow you to modify a JS Promise by adding some status properties.
 * Based on: http://stackoverflow.com/questions/21485545/is-there-a-way-to-tell-if-an-es6-promise-is-fulfilled-rejected-resolved
 * But modified according to the specs of promises : https://promisesaplus.com/
 */
function MakeQuerablePromise(promise) {
    // Don't modify any promise that has been already modified.
    if (promise.isResolved) return promise;

    // Set initial state
    var isPending = true;
    var isRejected = false;
    var isFulfilled = false;

    // Observe the promise, saving the fulfillment in a closure scope.
    var result = promise.then(
        function(v) {
            isFulfilled = true;
            isPending = false;
            return v; 
        }, 
        function(e) {
            isRejected = true;
            isPending = false;
            throw e; 
        }
    );

    result.isFulfilled = function() { return isFulfilled; };
    result.isPending = function() { return isPending; };
    result.isRejected = function() { return isRejected; };
    return result;
}

npx create-react-app my-app

class MainView extends Component {
  render() {
    // don't render anything
    return <div/>;
  },

  componentDidMount() {
    // find the DOM node for this component
    const node = ReactDOM.findDOMNode(this);

    // widget does stuff
    $(node).activateMyCoolWidget();

    // start a new React render tree with widget node
    ReactDOM.render(<div>{this.props.children}</div>, node);
  }
});

class ShoppingList extends React.Component {
  render() {
    return (
      <div className="shopping-list">
        <h1>Shopping List for {this.props.name}</h1>
        <ul>
          <li>Instagram</li>
          <li>WhatsApp</li>
          <li>Oculus</li>
        </ul>
      </div>
    );
  }
}

// Example usage: <ShoppingList name="Mark" />

import React, { Component } from 'react';
import './App.css';
import { auth, provider } from './Firebase';export 

default class App extends Component { 

 constructor(props) {
  super(props);
  this.state = {
   isAuth: false,
   isError: false,
   account: null,
  }
 }
 
 render() {
  const { isAuth, isError, account } = this.state;
  return (
   <div className="App">
    <header className="App-header">
     {isAuth ? (
      <>
       <img
        src={account.picture}
        alt={account.name}
        width="200"
       />
       <p>{account.name}</p>  
      <button onClick={this.logoutGoogle}>
       Logout
      </button>
     </>
    ):(
     <>
      <p>Firebase Authentication</p>
      <button onClick={this.loginGoogle}>
       Login With Google    
      </button>
     </>
    )}
    <small>{isError.message}</small>
   </header>
  </div>
 );
}}