Cahokia Mounds图片 - TypeScript

简介

Cahokia Mounds是一个古代的平原原住民城市遗址，位于Mississippi河的西侧。它是古北美洲的一个独特文化，它集中了各种各样的建筑和公共区域。这个遗址被认为是世界上最大的古代平原原住民城市之一。

在这个项目里，我们将使用TypeScript编写一个简单的应用程序，用Cahokia Mounds图片来展示我们的程序设计和开发能力。

技术栈

• TypeScript
• React
• Webpack

安装

要安装这个项目，你需要先安装node.js和npm包管理器。

在安装后，你可以从命令行中克隆这个项目：

git clone https://github.com/your_username/cahokia-mounds.git
cd cahokia-mounds
npm install

运行

你可以使用以下命令运行项目：

npm start

这将启动一个开发服务器，并将Cahokia Mounds图片显示在浏览器上。

代码截图

import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';

const App = () => {
  const [imageUrl, setImageUrl] = useState('');

  useEffect(() => {
    const fetchImageUrl = async () => {
      const response = await axios.get('https://api.unsplash.com/photos/random', {
        headers: {
          Authorization: 'Client-ID YOUR_ACCESS_KEY'
        },
        params: {
          query: 'cahokia mounds'
        }
      });
      const { data: { urls: { regular } } } = response;
      setImageUrl(regular);
    };
    fetchImageUrl();
  }, []);

  return (
    <div>
      <h1>Cahokia Mounds图片</h1>
      <img src={imageUrl} />
    </div>
  );
};

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

结论

在这个项目里，我们使用TypeScript编写了一个简单的React应用程序，来展示Cahokia Mounds图片。我们学习了如何在React中使用Hooks和使用Axios从Unsplash API获取图片数据。同时还介绍了如何使用Webpack打包我们的应用程序。希望这个项目能够帮助你学习TypeScript和React开发！