What is JSX?
JSX is a syntax extension that lets you write HTML-like markup inside JavaScript. React uses JSX to make UI code easier to read and organize.
JSX is not exactly HTML. The build system transforms JSX into JavaScript that React can use.
Basic JSX Rules
- Return one parent element, or use a Fragment.
- Close every element properly.
- Use className instead of HTML class.
- Use htmlFor instead of HTML for.
- Use camelCase for many DOM properties, such as onClick.
- Use curly braces to insert JavaScript expressions.
Using JavaScript Inside JSX
Anything inside curly braces is evaluated as a JavaScript expression. This is useful for displaying variables, calculations, function results, and conditional values.
Common Beginner Mistake
Do not put statements such as if directly inside JSX curly braces. Use an expression such as a ternary operator or calculate the value before returning JSX.
ADVERTISEMENT