Day 4 of #100daysofcode

Today we’ll look at how to use JSX effectively with react. Today’s code will also be a continuation of yesterday’s code, which is :

You can wrap a JavaScript expression in a curly brace to have it evaluated and use the result in its current position, like :

We used a JavaScript expression instead of writing “Hello World” directly here.

You can also do the same with className :

You can do something similar. where you use multiple JavaScript expressions in “children" :

You can also include multiple html tags, such as :

You can also use JSX, in such a way like:

You can see that we did not put our JS expression inside the div tag, but rather beside our className.

You can also use a self-closing tag for div :

You could also try something like :

You can also include additional props in the div tag, such as :

However, it will overwrite whatever comes after it, so we will have className=”not-container” instead of className=’container’ here.

This is accomplished because JSX syntax is compiled to React’s createElement API via babel.

That’s all there is to toady.