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 images, 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 me 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 route 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 a lot

CodePudding user response：

Update

Since I am relatively sure that some will feel as I did when switching to REACT to this supposedly simple but at first conceptually confusing change:

The solution is: for content to be loaded asynchronously - NO CONTENT VIA API / JSON BUT hideously normal HTML suffix files::

BrowserRouter / React Router

is the solution.

In retrospect this seems ridiculously logical to me now, but in case it's like others like me, to whom this nevertheless very bloated effort in React seems unrealistic, because it was quite simple to do in the classic way with a few lines of code.

Also the fact that the formally until then relatively compact REACT version of the own project must be split into MANY more components than one can really like, one understands the principle behind it then all the better.

Why hooks are not suitable in my current experience:

• useEffect must return an array. It should be possible, but the additional effort to split, filter and reassign the array according to the contents - when everything would be already structured in an HTML file - seems justifiably excessive.

componentDidMount and Hooks seem to be conceptually focused on JSON, objects in general and arrays.