JSX Syntax: A Few Notes

JSX looks a lot like HTML, but it isn't a one-to-one transtlation. There are a few syntactical notes to be aware of.

Inline Styling

In HTML, inline styling is done using the "style" attribute and giving it a string of CSS.

<div style="color: white">This text will be white</div>

In JSX, the style attribute expects an object with CSS key:value pairs. You can pass it to a div like this:

<div style={{ color: 'white' }}>This text will be white</div>

> Additional note: normal CSS uses dashes to separate names, but JSX requires camelCase instead. So a value like "background-color" in CSS becomes "backgroundColor" in JSX.

Using JavaScript variables inside of JSX

In JSX, you can execute JavaScript code by wrapping it in curly braces. This includes functionality like referencing variables and functions that were defined elsewhere in your code.

// define the variable
const buttonText = "Click This Button"

// and then use it somewhere in the JSX
// by wrapping it in curly braces

There are also a few other keywords that will technically work (your app will still render) but will cause React to throw a warning into the console. An example of this is "for" -- in React, "for" is replaced with "htmlFor" in order to avoid certain collisions that could potentially break your code.

It's difficult to know every forbidden keyword, so just keep an eye on your console to watch for any potential errors as you're coding.