Hit enter after type your search item

What is React JSX?

JSX is an acronym for “JavaScript extension”. Leveraging the power of JSX, we can write JavaScript in a code editor in the same way just like we write HTML code. Simply speaking, JSX is an HTML-like syntax used by React to extend ECMAscript functionality thereby front end developer with an ample understanding of HTML can easily manage to code in React.

With the help of JSX code, you can write DOM like tree structure in the same file in which you normally write JavaScript code. Subsequently, preprocessor like Babel will completely transform your JSX code in JavaScript code. As the JSX is similar to XML/HTML structure, therefore, it has JSX tags, has tag names, attributes, and children.

An example of JSX in React

To keep that in perspective, let’s write a simple JSX code and see the preprocessed JavaScript output:

JSX code:

<div>Welcome to React JSX tutorials</div>

Corresponding JavaScript Output:

React.createElement(“div”, null, ‘welcome to react JSX tutorials’);

The above-mentioned code snipped creates a React element and takes three arguments as an input wherein the first one is an element name which is div tag in this code sample, the second one is the attribute passed in the div tag and the last is the content which you would like to display which in this case is “welcome to react JSX tutorial”

Why do We Use JSX?

  • It is faster and efficient than regular JavaScript.
  • The reason for its prominence in the development community is due to the fact it optimizes the code amidst transforming it into JavaScript. As it performs both the task simultaneously therefore, it has a competitive edge over JavaScript because of this feature.
  • It simplifies the process of template creation
  • React unleashes components that synergies both the markup and technologies instead of segregating technologies in a separate file
  • JSX reduced the development time and frustration because almost all the errors arise at the compilation time.
  • JSX is highly useful for novice developers as it is type-safe.

Nested Elements in JSX

In order to use numerous elements in a single component, you must have to wrap all of them in one container element. In this code example, we’ve nested all the elements within a single <div> container.

JSX Attributes

JSX use attributes with the HTML element just like we generally use with the regular HTML. Contrary to the regular HTML, JSX uses the camel case naming convention. For instance, class in HTML will transform to className in JSX because the class is the reserved name in JavaScript.

In order to deepen our understanding, see the below code example wherein we are using user-defined data demoAttribute for the <p> tag.

Code Snippet:

In JSX, we can incorporate attribute value in two of the following ways:
  1. As String Literals

We can describe the value of an attribute in double-quotes as depicted in the code below

var element = <h2 className = “firstAttribute”>Great Learning Platform</h2>;

This is how you can do it in the code example:

  1. As Expressions

Using curly braces, we can easily specify the value of an attribute.

var element = <h2 className = {varName}> Never give up learning </h2>;

Code Example:

How to write JSX Comments 

JSX allows us to put comments within our code so that anyone who views our code understands it easily. A comment starts with /* and ends with */. Besides, these forward and backward slashes are wrapped in curly braces.

An example

How to style JSX?

ReactJS only accepts inline styling. To set inline styles, you need to strictly adhere to the camelcase syntax. React compiler automatically incorporates ‘px’ following the number value of the specific element.  The following code example depicts how to use styling in the element:

Follow along with this code example, write it on your favorite code editor and see how the output would look like.
This div height required for enabling the sticky sidebar