"Introducing JSX" is missing a step

[gaearon]

Between first and second example, we're missing a simpler step where we just show something like

var name = 'Josh Perez';
var hello = <h1>Hello, {name}</h1>

Otherwise the gap between the first and the second example is too large, and people fall off.

[joelbarbosa]

Do you think to put after the first example?

const element = <h1>Hello, world!</h1>;

like:

.....
It is called JSX, and it is a syntax extension to JavaScript. We recommend using it with React to describe what the UI should look like. JSX may remind you of a template language, but it comes with the full power of JavaScript.

var name = 'Josh Perez';
var hello = <h1>Hello, {name}</h1>

JSX produces React “elements”. We will explore rendering them to the DOM in the next section. Below, you can find the basics of JSX necessary to get you started.

If so, I can do that.

[gaearon]

Something like this. Send it and we'll iterate!

[stmoreau]

@joelbarbosa are you still working on that? if not, I am willing to do it.

[joelbarbosa]

@stmoreau ok. You can assume then.

[stmoreau]

https://deploy-preview-812--reactjs.netlify.com

[gaearon]

Fixed by #812