All geek questions in one place

Can I safely perform DOM operations in a React application, but outside of a React component?

I am going to make my first React project, and in my reading it became clear that I need to allow React to handle all rendering with the virtual DOM and that I should not perform any manual DOM operations that would interfere with virtual DOM calculations.

However, I cannot understand what this is:

Suppose I have a React component displayed in div #app on a page with different HTML. Does this mean that I should refrain from any normal JavaScript DOM operations anywhere on the page? Or can I safely use DOM operations elsewhere on the page as long as I leave divs and elements #apponly inside the actual React component?

EDIT: Motivational use case.

My reason for considering that non-React components manipulate the DOM outside of the React component is basically that HTML can be seen on Google without jumping over a lot of hoops. Suppose I need some descriptive text about an application that will be useful for SEO, and this description may have some pop-up menus, etc. (Hence the DOM problem). Should I really want / need to write everything in React just because the complex user interface of the application uses React if cost makes some text difficult to index Google?

+4
source share
2 answers

Assuming your html file is as follows:

<body>
  <div id="app"></div>
  <div id="others"></div>
</body>

and React is initialized as follows:

ReactDOM.render(<Component/>, document.getElementById('app'));

div#others DOM, div#app, React.

+3

, , React DOM.

React , JS DOM, . - : " React, , jQuery", , , - .

EDIT: , . React. , DOM, React, JS. Google, , SEO React.

+2

Source: https://habr.com/ru/post/1655240/

More articles:


All Articles