React removes spacing between elements - html

Question

Here is a fiddle to demonstrate:
html
<div>
<button>One</button>
<button>Two</button>
<button>Three</button>
</div>
<div id="app"></div>
js
function Buttons() {
return (
<div>
<button>One</button>
<button>Two</button>
<button>Three</button>
</div>
);
}
ReactDOM.render(<Buttons />, document.querySelector("#app"))
Basically whether or not I have any stylesheets, putting elements next to each other causes them to have 9px of space between them (at least on Chrome) but doing the exact same thing inside a react component puts no space between them. I would like to know why they are not consistent and how to make them consistent if possible.

Answer 1

The reason for this difference is that React removes whitespace at the beginning and ending of a line.
The space you see between the buttons in your html example is due to the whitespace characters between the <button> tags in your html code.
If you change your React code to the following, you will get a result similar to your html example:
function Buttons() {
return (
<div>
<button>One</button> <button>Two</button> <button>Three</button>
</div>
);
}
ReactDOM.render(<Buttons />, document.querySelector("#app"))
My advice would be to let React remove the whitespace between the elements, and use css to properly control the spacing.

Answer 2

JSX removes whitespace at the beginning and ending of a line. It also removes blank lines. New lines adjacent to tags are removed; new lines that occur in the middle of string literals are condensed into a single space.
So the following declaration in html
<button>1</button>
<button>2</button>
Actually takes in consideration the line break.
The same declaration in jsx is the equivalent of writing like this in html
<button>1</button><button>2</button>