How JSX relates to React JS

React JS is an open-source JavaScript library that is used for building user interfaces and also for handling the view layer for web and mobile apps. React was created by Jordan Walke.

JSX is the word you would see or hear a lot in the world of React JS. It is important to understand what JSX is and what it is used for. JavaScript XML (JSX) is the extension to the JavaScript language syntax.

This React library is an extension to write XML-like codes for elements and components. And just like XML, JSX has tag names, attributes and children.

React is a free and open-source front-end JavaScript library for building user interfaces based on components. It is maintained by Meta and a community of individual developers and companies. React can be used to develop single-page, mobile, or server-rendered applications with frameworks like Next.js.

Why Learn React JSX?

How React Allows Us To Write Composable Codes

What do I mean by composable? Well, siting an analogy, for example, Legos.

Photo by Mourizal Zativa on Unsplash

We start with a bunch of small pieces to put together something beautiful and great. The small pieces are put together to create something large. They all work together in this example to achieve a goal — the goal of forming something beautiful.

In React, we can split our codes into our custom components and we can put those components together to make something beautiful and large. Our codes become more maintainable and flexible that way.

<div>
   </Navbar>
   </HeroSection>
   </Contact>
   </Footer>
 </div>

Example of React components

2. React is Declarative: Another major reason why people love React is because it’s declarative. Let’s understand what declarative means. To understand declarative it’s worthy to note that the opposite is Imperative. When a program is declarative we can simply tell it what should be done. While Imperative is when we need to tell the computer step-by-step how to execute a task. Take for example Vanilla JS. it takes several lines of code to print a simple text. Now imagine coding a single-page website! React allows us to write our code declaratively in a simple way.

Declarative : What to do
Imperative : How to do things

3. It is Actively Maintained by Skilled People: React was created by Jordan Walke. It is now maintained by Meta (formally Facebook) and a community of individual skilled developers and companies.

4. React is a Hireable Skill: React JS is one of the most demanding frameworks in the market; 31.3% of worldwide specialists are currently using the technology. Some of the world’s tech teams use the tool to design fast, scalable, maintainable web apps e.g. PayPal, eBay, Netflix, Airbnb etc.

React JS is a cool tool for web development, and as cool as it is, it’s very easy to learn compared to other popular front-end frameworks like Angular and Vue. Today, React JS has become highly popular because of its extra simplicity and flexibility. A lot of tech bros are even referring to it as the future of web development.

The only way to learn React is to write React as much as you can!

Why do we need JSX

JSX is not a necessity to write React applications, you can definitely use React without JSX, but JSX makes your React codes simpler and elegant. JSX ultimately transpiles to pure JavaScript which is understood by the browser.
JSX is an extension to JavaScript which means, it can process things that was not normally part of the syntax of JavaScript and it will run things behind the scene to display on the browser. JSX gets transpilled to JavaScript with Babel.
JSX is crucial in React. It is very important to understand it before working with a React application. JSX may look like HTML but it isn’t.

JSX Syntax Rules

HTML attributes like class becomes className in JSX. Attributes become camelCased
In JSX, event listeners are specified as attributes on elements. An event listener attribute’s name should be written in camelCase, for example;

onclick -- onClick
tabindex -- tabIndex
onmouseover -- onMouseOver

Tags must be closed

<div>
  <h1> </h1>
  <p> </p>
  <img/>
<div/>

Benefits of using JSX

Makes code more easier to read and understand.

2. Using JSX, you can modify your code easily if you are familiar with the standard HTML language.

3. The most important benefit of using JSX is to write less code which means they make fewer mistakes and are less likely to develop repetitive stress injuries. JSX is a small language with an XML-like syntax, but it has changed the way people write UI components.

How JSX works

JSX is compiled by various transformers into standard ECMAScript. You probably know that JavaScript is ECMAScript, but JSX is not a part of the ECMAScript specification and it doesn’t have any semantics so we are using Babel to compile the JSX into JavaScript. You can also call this process Transpiling.

What is trans compiling?

Trans-compiler is a type of compiler that takes the source code of a program written in one programming language as its input and produces the equivalent source code in another programming language. Here we are using JSX syntax and trans-compiler compiles the syntax into ECMAScript.

// jsx code

<div class="container">
     <h1 id="h1"> Hello World </h1>
     <p> This is my first paragraph </p>
</div>


// codes get transpilled to javascript with babel

"use strict";

React.createElement(
     "div",
     { "class": "container"},
    React.createElement(
       "h1",
       { id: "h1" },
       "Hello world"
   ),
   React.createElement(
      "p",
      null,
      "This is my first paragraph"
   )
);

JSX code on the document, the code written in JSX is transcompiled to JavaScript code, and then the browser will execute the JavaScript code easily.

That’s a wrap! If you have thoughts on this, be sure to leave a comment.

If this article is helpful to you, kindly give some reactions.

Stay tuned for more beginner-friendly articles from me.

React JS And JSX

Table of contents