reactjs

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

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.

npx create-react-app my-app

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>
 );
}}

npx create-react-app my-app
cd my-app
npm start

class TodoApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = { items: [], text: '' };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  render() {
    return (
      <div>
        <h3>TODO</h3>
        <TodoList items={this.state.items} />
        <form onSubmit={this.handleSubmit}>
          <label htmlFor="new-todo">
            What needs to be done?
          </label>
          <input
            id="new-todo"
            onChange={this.handleChange}
            value={this.state.text}
          />
          <button>
            Add #{this.state.items.length + 1}
          </button>
        </form>
      </div>
    );
  }

  handleChange(e) {
    this.setState({ text: e.target.value });
  }

  handleSubmit(e) {
    e.preventDefault();
    if (this.state.text.length === 0) {
      return;
    }
    const newItem = {
      text: this.state.text,
      id: Date.now()
    };
    this.setState(state => ({
      items: state.items.concat(newItem),
      text: ''
    }));
  }
}

class TodoList extends React.Component {
  render() {
    return (
      <ul>
        {this.props.items.map(item => (
          <li key={item.id}>{item.text}</li>
        ))}
      </ul>
    );
  }
}

ReactDOM.render(
  <TodoApp />,
  document.getElementById('todos-example')
);

npx create-react-app react-tutorial