次のプロジェクトのための ree API-jsチュートリアル-php.cn

次のプロジェクトのための ree API

WBOY

リリース： 2024-08-13 12:48:02

オリジナル

954 人が閲覧しました

ree APIs for Your Next Projects

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 は、e コマースプロジェクトに取り組む開発者にとって素晴らしいツールです。これは、ストアに製品、価格、カテゴリを設定するために使用できる疑似実データを提供します。
リンク

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) は、ポケモンファンにとって必須のツールです。ステータス、タイプ、能力など、すべてのポケモンに関する包括的なデータが提供されるため、ポケモン関連のアプリやゲームの構築に最適です。
リンク

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 は、何千ものビデオゲームに関するデータを提供し、ビデオゲーム指向の Web サイトやアプリケーションを作成できるようにします。ゲーム、プラットフォーム、ジャンルなどに関する情報を取得できます。
リンク

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;

ログイン後にコピー