How to load classic AJAX / asynchronous content from my root with REACT -NOT JSON or just images

cloudytechi147 · October 2021

I'm still new to React, I've done a lot of tutorials and now I'm getting to the practical part. I am translating a classic DEV environment into React as an exercise. This consisted of PHP, vanilla JS, a little jQuery, animations, and transitions with GSAP.

I was able to translate everything so far already into a local React-Dev environment and it all works so far.

My problem: In the original project I use a quite classic JS Async / Await Function to load local content (no JSON or just Image tag HTML via PHP-files) into a predefined view area :

async function getText(file) {
    let myObject = await fetch(file);
    let myText = await myObject.text();
    document.getElementById('view').innerHTML = myText;
} 
...

and then:

someLinkArray.forEach((el,i) => {
        el.addEventListener('click', (e) => {
            e.preventDefault();
            return getText(`/projekt-${i+1}.php`);
        });
    });

Works fine, nothing more is needed for this situation

At the point to take it into React now I am now unfortunately lost.

After I already looked at some search results, I can not exclude a basic understanding problem and here I would need help, please.

The options for my situation are by all appearances

Hooks (useEffect): here seems to be the approach and the need for the implementation greatly exaggerated, although of course, this is my first impression as a React newbie.

In the explicit context of AJAX for the following options of the often mentioned:

componentDidMount I remember from the tutorial phase that this was the original concept and before I got involved with React I got the launch of hooks along the way. Has "componentDidMount" now been completely replaced by Hooks or is it still useful for this approach?

Above all, I know that declarative implementation of React and asynchronicity belong to the USP of React.

So is it a comprehension issue after all and the PHP or HTML files should be created as a component and then called via React's router methodology? I remember that I found the routing chapter for React very disturbing. But in principle, I can understand that the architecture of a JS framework is forced to follow other ways.

Nonetheless, what is the official approach for this classic technique?

Thanks in advance