Concept 2 of 11
JSX
stands for XML. It lets you write -like markup directly inside your code. It looks like , but it is not — is actually shorthand for calls that the browser never sees directly.
Before your code reaches the browser, a tool called Babel compiles into plain . For example, <h1>Hello</h1> compiles into React.createElement('h1', null, 'Hello'). is just a nicer way to write that.
has a few rules that differ from : every element must be closed, you must have exactly one root element per return ment, use className instead of class, and attribute names are camelCase (onClick not onclick).
To embed a expression inside , wrap it in curly braces {}. You can put , calls, arithmetic — anything that evaluates to a value. Curly braces are the bridge between markup and logic.