Top 6 Essential Rules for Writing JSX in React JS

Top 6 Essential Rules for Writing JSX in React JS

JSX is a special way of writing code in the React programming language that helps make things on a website look a certain way. It’s like giving instructions to the computer on how to make something look pretty on the screen.

Here is an example of how we use JSX to make things look good on a website:

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

When you write code using JSX in React JS, there are some important things to remember. These are the rules that help make your code work correctly and make your website look good. Here are some of those rules:

  1. Always return a single element
  2. Use proper HTML semantics or Fragment
  3. Use camelCase for HTML attributes
  4. Use className instead of class
  5. Close every HTML element
  6. JSX Formatting

Related: How to Create Your First ReactJS App: Hello World Example

1. Always return a single element

When you use JSX, you should only return one thing at a time. That means you can be as creative as you want inside that one thing! You can even return an entire website as one big element. Here’s an example:

const element = (
    <div>
      <h2>I like:</h2>
      <ul>
        <li>Singing</li>
        <li>Dancing</li>
        <li>Reading</li>
      </ul>
    </div>
  );

return element;

The code we just looked at will work just fine. However, we can’t add another element right next to the first <div> element. It doesn’t matter what kind of element we want to add, it just won’t work. To show you what I mean, let’s try adding another <div> like this:

const element = (
    <div>
      <h2>I like:</h2>
      <ul>
        <li>Singing</li>
        <li>Dancing</li>
        <li>Reading</li>
      </ul>
    </div>

    <div>
      <h2>My hobbies</h2>
    </div>

  );

  return element;

If we try to run this JSX code, you’ll see an error message with a red squiggly line.

Multiple Element Error in React

The error message is telling us that when we use JSX, we need to wrap adjacent elements inside one big element. Remember, we can only return one thing at a time. So, what can we do to fix this error?

To fix the error, we can add a parent <div> element around all the other elements. Once we do that, we can run the code without any errors.

const element = (
    <div>
      <div>
        <h2>I like:</h2>
        <ul>
          <li>Singing</li>
          <li>Dancing</li>
          <li>Reading</li>
        </ul>
      </div>

      <div>
        <h2>My hobbies</h2>
      </div>

    </div>
  );

  return element;

2. Use proper HTML semantics or Fragment

When we render our website using HTML, it’s important to use proper semantics. This means that we shouldn’t just use <div> for everything. That’s not the best practice. Instead, we should use the appropriate HTML tag for each part of the website. For example, if we want to create a section, we should use <section> instead of <div>.

const element = (
    <section>
      <h1>Hello World!</h1>
    </section>
  );

return element;

For example, if we want to use an article, we return the <article>. Now, there’s no rule against it. But a better practice is to follow the HTML semantics.

If we want to use the <article> element on our website, we should return it directly. There’s no rule against using <div> for everything, but it’s better to follow the HTML semantics. In React, we also have something called a React Fragment. Instead of wrapping everything in an <div> element, we can use a React Fragment with <React.Fragment> like this:

const element = (
    <React.Fragment>
      <h1>Hello World!</h1>
    </React.Fragment>
  );

return element;

Another shortcut to using a React Fragment is to simply type <>, and then close it with </>. This saves us some typing.

const element = (
    <>
      <h1>Hello World!</h1>
    </>
  );

return element;

3. Use camelCase for HTML attributes

When we work with JavaScript, we can add inline event listeners using code like onclick(). However, in React, we can’t write event attributes like this. Since this is JavaScript, we must capitalize the first letter of the attribute. This means we should write onClick() instead of onclick(). If an attribute consists of more than one word, we need to capitalize the first letter of each word. If we don’t capitalize the attribute correctly, we’ll get an error. Below is an example that shows how to use onClick() attribute in JSX.

function Greeting() {
  const element = (
    <div>
      <button onClick={someFunction()}>Click Me</button>
    </div>
  );

  return element;
}

4. Use className instead of class

To create styles in JSX, we use the className attribute instead of class. This is because the class is a reserved keyword in JavaScript. So, if we want to add a class to an <div> element, we use className instead of class. Here’s an example where we add a className attribute to an <h1> element with a value of demo:

const element = (
    <div>
      <h1 className="demo">Hello World!</h1>
    </div>
  );

5. Close every HTML element

To ensure proper functioning, we need to close all elements even those that don’t have a closing tag in HTML5, because in React, this won’t work. For instance, if we add an image to JSX without a closing tag, as in the following code, it may result in an error.

function Greeting() {
  const element = (
    <div>
      <img src="" alt="">
    </div>
  );

  return element;
}

If we run the code above, the following error will occur:

Missing Closing Tag Error in ReactJS

After adding the closing tag for the image element as <img src=”” alt=”” />, everything will work beautifully without any errors. Similarly, this also applies to other elements like <input>. If I omit the closing tag for <input>, then it will result in an error.

6. JSX Formatting

When returning JSX expressions that span multiple lines, you should always use parentheses. This is because JSX expressions are compiled into regular JavaScript function calls, and without the parentheses, the JavaScript interpreter may interpret the code in unexpected ways.

Here is an example of why using parentheses is important:

// Without parentheses
const element = <div>
  <h1>Hello World!</h1>
  <p>This is a paragraph.</p>
</div>;

// With parentheses
const element = (
  <div>
    <h1>Hello World!</h1>
    <p>This is a paragraph.</p>
  </div>
);

In the first example, the JavaScript interpreter may interpret the code as:

const element = <div><h1>Hello World!</h1><p>This is a paragraph.</p></div>;

This is not what we intended, and it could result in unexpected behavior. In the second example, we use parentheses to group the JSX expressions together, which ensures that they are interpreted as a single expression. This makes the code more readable and helps prevent errors.

Conclusion

When using JSX, these rules help ensure that the code works correctly and makes the website look good. By following these rules and best practices, developers can write clean and efficient code that is easy to maintain and debug.

Related: How to Use useState() Hook in ReactJS – with Examples

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top