请问如何执行class类里面的代码

Question

代码如下：import React, { Component } from 'react';
import Web3 from 'web3';import './Login.css';let web3 = null; // Will hold the web3 instanceclass Login extends Component 
{
  state = {loading: false};// Loading button state，一开始设metamask连接状态为false  handleAuthenticate = ({ publicAddress, signature }) =>
    fetch(`${process.env.REACT_APP_BACKEND_URL}/auth`, {//19 调用后台
      body: JSON.stringify({ publicAddress, signature }),
      headers: {
        'Content-Type': 'application/json'
      },
      method: 'POST'
    }).then(response => response.json());  handleClick = () => {//3
    const { onLoggedIn } = this.props;//React中的每一个组件，都包含有一个属性（props），属性主要是从父组件传递给子组件的，在组件内部，我们可以通过this.props获取属性对象
                                                                                   //就是点击页面按钮时传来的属性对象    if (!window.web3) {//4 先检查是否安装了metamask
      window.alert('请先安装metamask');
      return;
    }
    if (!web3) {//5 检查metamask是否连接上了网络
      // We don't know window.web3 version, so we use our own instance of web3
      // with provider given by window.web3
      web3 = new Web3(window.web3.currentProvider);
    }
    if (!web3.eth.coinbase) {//6 检查metamask是否登录
      window.alert('请先登录metamask.');
      return;
    }
    const publicAddress = web3.eth.coinbase.toLowerCase();
    this.setState({ loading: true });//到这里metamask就连接上了，状态为true    // Look if user with current publicAddress is already present on backend
    fetch(
      `${
        process.env.REACT_APP_BACKEND_URL
      }/users?publicAddress=${publicAddress}` //7 去后端查看这个address是否之前是否已经注册过了
    )
      .then(response => response.json())
      // If yes, retrieve it. If no, create it.
      .then(//10 如果不为0，说明之前注册过，那就得到users[0] = （nonce，publicAddress,username）;如果users.length为0，则create it,调用this.handleSignup(publicAddress)
        users => (users.length ? users[0] : this.handleSignup(publicAddress))
      )
      // Popup MetaMask confirmation modal to sign message
      .then(this.handleSignMessage)//15 然后这时候的address在数据库上都生成的自己的数据，所以可以对得到的nonce进行签名了
      // Send signature to backend on the /auth route
      .then(this.handleAuthenticate)//18 进行签名的核查
      // Pass accessToken back to parent component (to save it in localStorage)
      .then(onLoggedIn)
      .catch(err => {
        window.alert(err);
        this.setState({ loading: false });
      });
  };  handleSignMessage = ({ publicAddress, nonce }) => {//16 然后就使用私钥和nonce来进行签名
    return new Promise((resolve, reject) =>
      web3.personal.sign(
        web3.fromUtf8(`I am signing my one-time nonce: ${nonce}`),
        publicAddress,
        (err, signature) => {
          if (err) return reject(err);
          return resolve({ publicAddress, signature });//17 得到publicAddress, signature
        }
      )
    );
  };  handleSignup = publicAddress => 
    fetch(`${process.env.REACT_APP_BACKEND_URL}/users`, {//11 访问后端，发送address
      body: JSON.stringify({ publicAddress }),
      headers: {
        'Content-Type': 'application/json'
      },
      method: 'POST'
    }).then(response => response.json());//14 得到创建的用户的信息  render() {//1
    const { loading } = this.state;//得到状态false
    return (//返回页面
      <div>
        <p>
          Please select your login method.<br />For the purpose of this demo,
          only MetaMask login is implemented.
        </p>
        <button className="Login-button Login-mm" onClick={this.handleClick}>//2 点击进行登录
          {loading ? 'Loading...' : 'Login with MetaMask'}
        </button>
        <button className="Login-button Login-fb" disabled>
          Login with Facebook
        </button>
        <button className="Login-button Login-email" disabled>
          Login with Email
        </button>
      </div>
    );
  }
}export default Login;这个是在网上找的源代码，我不懂js，感觉跟Ｃ语言完全不同啊，请问我要如何在html中执行这个类里面的代码

Answer 1

这个不是js代码，是jsp，里面通常会包含java代码，javascript代码，html代码，里面的java代码需要在后台执行，不能在浏览器执行。

Answer 2

嗯。。现在前端已经是模块化开发了，所以你这代码是没办法直接在HTML中执行这个代码的。需要通过构建工具webpack/babel等工具 编译后才能使用。

Answer 3

虽然这个不能直接拿到html中直接用，但是如果你能看懂代码，想简单改改还是可以直接用的啊，里面很明白，无非也就是按钮点击，处理事件，调接口提交信息，登录什么的，里面的注释也很详细。另外一楼说这是jsp?我咋觉得是React的JSX语法呢？

Answer 4

import React, { Component } from 'react';
第一行已经说明了它是什么鬼！！！

Answer 5

这个js文件，最后export default Login 这个就暴露了这个class，在其他文件中引用这个js，然后就可以使用login这个class了