React Example

App.js

import React, {useEffect, useState} from 'react';

export default function App() {

    /**
     * States
     */
    const [_reps, setReps] = useState([]);

    /**
     * Effects
     */
    useEffect( () => {
        async function fetchData() {
            const response = await fetch('https://api.github.com/users/danielschmitz/repos');
            setReps(await response.json());
        }
        fetchData();
    }, [])

    useEffect( () => {
        const quantosfavoritos = _reps.filter(rep => rep.favorite).length
        document.title = `Você tem ${quantosfavoritos} favorito${quantosfavoritos===1?'':'s'}`
    }, [_reps])

    /**
     * Handlers
     */
    const handleFavButtonCLick = id => {
        console.log('fav', id);
        const newReps = _reps.map ( rep => {
            return rep.id === id ? {...rep, favorite: !rep.favorite} : rep
        })
        setReps(newReps)
    }


    /**
     * Components
     */
    const cIsFav = rep => (
        rep.favorite && '(F)'
    )

    const cFavButton = id => (
        <button onClick={() => handleFavButtonCLick(id)}>Fav {id}</button>
    )

    const cListagem = _reps.map(rep => {
        return <li key={rep.id}>{rep.name} {cIsFav(rep)} {cFavButton(rep.id)}</li>
    });

    /**
     * Main Component
     */
    return (
        <>
            <h1>Hello World</h1>
            <ul>{cListagem}</ul>
        </>
    );
}