React JS: An Introduction to JSX

React has gained huge popularity over the last few years and is being used by large companies such as Netflix, Amazon, Instagram, and a whole bunch of others. It is an open source, frontend library used for building user interfaces. It was created by Facebook in 2013 with the primary aim of minimizing bugs when developers are creating UIs.

What is JSX?

• React uses a syntax extension to Javascript called JSX which allows developers to write HTML in Javascript.
• JSX in React has many similarities to HTML when creating the visual parts of a user interface because it uses the exact tags as HTML such as; the <div>, <h1>, <p> tags, etc although with few exceptions which will be talked about later in this article.
• JSX elements are rendered to the DOM using what is known as ReactDOM.

Below is a code snippet of what a simple JSX looks like;

const element = <h1>Hello React!</h1>

Basic things to know about JSX

• Comments in JSX: Like in HTML and Javascript, JSX allows the use of comments. The syntax for writing comments in JSX is given as {/* */}.

e.g

const name = (
  <div>
    {/*This is a comment in JSX*/}
     <h1>My name is Jane</h1>
  </div>
);

• Working with multiple lines in JSX: Unlike a simple JSX, it is important to note that when writing multiple lines in JSX, we wrap them up in a <div> tag which could be regarded as a parent wrapper. Why do we do this?, in JSX if we try returning multiple elements with no parent wrapper, the codes will not transpile therefore leading to errors. Check out the code snippets below;

{/*This is a valid JSX syntax because the h1 tags are wrapped in a div tag*/}
<div>
   <h1>This is the first header</h1>
   <h1>This is the second header</h1>
</div>

{/*This is not a valid JSX syntax because the h1 tags are not wrapped in a div tag leading to errors*/}
   <h1> This is the first header</h1>
   <h1>This is the second header</h1>

In addition, when rendering multiple lines in JSX you can put them in parenthesis like what we have below.

const JSX = (
     <div>
          <p>This is a paragraph</p>
          <ul>
               <li>This is a list</li>
               <li>This is a list</li>
          </ul>
      </div>
);

• Self-closing tags in JSX: Recall that in HTML, some tags do not require closing tags such as <img>, <br>, <input> tags, etc. JSX follows the XML rules where tags must be properly closed. To do so, a slash / is written at the end of the tag. For example, the <img> tag is written as <img src="imageUrl" />.

• JSX class attribute: JSX uses the class attribute className which is quite different from the HTML class attribute. Note: The JSX class attribute uses the camelCase naming convention.

  const name = (
     <div className = "wrapper">
           <h1>Hello React!</h1>
     </div>
  );
  

• Render JSX elements: React allows us to render JSX directly to the HTML DOM using the ReactDOM(a React rendering API). It uses the method ReactDOM.render() which is called after declaring your JSX elements.

This method contains two arguments, the first element being the React element you want to render whilst the second argument being the DOM node. Let's take a look at the random example below;

const greetings = (
    <div id = "introduction">
         <p>Hi, this is John learning JSX</p>
    </div>
);
ReactDOM.render(greetings, document.getElementById("introduction"));

It is quite important to note that having good knowledge of HTML and Javascript will aid you in understanding the basics of JSX more so React.

I hope you found this article helpful. Thanks for reading!.