So, as I understand a React app can be rendered inside pretty much any HTML element we point to by a selector. Why is the convention to use additional <div>
with id of root
, instead of just <body>
?
Using div is better than using table because of easy control of the in the design and it can be container for controls than table and the table is mainlt used to group data with simillar structure so it's design is for this task but div is considered as container mainly than table.
Span and div are both generic HTML elements that group together related parts of a web page. However, they serve different functions. A div element is used for block-level organization and styling of page elements, whereas a span element is used for inline organization and styling.
Div is a block-level element that creates a line break to make separate containers or boxes within a page or document, hence its an abbreviation for 'division', whereas span is a generic container for inline elements and content that allow us to apply styles and other attributes to the content within the span element.
From the creator of Redux (Dan Abramov), this is what he has to say about rendering to the body.
If you render directly into document.body, you risk collisions with scripts that do something with it (e.g. Google Font Loader or third party browser extensions) which produce very weird and hard to debug errors in production. React warns you if you attempt to do this.
https://github.com/facebook/create-react-app/issues/1568
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With