Menu
I find out that React.js will condense JSX component HTML tags when rendering, is it possible to avoid this?
For example, I have a jsx component defined in this way:
<div id="wrapper">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
after rendering, it show up in browser this way, condensed:
<div id="wrapper"><span>1</span><span>2</span><span>3</span></div>
I know it is a bit strange for asking such question, but sometimes I just want the component to be rendered as the way I defined it.
And the difference between condensed and not-condensed code:
not-condensed:
condensed:
They are naturally the same code. Although I know that the not-condensed code acts differently from the condensed one because it contains some tab or blank characters, that is originally how we define it.
Maybe it is ridiculous and makes no sense to do this, but I still appreciate any help, thanks!
629
JSX is not a requirement for using React. Using React without JSX is especially convenient when you don't want to set up compilation in your build environment. Each JSX element is just syntactic sugar for calling React.
Even though JSX had been around before React, it wouldn't have been nearly as popular without React picking it up. However, we can actually use JSX without React, and it's not that difficult either. The way React works is by configuring your bundler to convert JSX into calls to a createElement function.
1. Memoization using useMemo() and UseCallback() Hooks. Memoization enables your code to re-render components only if there's a change in the props. With this technique, developers can avoid unnecessary renderings and reduce the computational load in applications.
JSX provides you to write HTML/XML-like structures (e.g., DOM-like tree structures) in the same file where you write JavaScript code, then preprocessor will transform these expressions into actual JavaScript code.
Don’t forget that JSX is just sugar for function calls. So this...
<div id="wrapper">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
...is just sugar for this:
React.createElement("div", { id: "wrapper" },
React.createElement("span", null, "1"),
React.createElement("span", null, "2"),
React.createElement("span", null, "3")
);
If you want whitespace between elements which appear on different lines, you can either add some manually…
<div id="wrapper">
<span>1</span>{" "}
<span>2</span>{" "}
<span>3</span>
</div>
…or open new elements on the same line with whitespace between them (the JSX transpiler respects content between elements, just not linebreaks which are adjacent to elements):
<div id="wrapper">
<span>1</span> <span>2</span> <span>3</span>
</div>
…both of which transpile to this:
React.createElement("div", { id: "wrapper" },
React.createElement("span", null, "1"),
" ",
React.createElement("span", null, "2"),
" ",
React.createElement("span", null, "3")
);
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
