1. Exemple d'API Mapbox

Mapbox propose des outils complets et des données de localisation précises que vous pouvez utiliser pour créer des cartes, des services de navigation et d'autres applications basées sur la localisation. Avec Mapbox, vous pouvez afficher des cartes personnalisées, intégrer la géolocalisation et bien plus encore.
Lien

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. Exemple d'API de la NASA

L'API de la NASA donne accès à une multitude de données liées à l'espace, notamment des images, des vidéos et des informations sur les planètes, les étoiles, etc. Que vous souhaitiez créer un outil pédagogique ou simplement afficher des données spatiales fascinantes, l'API de la NASA est une excellente ressource.
Lien

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. Exemple d'API de citations préférées

Cette API propose une collection de citations perspicaces que vous pouvez facilement intégrer dans votre application. C'est parfait pour créer des applications qui inspirent et motivent les utilisateurs.
Lien

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. Exemple d'API Edamam

Edamam donne accès à une base de données complète d'aliments et de recettes, ainsi qu'à des analyses de santé détaillées. Cette API est idéale pour créer des trackers de régime, des applications de recettes et des applications basées sur la nutrition.
Lien

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. Exemple d'API de faux magasin

L'API Fake Store est un outil fantastique pour les développeurs travaillant sur des projets de commerce électronique. Il fournit des données pseudo-réelles que vous pouvez utiliser pour remplir votre boutique avec des produits, des prix et des catégories.
Lien

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. Exemple d'API Pokémon

L'API Pokémon (PokeAPI) est un incontournable pour tout fan de Pokémon. Il offre des données complètes sur tous les Pokémon, y compris leurs statistiques, leurs types et leurs capacités, ce qui le rend parfait pour créer des applications et des jeux liés aux Pokémon.
Lien

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. Exemple d'API IGDB

L'API Internet Games Database (IGDB) fournit des données sur des milliers de jeux vidéo, vous permettant de créer des sites Web et des applications orientés jeux vidéo. Vous pouvez récupérer des informations sur les jeux, les plateformes, les genres et bien plus encore.
Lien

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;

Conclusion

Chacun de ces exemples montre comment intégrer les API respectives dans un React, Next. Vous pouvez facilement étendre ces exemples pour répondre aux besoins de votre application, qu'il s'agisse d'afficher des informations plus détaillées, de gérer les interactions des utilisateurs ou de styliser la sortie pour une meilleure UX.

Ces exemples démontrent à quel point il est simple de récupérer et d'afficher des données à partir de diverses API gratuites.