What is JSX?

is a special dialect of JS (its NOT HTML!).
browsers do not understand JSX, therefore, we use Babel to convert JSX into normal JS.
is very similar in form and function to HTML with a couple differences

JSX vs HTML

React CSS

Adding custom styling to an element uses different syntax.

In JSX, JavaScript expressions are written inside curly braces, and since JavaScript objects also use curly braces, the styling in the example above is written inside two sets of curly braces {{}}.

const App = () => {
  return (
    <div>
      <label class="label" for="name">
        Enter name:
      </label>
      <input id="name" type="text" />
      <button style={{ backgroundColor: 'blue', color: 'white' }}>Submit</button>
    </div>
  )
}

<div>
  <label class="label" for="name"> enter name: </label>
  <input id="name" type="text" />
  <button style="background-color: blue; color: white;">Submit</button>
</div>

Must also use camelCase property names. Use backgroundColor instead of background-color:

More info here

Class vs className

<label class="label" for="name">Enter name:</label>

<label className="label" for="name">
  Enter name:
</label>

We do this to ensure that JS does not get confused when we use a class declaration.

JSX can reference JS variables

can take a JS variable and easily print it in our JSX block.
first set of means we want to reference a JS variable

// Create react component
const App = () => {
  const buttonText = 'Click me!' // new JS variable
  return (
    <div>
      <label class="label" for="name">
        Enter name:
      </label>
      <input id="name" type="text" />
      <button style={{ backgroundColor: 'blue', color: 'white' }}>
        {buttonText} // reference to the variable
      </button>
    </div>
  )
}

can reference a string, an array, a function.

Or we can reference a JS function

function getButtonText() {
  return 'Click on me!'
}

// Create react component
const App = () => {
  const buttonText = 'Click me!'
  return (
    <div>
      <label class="label" for="name">
        Enter name:
      </label>
      <input id="name" type="text" />
      <button style={{ backgroundColor: 'blue', color: 'white' }}>{getButtonText()}</button>
    </div>
  )
}

Variables JSX can NOT show

Referencing an Object will NOT work properly.

const App = () => {
  const buttonText = { text: 'click me' }
  return (
    <div>
      <label class="label" for="name">
        Enter name:
      </label>
      <input id="name" type="text" />
      <button style={{ backgroundColor: 'blue', color: 'white' }}>{buttonText}</button>
    </div>
  )
}

Get an error: Objects are not valid as a React child (found: object with keys {text}). If you meant to render a collection of children, use an array instead.

Instead, we must reference it like so {buttonText.text}.

We can use JS object as long as we are not trying to print them as text in our application.

This will work fine for the style:

const App = () => {
  const buttonText = { text: 'click me' }
  const style = { backgroundColor: 'blue', color: 'white' }
  const labelText = 'Enter Name:'
  return (
    <div>
      <label class="label" for="name">
        {labelText}
      </label>
      <input id="name" type="text" />
      <button style={style}>{buttonText.text}</button>
    </div>
  )
}