Wait, what is JSX?

You may not know what JSX is, but if you do, feel free to skip this. Otherwise, I'm going to provide a very quick summary for you!

To put it simply, JSX is just a mixture of JavaScript and HTML that functions essentially as a templating language. This is a bit of a simplified explanation; JSX is actually some smart syntax wrappers around calls to React.createElement, but put together in a way that more closely resembles HTML. This way, we can write interface code that is incredibly similar to HTML, which allows developers, designers, and others to work with our code (assuming they're already comfortable working with HTML), but we also get access to a few extra features since it is a JavaScript -based templating language.

The first bit of functionality that we get is that we can actually embed any JavaScript statements inside of any JSX by wrapping it in curly brackets! A gotcha to this, though, is that we need to remember that JSX is JavaScript first, and as a result there are some words and syntax here and there are are reserved (class being the prime example of this), so there are specific variations you'll need to use when writing JSX (such as className).