JSX lets you describe React elements with HTML-like notation inside JavaScript. For example, `const link = <a href="//react.dev">React</a>;` creates an element, not an HTML string. JSX is optional: it is a shorter, more readable way to write code that can also be written with `React.createElement()`. section 3.0 section 3.1
A greeting, two ways
With JSX: `return <h1>Hello <em>World</em>!</h1>;` Without it: `return React.createElement('h1', null, 'Hello ', React.createElement('em', null, 'World'), '!');` Both describe the same nested greeting; JSX makes its structure easier to see. section 3.2.1
Use lowercase tags such as `<h1>` for standard elements and capitalized tags such as `<Title />` for custom components. Put an attribute value directly in quotes when it is fixed, or in `{}` when it comes from JavaScript: `<a href={this.props.url}>Profile</a>`. Content between a component’s tags is available as `props.children`. section 3.2.2 section 3.2.5
A few rules prevent common surprises:
- Insert variables, React elements, or JavaScript expressions with `{}`: `<h1>Hello {world}!</h1>`. section 3.2.4
- Close every element; a tag without children needs a slash, as in `<img src="/logo.png" alt="Logo" />`. section 3.4.1
- Use `className` and `htmlFor` instead of `class` and `for`; pass `style` a JavaScript object. section 3.7
- Wrap a comment between tags in braces, for example `{/* A comment */}`. section 3.2.7
JSX must be transpiled into standard JavaScript before a browser can run it. A Create React App template supplies that step, so you can practice writing components without configuring a transpiler. For a UI project, start with the desired HTML, sketch the component tree, write its JSX, and add behavior gradually. section 3.1.2 section 3.2 section 11.7
const element = <main>
<Title>Welcome</Title>
<Carousel images={6} />
<a href="/blog">Go to the blog</a>
</main>;
A nested JSX example combines custom components and an ordinary link. section 3.1.1
const element = React.createElement(
'main',
null,
React.createElement(Title, null, 'Welcome'),
React.createElement(Carousel, {images: 6}),
React.createElement('a', {href: "/blog"}, 'Go to the blog'),
);
Compare the same element written as nested `React.createElement()` calls. section 3.1.1
