ree API untuk Projek Anda Seterusnya

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;

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;

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;

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;

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;

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;

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;