← React.js learning pathReact.js · Module 2 of 10
JSX
JSX lets you write HTML-like markup inside JavaScript.
📖 Key ideas
- JSX looks like HTML but compiles to JavaScript function calls.
- Use className instead of class, and htmlFor instead of for.
- Put JavaScript expressions in curly braces: {name}.
- A component must return one parent element (or a fragment <>...</>).
- Self-close empty tags: <img />, <br />.
💡 Real-life example: JSX is like a form template where blanks {name} get filled with real values.
JSXHTML-like syntax in JavaScript
classNameJSX attribute for CSS classes
{ }Embeds a JavaScript expression
FragmentGroups elements without an extra div