Relier App ReactJS à CMS headless

Bonjour, est-ce que tu ne peux pas te servir du CMS headless uniquement pour fournir l'API (donc il ne distribue pas les fichiers de l'application client) puis déployé l'application client a part (par exemple si tu utilises Heroku pour héberger l'application, tu hébergerais deux applications une qui contient l'API donc le CMS Headless et l'autre qui contient l'application front-end donc l'application React.js)
Puis avec l'application React.js, tu consommes l'API via des requêtes réseaux
MDN fetch API Guide.
La documentation de Strapi propose une implémentation de React.js sous cet forme-là.
Strapi integrations React.js

Pour illustré si dans le composant Article tu as besoin de demander un article à ton API tu pourrais le faire de cette façon-là:

import React from 'react';

const Article = ({id}) => {

    const [article, setArticle] = React.useState(null);

    // fetch l'article sur l'API
    React.useEffect(() => {
        fetch(`http://localhost:1337/api/article/${id}`, {
            method: "GET",
            headers: {
                "Accept": "application/json"
            }
         })
         .then(response => response.json())
         .then(articleJson => {
            setArticle(articleJson);
         })
         .catch(error => {
            console.warn("Oops, l'article ne peut pas être récupéré: ", error.message);
         })
    }, []);

    // aucune valeur pour le state article (il et entrain d'être récuperer via la requête réseaux).
    if(!article) {
        return <p>Loading article ...</p>
    }

    // affiche les données de l'article:
    return (
        <div>
            <h1>{article.title}</h1>

            <p>{article.content}</p>

            {# ... #}
            {# ... #}
        </div>
    );

}

export default Article;

Le côté un peu non-pratique c'est que tu te retrouves avec deux applications à gérer,
mais tu as aussi l'avantage que les applications sont découplées,
tu peu par exemple imaginer une deuxième interface (pour mobile où application de bureau par exemple),
qui consommerait la même API.

Dans un cas plus en lien avec ton application,
tu as un composant Contact, qui présente un formulaire de contact et une fonction qui écoute la soumission du formulaire,
qui pour l'instant ce contente de loggé les données envoyées:

    const handleSubmit = (event) => {
        console.log(`
            Name: ${name}
            prénom: ${firstname}
            Email: ${email}
            Country: ${country}
        `);

        event.preventDefault();
      }

Si c'est ton API Headless qui doit validé/stocké les données du formulaire,
ici tu pourrait envoyer une requête réseaux de la même façon qu'avec le composant illustratif Article

     const handleSubmit = (event) => {
        console.log(`
            Name: ${name}
            prénom: ${firstname}
            Email: ${email}
            Country: ${country}
        `);

        event.preventDefault();

        fetch("http://localhost:1337/api/contact", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "Accept": "application/json"
            },
            body: JSON.stringify({name, firstname, email, country})
        })
        .then(response => response.json())
        .then(responseJson => {
            console.info(responseJson);
        })
        .catch(error => {
            console.warn("Oops, la requête à echoué avec: " + error.message);
        })
      }

A noter que dans une application React.js lorsque qu'on envoie une requête réseau comme dans les codes illustratif que j'ai montré, il faudrait utiliser un AbortController pour pouvoir annulé la requête si le composant ce fait démonté de l'arbre avant que la requête n'est aboutie, le problème si on le fait pas c'est que la réponse de la requête peut être traitée par notre composant "out of tree" et le composant va essayer de mettre à jour sont état local alors qu'il est démonté, ce qui provoquera une erreur Can't perform a React state update on an unmounted component

aaah déjà j'y vois plus clair merci beaucoup !! Alors c'est normal que les CMS me créer une sorte de 2ème App qui va en faite s'occuper de gérer le back si j'ai bien compris. Je viens d'installer Strapi qui sera héberger aussi sur Heroku. J'ai créer mes collections et quelques contenu et si j'ai bien compris je peux remplacer mon chemin vers mon json par un chemin vers http://localhost:1337/api/article/${id} par exemple.
Bon je vais tester déjà ça... :) merciiii . Par contre j'arrive a trouver mes collections (src/api/portfolio/content-types) mais je n'arrive pas à trouver, dans les les fichiers, les contenu que j'ai créer. où sont-il sauvegarder ?