Dapp TokenFarm开发(2)--- 修改ts组件

1.2 更换模板

1.2.0 入口文件

修改 入口文件 src/index.js 文件改名为 main.tsx 配置如下

import React from 'react';
import ReactDOM from 'react-dom';
import 'bootstrap/dist/css/bootstrap.css'
import App from './components/App';

ReactDOM.render(<App />, document.getElementById('root'));

1.2.1 组件

src/app.tsx

import React, { Component } from 'react'
import Navbar from './Navbar'
import './App.css'

type StateType={
  account:string;
}

type propType={
  [propName:string]:any; 
}

interface App{
  state : StateType;
  props: propType
}

class App extends Component {

  constructor(props:any) {
    super(props)
    this.state = {
      account: '0x0'
    }
  }

  render() {
    return (
      <div>
        <Navbar account={this.state.account} />
        <div className="container-fluid mt-5">
          <div className="row">
            <main role="main" className="col-lg-12 ml-auto mr-auto" style={{ maxWidth: '600px' }}>
              <div className="content mr-auto ml-auto">
                <a
                  href="http://www.dappuniversity.com/bootcamp"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                </a>

                <h1>Hello, World!</h1>

              </div>
            </main>
          </div>
        </div>
      </div>
    );
  }
}

export default App;

src/Navbar.tsx

import React, { Component } from 'react'
import farmer from '../farmer.png'

type StateType={
}

type propType={
  account:string;
  [propName:string]:any; 
}

interface Navbar{
  state : StateType;
  props: propType
}

class Navbar extends Component {

  render() {
    return (
      <nav className="navbar navbar-dark fixed-top bg-dark flex-md-nowrap p-0 shadow">
        <a
          className="navbar-brand col-sm-3 col-md-2 mr-0"
          href="http://www.dappuniversity.com/bootcamp"
          target="_blank"
          rel="noopener noreferrer"
        >
          <img src={farmer} width="30" height="30" className="d-inline-block align-top" alt="" />
          &nbsp; DApp Token Farm
        </a>

        <ul className="navbar-nav px-3">
          <li className="nav-item text-nowrap d-none d-sm-none d-sm-block">
            <small className="text-secondary">
              <small id="account">{this.props.account}</small>
            </small>
          </li>
        </ul>
      </nav>
    );
  }
}

export default Navbar;

Navbar中存在图片引入错误

在 src 中创建 image.d.ts 配置如下

/*
  ts图片声明导入
*/ 

declare module '*.svg'
declare module '*.png'
declare module '*.jpg'
declare module '*.jpeg'
declare module '*.gif'
declare module '*.bmp'
declare module '*.tiff'

在public 中添加常用工具 babel.min.js 用来解析语法文件

最后把index.html 从 public 目录移到项目根目录(即移到public外)

配置如下

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="/favicon.ico" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta name="theme-color" content="#000000" />
    <!--
...
    -->
    <link rel="manifest" href="/manifest.json" />
    <script src="/babel.min.js"></script>
    <!--
...
    -->
    <title>Dapp Token Farm</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
...
    -->
    <script type="module" src="./src/main.tsx"></script>
  </body>
</html>

1.2.3 更换完成

在终端中输入

npm run dev

即可完成前端的部署

网页效果如下

posted @ 2022-05-26 16:44  Jerrvis  阅读(68)  评论(0)    收藏  举报