Learning React: Part 4: React JSX

On By Dan CoxIn code, JavaScript

Learning React

React is a popular JavaScript library for creating user interfaces. It combines many features of JavaScript ES6 together to create a powerful way to quickly create front-end functionality.

React JSX

JSX is at the root of how React works. It allows for intermixing HTML and JavaScript in ways that allow for quickly developing interfaces.

JSX is also how objects and functions are treated as HTML in React as well. When we are using React, we are also nearly always also using JSX in some way or form.

Including HTML

The most common use of JSX is the ability to include HTML intermixed with JavaScript.

Consider the following code:


import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

let element = 
An example!
;

ReactDOM.render(
  element,
  document.getElementById('root')
);

The HTML string “

An example!
” is included in the above example without being escaped or enclosed by quotation marks.

Value Interpolation

When variables are interpolated to their values, this is also JSX. Within React, this commonly occurs with the use of the variable props that is passed to functions and objects to contain the properties used in their HTML form.

Consider the following code:


import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

class Example extends React.Component {
  render() {
    return(
      <p>My name is {this.props.name} and my id_number is {this.props.id_number}</p>
    );
  }
}

ReactDOM.render(
  <Example name="Dan" id_number="1234" />,
  document.getElementById('root')
);

Naming Conventions

In all of the previous examples in this series, all of the classes started with capital letters. This was intentional. In React, JSX assumes any lowercase uses of names correspond to HTML elements. For example, if there was a class named “div”, JSX would assume that any HTML that was “

” would use the class of the same name. Using capital letters for new classes helps to prevent this confusion.

Property Naming Convention

JSX follows the naming conventions of JavaScript for properties of HTML. For example, instead of the property “class”, it would be written as className. The same is true with other properties: if there would have been a hyphen in HTML, it is converted to its camel case equivalent.

Common JSX Errors

JSX Expressions must be wrapped in an enclosing tag.

For example, the following code would seem to make sense, but produces an error.



class Example extends React.Component {
  render() {
    return(
      <p>My name is {this.props.name}</p>
      <p>My id number is {this.props.id_number}.</p>
    );
  }
}

This issue can be easily fixed through enclosing the entire HTML fragment in another element.


class Example extends React.Component {
  render() {
    return(
      <div>
        <p>My name is {this.props.name}.</p>
        <p>My id number is {this.props.id_number}.</p>
      </div>
    );
  }
}

Not closing HTML tags. (Undetermined JSX Contents)

HTML tags should always be closed. If a closing slash is forgotten, React can be get confused about the contents of a component.


class Example extends React.Component {
  render() {
    return(
      <div>
        <p>My name is {this.props.name}.</p>
        <p>My id number is {this.props.id_number}.</p>
      <div>
    );
  }
}