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 (
        

            
Mapbox Example
            

        
    );
};

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 entwickeln 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 (
        

            
NASA Astronomy Picture of the Day
            {data ? (
                

                    
{data.title}
                    
{data.explanation}
                
            ) : (
                
Loading...
            )}
        
    );
};

export default Nasa;

3. API-Beispiel für Lieblingszitate

Diese API bietet eine Sammlung aufschlussreicher Angebote, 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 (
        

            
Quote of the Day
            
{quote}
        
    );
};

export default Quotes;

4. Edamam-API-Beispiel

Edamam bietet Zugriff auf eine umfassende Datenbank mit Lebensmitteln und Rezepten sowie detaillierte Gesundheitsanalysen. Diese API ist ideal für die Erstellung 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 (
        

            
Edamam Recipes for "{query}"
            

                {recipes.map((recipe, index) => (
                    

                        
                        {recipe.recipe.label}
                    
                ))}
            
    );
};

export default Edamam;

5. Fake Store API-Beispiel

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 (
        

            
Fake Store Products
            

                {products.map(product => (
                    

                        
                        {product.title}
                    
                ))}
            
    );
};

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 (
        

            
Pokémon List
            

                {pokemonList.map((pokemon, index) => (
                    

                        {pokemon.name}
                    
                ))}
            
    );
};

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 für Videospiele. 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 (
        

            
Popular Video Games
            

                {games.map(game => (
                    

                        {game.cover ?  : null}
                        {game.name}
                    
                ))}
            
    );
};

export default IGDB;

Abschluss

Jedes dieser Beispiele zeigt, wie man die jeweiligen APIs in einen React, Next integriert. Sie können diese Beispiele ganz einfach 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.