Whitespace

In Ember's Handlebars templates, there's automatic whitespace added between tags by default. However, if you use the ~ in Handlebars, that will override and take up any whitespace (doc). For better and for worse, React has no implied whitespace like this. So migrating the ~ will be easier.

Ember

<span>
	<b>Really important:</b>
	Use the cheat sheet
</span>

React

Live Editor

const ImportantNews = () => (
	<span>
		<b>Really important:</b>{' '}
		Use the cheat sheet
	</span>
)

render(<ImportantNews  />)

Result

Loading...

Further note

• HTML entities can also be used here   (non-breaking space). However, if you use that syntax, try to stay consistent in the same file for using other entities for whitespace. https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-unescaped-entities.md
• React note on whitespace https://docureacten.github.io/Rendering/6-1-Handling%20Whitespace%20in%20JSX
• Investigation into newlines https://www.bennadel.com/blog/2880-a-quick-look-at-rendering-white-space-using-jsx-in-reactjs.htm
• Using CSS to space elements can be a more scalable way of spacing but this is how you to do a 1:1 Ember to React migration