Drei APIs für Ihre nächsten Projekte

1. Mapbox-API-Beispiel

Mapbox bietet umfassende Tools und genaue Standortdaten, die Sie zum Erstellen von Karten, Navigationsdiensten und anderen standortbasierten Anwendungen verwenden können. Mit Mapbox können Sie benutzerdefinierte Karten anzeigen, Geolokalisierung integrieren und vieles mehr.
Link

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-Beispiel

Die NASA-API bietet Zugriff auf eine Fülle von weltraumbezogenen Daten, darunter Bilder, Videos und Informationen über Planeten, Sterne und mehr. Egal, ob Sie ein Lehrmittel erstellen oder einfach nur faszinierende Weltraumdaten anzeigen möchten, die API der NASA ist eine hervorragende Ressource.
Link

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-Beispiel für Lieblingszitate

Diese API bietet eine Sammlung aufschlussreicher Zitate, die Sie problemlos in Ihre Anwendung integrieren können. Es eignet sich perfekt zum Erstellen von Apps, die Benutzer inspirieren und motivieren.
Link

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-Beispiel

Edamam bietet Zugriff auf eine umfassende Datenbank mit Lebensmitteln und Rezepten sowie detaillierte Gesundheitsanalysen. Diese API eignet sich ideal zum Erstellen von Diät-Trackern, Rezept-Apps und ernährungsbasierten Anwendungen.
Link

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. Beispiel für eine Fake-Store-API

Die Fake Store API ist ein fantastisches Tool für Entwickler, die an E-Commerce-Projekten arbeiten. Es stellt pseudoechte Daten bereit, die Sie verwenden können, um Ihren Shop mit Produkten, Preisen und Kategorien zu füllen.
Link

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. Pokémon-API-Beispiel

Die Pokémon-API (PokeAPI) ist ein Muss für jeden Pokémon-Fan. Es bietet umfassende Daten zu allen Pokémon, einschließlich Statistiken, Typen und Fähigkeiten, und eignet sich daher perfekt für die Entwicklung von Pokémon-bezogenen Apps und Spielen.
Link

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-Beispiel

Die Internet Games Database (IGDB) API stellt Daten zu Tausenden von Videospielen bereit und ermöglicht Ihnen die Erstellung von Websites und Anwendungen, die sich an Videospielen orientieren. Sie können Informationen zu Spielen, Plattformen, Genres und mehr abrufen.
Link

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;

Abschluss

Jedes dieser Beispiele zeigt, wie man die jeweiligen APIs in einen React, Next integriert. Sie können diese Beispiele problemlos erweitern, um sie an die Anforderungen Ihrer Anwendung anzupassen, sei es die Anzeige detaillierterer Informationen, die Handhabung von Benutzerinteraktionen oder die Gestaltung der Ausgabe für eine bessere UX.

Diese Beispiele zeigen, wie einfach es ist, Daten von verschiedenen kostenlosen APIs abzurufen und anzuzeigen.

Das obige ist der detaillierte Inhalt vonDrei APIs für Ihre nächsten Projekte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!