阿川私房教材：學程式，拿 offer！

63 個專案實戰，直接上手！
無需補習，按步驟打造你的面試作品。

立即解鎖你的轉職秘笈
小編精選 - 技術文章翻譯  ·  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留言 171瀏覽
共有 0 則留言
登入之後發表留言
小編精選 - 技術文章翻譯
精選技術文章翻譯，幫助開發者持續吸收新知。

阿川私房教材：學程式，拿 offer！

63 個專案實戰，直接上手！
無需補習，按步驟打造你的面試作品。

立即解鎖你的轉職秘笈
熱門文章
🔥 Docker 映像最佳化：減少大小、加快部署速度
🔥 如何縮小 Docker 映像大小
🔥 掌握 React 中的 SOLID 原則
🔥 適合練習專案的 7 個免費 API
🔥 你應該知道的 10 個 JavaScript 陣列方法
最新出爐作業包
⭐ 邁向資深之路：非同步 JS 訓練（二）—— 各種寫法的錯誤處理、收尾處理
⭐ 邁向資深之路：非同步 JS 訓練（一）—— 從 Callback Hell 到 Promise 介面
⭐ Github Desktop 新手入門教學 —— 用漂亮的 GUI 介面來學習 Git 基本觀念
⭐ 邁向資深之路：後端 JS 訓練（二）—— 玩玩看 Express，用純後端做做看部落格
⭐ 邁向資深之路：後端 JS 訓練（一）—— 玩玩看 Node，做做看老派 CLI 應用程式
熱門搜尋： '; ') 入門 改善 "; QA 作品 php part gpt Openai 媒體 onClick design ejs 取代 客製化 title 模仿 odf lara solid jqu pchun AWS spotify Entity React Context Ml' spring boot 演算法 vim M' React' sap 聊天機器人 rxjs css 邁向資深之路 中文 birdi github action 靜態網站 index.php 公司 react go 系列 開發 ui JS 網站 Carousel 巨大誤會 mantine 給OOP初學者的建議 repository rust HTML與CSS作業分享 Vue postgresql OOP Response app 結構 create Ml 工程師 前端 作業 課程 套件 JavaScript Node js ＣＳＳ javasc 新創 工作 html 第一 linux ul GIT git 搜尋 id module ar Java Can 伺服器 使用 後端 網頁 登入 vs json docke android
🛡️ 隱私及網站安全：本站註冊過程「不須提供任何個資」，只要 E-Mail 與帳密即可註冊，請安心註冊！線上付款過程使用「綠界科技 ECPay 」第三方專業金流廠商，全程在「綠界科技 ECPay 」網站進行付款程序，本站「不會紀錄任何信用卡資訊」，請放心付款、解鎖課程！您隨時可以透過 FB 粉專或者 Email 聯絡站長，請求刪除網站上的個人資料。