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 (
        

            
Mapbox Example
            

        
    );
};

export default Mapbox;

2. Пример API НАСА

API НАСА обеспечивает доступ к огромному количеству данных, связанных с космосом, включая изображения, видео и информацию о планетах, звездах и многом другом. Создаете ли вы образовательный инструмент или просто хотите продемонстрировать увлекательные космические данные, 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 (
        

            
NASA Astronomy Picture of the Day
            {data ? (
                

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

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 (
        

            
Quote of the Day
            
{quote}
        
    );
};

export default Quotes;

4. Пример 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 (
        

            
Edamam Recipes for "{query}"
            

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

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

export default Edamam;

5. Пример API фейкового магазина

API Fake Store — это фантастический инструмент для разработчиков, работающих над проектами электронной коммерции. Он предоставляет псевдореальные данные, которые вы можете использовать для наполнения вашего магазина продуктами, ценами и категориями.
Связь

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. Пример API Pokémon

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

            
Pokémon List
            

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

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

export default Pokemon;

7. Пример API IGDB

API базы данных интернет-игр (IGDB) предоставляет данные о тысячах видеоигр, что позволяет создавать веб-сайты и приложения, ориентированные на видеоигры. Вы можете получить информацию об играх, платформах, жанрах и многом другом.
Связь

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;

Заключение

Каждый из этих примеров показывает, как интегрировать соответствующие API в React, Next. Вы можете легко расширить эти примеры в соответствии с потребностями вашего приложения, будь то отображение более подробной информации, обработка взаимодействия с пользователем или стилизация вывода для улучшения UX.

Эти примеры демонстрируют, насколько просто получать и отображать данные из различных бесплатных API.