How to transfer a project to React (on a Bitrix project)?

Question

1C-Bitrix

At the moment, the project uses: native js, bitrix (and php of course)
We don’t like how the frontend and backend interact now (front and back are in different repositories and we want everything to be in one place. If something changes on the front, then we have to transfer compiled js and css files, which is inconvenient for us)
We are thinking how to optimize the work of the frontend and backend.
There was a proposal to translate the project to React.
I think how to do it, because writing a react project from scratch is one thing, but it seems to me that converting an existing project to react is another.
I don't have a full idea of ​​how it will be yet. There are a lot of weird things.
1) For example now, the data is rendered using php.
But if we transfer the project to react, how will we write php in it?
After all, the react syntax ( jsx ) does not provide for php.
And there are sections that you don’t even want to touch - just copy php and paste. But how does this happen in React?
2) And one more thing: the project is quite large. And it seems to me that it’s not so easy to take a week and transfer the project to React. Probably we will translate parts.
Those. it turns out that one part of the project will be written in react, and the other will not? How is that at all?
Anyone have similar or similar experience? What do you advise? How to competently transfer the project to react in this case?

Answer 1

But if we transfer the project to react, how will we write php in it?

What does this even mean? PHP is your server side, and React is a client application .... Damn, I don’t even know what to ask next ... are you going to execute PHP in a browser or JS with a PHP interpreter?
This is a question that makes little more than completely meaningless.
And what about the syntax? The runtime does not provide php, but you are talking about syntax.
If this is a medium-sized site, then you need to lay down not a week, but several months.
And what is not clear here? Well, first implement one page on react, the simplest one in a separate site template. You will have one template used for converted URLs, and for non-altered URLs, the other one - without react. I don't see any problem.
I wrote above:
1 First, you develop a template for one section of the site on React, since other sections simply do not exist.
2 Write the appropriate backend that will give data for this template of yours.
3 Translate this section of the site to React.
4 Exploit the week, cleaning the jambs.
5 Choose another smaller section of the site and translate it in the same way.
6 At this point, you should already have an understanding of where you have overlapped with the architecture, what crutches have accumulated, and what are the fundamental flaws in what you have done. Here you must stop and throw away everything that you have done before. I'm not kidding - just throw it away and start reworking these sections from scratch...
7 Now you know what to do next.

Answer 2

That's right, the person above wrote. I will add. Your Bitrix component templates must provide initial data for subsequent rendering of the page on the client side. I am not familiar with React, but I suspect that it receives data via json. Those. the task boils down to the fact that the template of the Bitrix component gave json, and React understood it. Create a new site template, without visual data, and include it with a GET condition, for example react=Y. And read the comment above.

Answer 3

We do not like how the frontend and backend interact now (front and back are in different repositories and we want everything to be in one place.

Connect the repository with submodule layout to the main repository, and put symlinks on the css and js files on the server.
https://git-scm.com/book/en/v2/%D0%98%D0%BD%D1%81%...