コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > 本文

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

WBOY
リリース： 2024-08-13 12:48:02
オリジナル
922 人が閲覧しました

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;
ログイン後にコピー

結論

これらの各例は、それぞれの API を React、Next に統合する方法を示しています。これらの例は、より詳細な情報の表示、ユーザー操作の処理、UX を向上させるための出力のスタイルなど、アプリケーションのニーズに合わせて簡単に拡張できます。

これらの例は、さまざまな無料 API からデータを取得して表示することがいかに簡単であるかを示しています。

以上が次のプロジェクトのための ree APIの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース：dev.to
前の記事：GraphQL と React でアプリの効率を高める: ディープダイブ 次の記事：すべてのフロントエンド開発者が従うべきベストプラクティス
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
2
1870
Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
10
2036
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
1713
親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
1
1614
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1627
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート