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;
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;
此 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;
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;
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;
神奇寶貝 API (PokeAPI) 是任何神奇寶貝粉絲的必備工具。它提供所有神奇寶貝的全面數據，包括統計數據、類型和能力，非常適合建立神奇寶貝相關的應用程式和遊戲。
連結
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;
網路遊戲資料庫 (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 取得和顯示資料是多麼簡單。
以上是適合您下一個專案的 API的詳細內容。更多資訊請關注PHP中文網其他相關文章！
