What is alignment in React style guides from Airbnb?

Airbnb has a JavaScript Github repo where they keep a list of the best practices in JavaScript, as well as CSS, React, CSS in JavaScript, and more.

Most of the rules on writing React are based on making the code clearer and cleaner, and a few of them help our React app run faster.

You can look up the full style guide here. In this shot, we will discuss alignment.

Alignment

This style deals with how we arrange the JSX syntax in our code. Alignment states that the closing tag in a JSX element must continue in a new line unless the JSX element props fit in one line:

// bad
<Component oneProp="1" twoProp="2" />

The closing tag should start at a new line:

// good
<Component oneProp="1" twoProp="2" />

If the prop is 1 and can fit in one line, then the following code is fine:

// good
<Component oneProp="1" />

This is mostly for readability purposes. Identifying the props and the closing tag makes it easier for us to know the props of a JSX element.

The closing tag of a JSX element with no props should not start in a new line:

// bad
<Component />

The closing tag should be on the same line as the component names, as shown below:

// good
<Component />

Since the closing tag is on the same line as the component, the closing tag must be separated by a single space:

// all bad, last one worst
<Component/>
<Component  />
<Component                   />

If a JSX element has children elements, the children should be indented normally:

// good
<Component oneProp="1"
    twoProp="2"
>
    <ChildComponent />
</Component>


// good
<Component oneProp="1"
    twoProp="2"
>
    <ChildComponent     childProps="3"
        anotherChildProps="4"
    />
</Component>