Files

KurtWayn3 23d6381828 Update JSX to Include How to Use Maps (#32698 )

2019-02-17 12:44:50 -05:00

3.2 KiB

Raw Blame History

title

title
JSX

JSX

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 JSX expression must have only one parent tag. We can add multiple tags nested within the parent element only.

// This is valid.
const tags = (
  <ul>
    <li>Once</li>
    <li>Twice</li>
  </ul>
);

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

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.

3.2 KiB Raw Blame History

JSX