How to code with ReactJS?

Question

React

Hello,
For a long time I was engaged in classic layout (10 static html pages, a template engine, a preprocessor, a sheet in custom.js)
I decided to use React, and the first problem I encountered, all the documentation / videos come down to:

• we need one html document in which there will be only one block, as well as one js file in which we will write a beautiful SPA with a thousand lines of html markup in a js file and spit it all into a single tag of our html document
  
• let's make a multi-star application by using routing and adding another thousand lines to our js file
  

Please explain if I need to prepare 3 templates (conditionally: home, contacts, about us).

1. I create them, and each of them contains one tag. Well, or static information (which makes no sense to pass through js), as well as tags with id (one is used everywhere, but as I understand it, you can do as much as you like) into which we will spit out interactive elements through render.
   
2. In each of these html documents, app.js is connected into which we import, for example, 3 modules (the above mentioned pages).
   
3. In each of these modules, we describe the necessary classes and use ReactDOM.render to render them according to the necessary IDs in our template.
   

Something like this?
I would be grateful if someone corrects my vision of this process, or shares lessons where a more extensive architecture is considered than in the SPA tutorials.
Here is the question.
For a situation where you need to render two components in different places on the page, we don’t need to duplicate ReactDOM.render

ReactDOM.render( <Content/> ,
  document.getElementById('root')
);
ReactDOM.render( <Footer/> ,
  document.getElementById('footer')
);

Can this piece of code be written more compactly?

Answer 1

The essence of React is that its architecture is based on components. As in Lego, everything is assembled from bricks.
Next, the top-level component is rendered to some element on the page. Different components can be rendered into different elements, no one forbids this.
You also need to clearly understand that the philosophy of React is to generate markup dynamically when the state (state) changes. Classically, the state is stored locally in each component, but this is often inconvenient, so they came up with Flux, one of the incarnations of which is, to some extent, Redux - a kind of centralized state storage, with buns and ballerinas.
As far as I know, React does not impose any paradigms and coexists perfectly on the same page with anything, so, in principle, you can only edit the most necessary things, and file the rest the old fashioned way...

Answer 2

>> or static information (which does not make sense to pass through js)
For such situations, a component is usually created <StaticInformation page="page1" />, in which, for example, using componentDidMount(), a div is filled with information received using a post/get request.
>> tutorials where more extensive architecture is covered than in SPA tutorials
https://www.youtube.com/watch?v=MhkGQAoc7bc&list=P... - the most adequate tutorials
>> For a situation when you need to render two components in different places on the page
Initially, the parent component App extends React.Component is created (for example), in which in the render method we have:

<section>
   <Header />
   <Content />
   <Footer />
</section>

Connect import Header from ... and then work with each component separately.
I myself always use react-router, as it is quite suitable for multi-page sites ( tyk ). We transfer the user to index.html with any request and process everything already inside the application. For the user, there is no difference.
If you want completely separate pages, then you can create html pages by connecting a bunch of modules, as you said, but this option is not usually used.

Answer 3

React is needed to develop SPA applications. For your case with three pages, it is not needed. Don't waste your time.