JSX Basics

JSX (JavaScript XML) is a syntax extension for JavaScript. It looks like HTML but is actually a way to write React elements. It makes the code easier to read and write.

Why use JSX?

React doesn't require using JSX, but most people find it helpful as a visual aid when working with UI inside JavaScript code. It also allows React to show more useful error and warning messages.

Embedding Expressions

You can put any valid JavaScript expression inside curly braces in JSX.

JavaScript

const name = 'Ashish';
const element = <h1>Hello, {name}</h1>;

Specifying Attributes

You can use quotes to specify string literals as attributes, or curly braces to embed a JavaScript expression.

JavaScript

const element = <img src={user.avatarUrl}></img>;
const link = <a href="https://ashishcoder.com">Visit Site</a>;

Note: Since JSX is closer to JavaScript than to HTML, React DOM uses camelCase property naming convention instead of HTML attribute names. For example, class becomes className.