1. मैपबॉक्स एपीआई उदाहरण

मैपबॉक्स व्यापक उपकरण और सटीक स्थान डेटा प्रदान करता है जिसका उपयोग आप मानचित्र, नेविगेशन सेवाएं और अन्य स्थान-आधारित एप्लिकेशन बनाने के लिए कर सकते हैं। मैपबॉक्स के साथ, आप कस्टम मानचित्र प्रदर्शित कर सकते हैं, जियोलोकेशन एकीकृत कर सकते हैं और बहुत कुछ कर सकते हैं।
जोड़ना

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. नासा एपीआई उदाहरण

नासा एपीआई अंतरिक्ष से संबंधित ढेर सारे डेटा तक पहुंच प्रदान करता है, जिसमें चित्र, वीडियो और ग्रहों, तारों आदि के बारे में जानकारी शामिल है। चाहे आप एक शैक्षिक उपकरण बना रहे हों या केवल आकर्षक अंतरिक्ष डेटा प्रदर्शित करना चाहते हों, नासा का एपीआई एक उत्कृष्ट संसाधन है।
जोड़ना

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. पसंदीदा उद्धरण एपीआई उदाहरण

यह एपीआई व्यावहारिक उद्धरणों का एक संग्रह प्रदान करता है जिसे आप आसानी से अपने एप्लिकेशन में एकीकृत कर सकते हैं। यह ऐसे ऐप्स बनाने के लिए एकदम सही है जो उपयोगकर्ताओं को प्रेरित और प्रेरित करते हैं।
जोड़ना

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. एडाम एपीआई उदाहरण

एडामम विस्तृत स्वास्थ्य विश्लेषण के साथ-साथ खाद्य पदार्थों और व्यंजनों के व्यापक डेटाबेस तक पहुंच प्रदान करता है। यह एपीआई आहार ट्रैकर, रेसिपी ऐप्स और पोषण-आधारित एप्लिकेशन बनाने के लिए आदर्श है।
जोड़ना

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. नकली स्टोर एपीआई उदाहरण

फेक स्टोर एपीआई ई-कॉमर्स परियोजनाओं पर काम करने वाले डेवलपर्स के लिए एक शानदार टूल है। यह छद्म-वास्तविक डेटा प्रदान करता है जिसका उपयोग आप अपने स्टोर को उत्पादों, कीमतों और श्रेणियों से भरने के लिए कर सकते हैं।
जोड़ना

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. पोकेमॉन एपीआई उदाहरण

पोकेमॉन एपीआई (पोकेएपीआई) किसी भी पोकेमॉन प्रशंसक के लिए जरूरी है। यह आँकड़े, प्रकार और क्षमताओं सहित सभी पोकेमॉन पर व्यापक डेटा प्रदान करता है, जो इसे पोकेमॉन-संबंधित ऐप्स और गेम बनाने के लिए एकदम सही बनाता है।
जोड़ना

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. आईजीडीबी एपीआई उदाहरण

इंटरनेट गेम्स डेटाबेस (आईजीडीबी) एपीआई हजारों वीडियो गेम पर डेटा प्रदान करता है, जिससे आप वीडियो गेम-उन्मुख वेबसाइट और एप्लिकेशन बना सकते हैं। आप गेम, प्लेटफ़ॉर्म, शैलियों और बहुत कुछ के बारे में जानकारी प्राप्त कर सकते हैं।
जोड़ना

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;

निष्कर्ष

इनमें से प्रत्येक उदाहरण दिखाता है कि संबंधित एपीआई को रिएक्ट, नेक्स्ट में कैसे एकीकृत किया जाए। आप अपने एप्लिकेशन की आवश्यकताओं को पूरा करने के लिए इन उदाहरणों को आसानी से विस्तारित कर सकते हैं, चाहे वह अधिक विस्तृत जानकारी प्रदर्शित करना हो, उपयोगकर्ता इंटरैक्शन को संभालना हो, या बेहतर यूएक्स के लिए आउटपुट को स्टाइल करना हो।

ये उदाहरण दर्शाते हैं कि विभिन्न निःशुल्क एपीआई से डेटा प्राप्त करना और प्रदर्शित करना कितना सरल है।