小編精選 - 技術文章翻譯  ·  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留言 145瀏覽
共有 0 則留言
登入之後發表留言
小編精選 - 技術文章翻譯
精選技術文章翻譯，幫助開發者持續吸收新知。
熱門文章
🔥 好玩的資安學習方式：CTF 與入門指南！
🔥 Angular 18 的新增功能
🔥 我如何在處理多個專案時提高工作效率
🔥 使用 Python 和 Pytest 自動化 API 測試
🔥 給寫完 JavaScript 系列九的同學們：求職前的準備＆簡易指南
最新出爐專案包
⭐ 邁向資深之路：非同步 JS 訓練（二）—— 各種寫法的錯誤處理、收尾處理
⭐ 邁向資深之路：非同步 JS 訓練（一）—— 從 Callback Hell 到 Promise 介面
⭐ Github Desktop 新手入門教學 —— 用漂亮的 GUI 介面來學習 Git 基本觀念
⭐ 邁向資深之路：後端 JS 訓練（二）—— 玩玩看 Express，用純後端做做看部落格
⭐ 邁向資深之路：後端 JS 訓練（一）—— 玩玩看 Node，做做看老派 CLI 應用程式
熱門搜尋： 使用 開發 工作 專案 分享 ar 技術 for 網站 github id 學習 API 作為 Ml 作業 第一 js 測試 AI java html Javascript 搜尋 HTML javascript Git Java git app JAVA javasc %' 前端 api JavaScript 開源 系列 ui 語言 user jav 網頁 COM ul CD url 套件 架構 結構 ci py 框架 Line css ＣＳＳ AWS 清單 後端 編輯 go GIT 研究 Can Node Ai 主題 bi 工程師 部署 react 伺服器 資料庫 console REACT this Github 遊戲 create aws with JS 部落格 json component Javas 查詢 新手 分析 CSS 登入 Python class node 練習 新創 入門 乾淨 課程 design
🛡️ 隱私及網站安全：本站註冊過程「不須提供任何個資」，只要 E-Mail 與帳密即可註冊，請安心註冊！線上付款過程使用「綠界科技 ECPay 」第三方專業金流廠商，全程在「綠界科技 ECPay 」網站進行付款程序，本站「不會紀錄任何信用卡資訊」，請放心付款、解鎖課程！您隨時可以透過 FB 粉專或者 Email 聯絡站長，請求刪除網站上的個人資料。