ree API untuk Projek Anda Seterusnya

1. Contoh API Peti Peta

Mapbox menawarkan alatan yang komprehensif dan data lokasi tepat yang boleh anda gunakan untuk membuat peta, perkhidmatan navigasi dan aplikasi berasaskan lokasi lain. Dengan Mapbox, anda boleh memaparkan peta tersuai, menyepadukan geolokasi dan banyak lagi.
Pautan

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. Contoh API NASA

API NASA menyediakan akses kepada banyak data yang berkaitan dengan angkasa, termasuk imej, video dan maklumat tentang planet, bintang dan banyak lagi. Sama ada anda sedang membina alat pendidikan atau hanya mahu memaparkan data angkasa yang menarik, API NASA ialah sumber yang sangat baik.
Pautan

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. Contoh API Petikan Kegemaran

API ini menawarkan koleksi petikan bernas yang boleh anda sepadukan dengan mudah ke dalam aplikasi anda. Ia sesuai untuk mencipta apl yang memberi inspirasi dan motivasi kepada pengguna.
Pautan

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. Contoh API Edamam

Edamam menyediakan akses kepada pangkalan data komprehensif item makanan dan resipi, bersama-sama dengan analisis kesihatan terperinci. API ini sesuai untuk mencipta penjejak diet, apl resipi dan aplikasi berasaskan pemakanan.
Pautan

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. Contoh API Kedai Palsu

API Kedai Palsu ialah alat yang hebat untuk pembangun yang mengusahakan projek e-dagang. Ia menyediakan data pseudo-sebenar yang boleh anda gunakan untuk mengisi kedai anda dengan produk, harga dan kategori.
Pautan

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. Contoh Pokemon API

API Pokémon (PokeAPI) mesti dimiliki oleh mana-mana peminat Pokémon. Ia menawarkan data komprehensif tentang semua Pokémon, termasuk statistik, jenis dan kebolehan, menjadikannya sempurna untuk membina apl dan permainan berkaitan Pokémon.
Pautan

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. Contoh API IGDB

API Pangkalan Data Permainan Internet (IGDB) menyediakan data tentang beribu-ribu permainan video, membolehkan anda membuat tapak web dan aplikasi berorientasikan permainan video. Anda boleh mendapatkan maklumat tentang permainan, platform, genre dan banyak lagi.
Pautan

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;

Kesimpulan

Setiap contoh ini menunjukkan cara untuk menyepadukan API masing-masing ke dalam React, Next. Anda boleh memanjangkan contoh ini dengan mudah agar sesuai dengan keperluan aplikasi anda, sama ada memaparkan maklumat yang lebih terperinci, mengendalikan interaksi pengguna atau menggayakan output untuk UX yang lebih baik.

Contoh ini menunjukkan betapa mudahnya untuk mengambil dan memaparkan data daripada pelbagai API percuma.

Atas ialah kandungan terperinci ree API untuk Projek Anda Seterusnya. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!