小編精選 - 技術文章翻譯  ·  08月16日

適合練習專案的 7 個免費 API

適合練習專案的 7 個免費 API

基因組

1.Mapbox API 範例

Mapbox 提供全面的工具和準確的位置資料，您可以使用它們來建立地圖、導航服務和其他基於位置的應用程式。使用 Mapbox，您可以顯示自訂地圖、整合地理位置等等。

關聯

import React, { useEffect } from 'react';

const Mapbox = () => {
    useEffect(() => {
        // Set your Mapbox access token here
        const mapboxAccessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';

        // Create a map instance
        const map = new mapboxgl.Map({
            container: 'map', // Container ID in the HTML
            style: 'mapbox://styles/mapbox/streets-v11', // Style URL
            center: [-74.5, 40], // Starting position [lng, lat]
            zoom: 9, // Starting zoom
        });

        mapboxgl.accessToken = mapboxAccessToken;
    }, []);

    return (
        <div>
            <h2>Mapbox Example</h2>
            <div id="map" style={{ width: '100%', height: '400px' }}></div>
        </div>
    );
};

export default Mapbox;

2. NASA API 範例

NASA API 提供對與太空相關的大量資料的存取，包括圖像、視訊以及有關行星、恆星等的資訊。無論您是要建立教育工具還是只是想顯示有趣的空間資料，NASA 的 API 都是絕佳的資源。

關聯

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

const Nasa = () => {
    const [data, setData] = useState(null);

    useEffect(() => {
        axios.get('https://api.nasa.gov/planetary/apod?api_key=DEMO_KEY')
            .then(response => setData(response.data))
            .catch(error => console.error('Error fetching data from NASA API:', error));
    }, []);

    return (
        <div>
            <h2>NASA Astronomy Picture of the Day</h2>
            {data ? (
                <div>
                    <h3>{data.title}</h3>
                    <img src={data.url} alt={data.title} style={{ maxWidth: '100%' }} />
                    <p>{data.explanation}</p>
                </div>
            ) : (
                <p>Loading...</p>
            )}
        </div>
    );
};

export default Nasa;

3.最愛語錄 API 範例

此 API 提供了一系列富有洞察力的語錄，您可以輕鬆地將它們整合到您的應用程式中。它非常適合建立能夠激發和激勵用戶的應用程式。

關聯

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

const Quotes = () => {
    const [quote, setQuote] = useState('');

    useEffect(() => {
        axios.get('https://favqs.com/api/qotd')
            .then(response => setQuote(response.data.quote.body))
            .catch(error => console.error('Error fetching data from Quotes API:', error));
    }, []);

    return (
        <div>
            <h2>Quote of the Day</h2>
            <blockquote>{quote}</blockquote>
        </div>
    );
};

export default Quotes;

4. Edamam API 範例

Edamam 提供對食品和食譜的綜合資料庫以及詳細的健康分析的存取。該 API 非常適合建立飲食追蹤器、食譜應用程式和基於營養的應用程式。

關聯

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

const Edamam = () => {
    const [recipes, setRecipes] = useState([]);
    const query = "chicken"; // Example search query

    useEffect(() => {
        const appId = 'YOUR_EDAMAM_APP_ID';
        const appKey = 'YOUR_EDAMAM_APP_KEY';

        axios.get(`https://api.edamam.com/search?q=${query}&app_id=${appId}&app_key=${appKey}`)
            .then(response => setRecipes(response.data.hits))
            .catch(error => console.error('Error fetching data from Edamam API:', error));
    }, []);

    return (
        <div>
            <h2>Edamam Recipes for "{query}"</h2>
            <ul>
                {recipes.map((recipe, index) => (
                    <li key={index}>
                        <img src={recipe.recipe.image} alt={recipe.recipe.label} width="50" />
                        {recipe.recipe.label}
                    </li>
                ))}
            </ul>
        </div>
    );
};

export default Edamam;

5.假商店 API 範例

對於從事電子商務專案的開發人員來說，Fake Store API 是一個很棒的工具。它提供偽真實資料，您可以使用這些資料在商店中填充產品、價格和類別。

關聯

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

const FakeStore = () => {
    const [products, setProducts] = useState([]);

    useEffect(() => {
        axios.get('https://fakestoreapi.com/products')
            .then(response => setProducts(response.data))
            .catch(error => console.error('Error fetching data from Fake Store API:', error));
    }, []);

    return (
        <div>
            <h2>Fake Store Products</h2>
            <ul>
                {products.map(product => (
                    <li key={product.id}>
                        <img src={product.image} alt={product.title} width="50" />
                        {product.title}
                    </li>
                ))}
            </ul>
        </div>
    );
};

export default FakeStore;

6.神奇寶貝 API 範例

Pokémon API (PokeAPI) 是所有 Pokémon 粉絲的必備工具。它提供所有神奇寶貝的全面資料，包括統計資料、類型和能力，非常適合建立神奇寶貝相關的應用程式和遊戲。

關聯

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

const Pokemon = () => {
    const [pokemonList, setPokemonList] = useState([]);

    useEffect(() => {
        axios.get('https://pokeapi.co/api/v2/pokemon?limit=10')
            .then(response => setPokemonList(response.data.results))
            .catch(error => console.error('Error fetching data from Pokémon API:', error));
    }, []);

    return (
        <div>
            <h2>Pokémon List</h2>
            <ul>
                {pokemonList.map((pokemon, index) => (
                    <li key={index}>
                        {pokemon.name}
                    </li>
                ))}
            </ul>
        </div>
    );
};

export default Pokemon;

7.IGDB API 範例

網路遊戲資料庫 (IGDB) API 提供數千種視訊遊戲的資料，使您可以建立以視訊遊戲為導向的網站和應用程式。您可以獲得有關遊戲、平台、類型等的資訊。

關聯

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

const IGDB = () => {
    const [games, setGames] = useState([]);

    useEffect(() => {
        const apiKey = 'YOUR_IGDB_API_KEY';

        axios.post('https://api.igdb.com/v4/games/', 
        'fields name, cover.url; sort popularity desc; limit 10;', 
        { headers: { 'Client-ID': 'YOUR_CLIENT_ID', 'Authorization': `Bearer ${apiKey}` } })
            .then(response => setGames(response.data))
            .catch(error => console.error('Error fetching data from IGDB API:', error));
    }, []);

    return (
        <div>
            <h2>Popular Video Games</h2>
            <ul>
                {games.map(game => (
                    <li key={game.id}>
                        {game.cover ? <img src={game.cover.url} alt={game.name} width="50" /> : null}
                        {game.name}
                    </li>
                ))}
            </ul>
        </div>
    );
};

export default IGDB;

結論

每個範例都展示如何將對應的 API 整合到 React, Next 中。您可以輕鬆擴展這些範例以滿足您的應用程式的需求，無論是顯示更詳細的資訊、處理使用者互動還是設計輸出以獲得更好的使用者體驗。

這些範例示範了從各種免費 API 取得和顯示資料是多麼簡單。

原文出處：https://dev.to/vyan/7-free-apis-for-your-next-projects-50n3

0個讚   0留言 88瀏覽
共有 0 則留言
登入之後發表留言
小編精選 - 技術文章翻譯
精選技術文章翻譯，幫助開發者持續吸收新知。
熱門文章
🔥 比較頂級 React 框架
🔥 了解 Linux 檔案系統
🔥 獨立創業者可以跟這些對象&社群學習
🔥 Axios 與 API 管理簡介
🔥 優化 Docker 映像的大小和安全性
最新出爐作業包
⭐ 邁向資深之路：非同步 JS 訓練（二）—— 各種寫法的錯誤處理、收尾處理
⭐ 邁向資深之路：非同步 JS 訓練（一）—— 從 Callback Hell 到 Promise 介面
⭐ Github Desktop 新手入門教學 —— 用漂亮的 GUI 介面來學習 Git 基本觀念
⭐ 邁向資深之路：後端 JS 訓練（二）—— 玩玩看 Express，用純後端做做看部落格
⭐ 邁向資深之路：後端 JS 訓練（一）—— 玩玩看 Node，做做看老派 CLI 應用程式
熱門搜尋： 使用 開發 git 專案 工作 學習 分享 技術 COM api ul 網站 AI jav 第一 id Ai JS 清單 javascript for ui Github ＣＳＳ 結構 AWS JavaScript github Git API 語言 作業 html java 主題 HTML 開源 部署 工程師 測試 資料庫 前端 Java 作為 GIT 系列 Javascript create javasc react Html bi node 套件 搜尋 遊戲 with %' CD React 練習 架構 user REACT this 編輯 聊天 oop 網頁 謝謝 部落格 json 課程 分析 查詢 非同步 Node 研究 Line 乾淨 class python 入門 排序 vs fetch app 回答 JavaScript 系列 local npm JAVA 新創 後端 model import ") Python 登入 演算法
🛡️ 隱私及網站安全：本站註冊過程「不須提供任何個資」，只要 E-Mail 與帳密即可註冊，請安心註冊！線上付款過程使用「綠界科技 ECPay 」第三方專業金流廠商，全程在「綠界科技 ECPay 」網站進行付款程序，本站「不會紀錄任何信用卡資訊」，請放心付款、解鎖課程！您隨時可以透過 FB 粉專或者 Email 聯絡站長，請求刪除網站上的個人資料。