JSX – React


JSX is short for JavaScript XML.

JSX is an expression which uses valid HTML statements within JavaScript. You can assign this expression to a variable and use it elsewhere. You can combine other valid JavaScript expressions and JSX within these HTML statements by placing them within braces ({}). Babel further compiles JSX into an object of type React.createElement().

Single-line & Multi-line expressions

Single-line expression are simple to use.

const one = <h1>Hello World!</h1>;

When you need to use multiple lines in a single JSX expression, write the code within a single parenthesis.

const two = ( <ul> <li>Once</li> <li>Twice</li> </ul> );

Using only HTML tags

const greet = <h1>Hello World!</h1>;

Combining JavaScript expression with HTML tags

We can use JavaScript variables within braces.

const who = "Quincy Larson"; const greet = <h1>Hello {who}!</h1>;

We can also call other JavaScript functions within braces.

function who() { return "World"; } const greet = <h1>Hello {who()}!</h1>;

Only a single parent tag is allowed

A valid JSX expression can only have one tag at the highest level. However, the tag at the highest level, or the parent, can have as many child tags as you wish. If you run into a situation where you need to create a JSX expression with two tags at the same level, they must be wrapped in a an enclosing tag.

// This is invalid. const tags = ( <h1>Hello World!</h1> <h3>This is my special list:</h3> <ul> <li>Once</li> <li>Twice</li> </ul> ); // This is valid. const tags = ( <div> <h1>Hello World!</h1> <h3>This is my special list:</h3> <ul> <li>Once</li> <li>Twice</li> </ul> </div> );

All Tags Must Be Closed

In HTML, there are self-closing tags such as img, br, input, and hr.

This means that either of these methods are valid:

<!-- no closing / --> <input type="text" name="city"> <!-- with closing / --> <input type="text" name="city" />

Self-closing (sometimes referred to as void) tags can be rendered with or without a closing forward slash.

However, with JSX, all tags must be closed.

The following JSX is invalid:

const email = <input type="email">;

Closing the input tag will make the JSX valid:

const email = <input type="email" />;

JSX Map Functionality

You can use the built-in Javascript map functionality in JSX. This will allow you to iterate over a given list in your React application.

const list = [ { title: 'Harry Potter and The Goblet of Fire', author: 'JK Rowling', genre: 'Fiction, Fantasy', }, { title: 'Extreme Ownership: How US Navy Seals Lead and Win', author: 'Jocko Willink, Leif Babin', genre: 'Biography, Personal Narrative', }, ]; class Example extends Component { // component info here };

We use the curly braces to encapsulate our JSX:

class Example extends Component { render(){ return ( <div className="Example"> {list.map(function(item) { return <div> {item.title} </div>; })} </div> } }; export default Example;

There you got it! We used JSX’s map to convert a list of book details to HTML elements to the page. See more information on how to use maps below.

More Information

This article needs improvement. You can help improve this article. You can also write similar articles and help the community.