Why does Khan Academy use templates with just empty space?

Question

In Khan Academy's Perseus repo they use {' '} instead of raw  .

What is this purpose of this?

Answer 1

In JSX, unlike HTML, newlines do not count as whitespace. For example, in HTML, to show some images next to each other without whitespace between them while putting them on separate lines in HTML, you'd have to do something like

<p><!--
  --><img src="." alt="" /><!--
  --><img src="." alt="" /><!--
  --><img src="." alt="" /><!--
  --><img src="." alt="" /><!--
--></p>

In React, the same layout could be accomplished with

<p>
  <img src="." alt="" />
  <img src="." alt="" />
  <img src="." alt="" />
  <img src="." alt="" />
</p>

That means that if you do want spaces between them, you have to declare them yourself; if you want a non-breaking space, you can use &nbsp, but if you want a regular, breaking space, you can specify it in JavaScript using {' '}:

<p>
  <img src="." alt="" />{' '}
  <img src="." alt="" />{' '}
  <img src="." alt="" />{' '}
  <img src="." alt="" />
</p>

Because newlines don't count as whitespace, you could also write that as

<p>
  <img src="." alt="" />
  {' '}
  <img src="." alt="" />
  {' '}
  <img src="." alt="" />
  {' '}
  <img src="." alt="" />
</p>

Of course, you could also use CSS to apply spacing to the images, but it's currently much harder to remove spacing via just CSS.