JSX

Introduction to JSX

JSX stands for JavaScript XML. Its syntax is in form of XML/HTML. This syntax is used by the pre-processor such as BABEL for transforming the text in JavaSciprt file into standard JavaScript Objects. Babel is the transpiler that helps to convert the version of JS code into the browser understandability. It describes what the user wants the interface to look like as an output. JSX  helps to make code easier to understand and debug. It embeds HTML into JavaScript code.

All the React component has render() function, which is used to translate the JSX into regular Javascript at the runtime. We use the class syntax as it allows us to write objects using a familiar object-oriented style. Note that, the funny tag syntax is neither a string nor HTML.

By using JSX, we write a code

var TutLink = (
    <ul id="TutLink">
      	<li><a href="#">Home</a></li>
      	<li><a href="#">Article</a></li>
	<li><a href="#">Videos</a></li>
	<li><a href="#">E-Books</a></li>      
    </ul>
);

Now, with the help of Babel, it transforms into one which is understandable by the browser. It compiles JSX down to React.createElement() calls. It recognized by React to create Objects that can be used to construct the DOM.

Why JSX?

JSX helps us to convert tags to React elements. It allows us to write elements in JavaScript and place them in the DOM without any method in use. It gives us the facility to create a template also due to its HTML feature. Another reason is that React uses components in their application so that they may be no separation of file for HTML and logic. According to perform Optimization, It is much faster than regular JavaScript we use as it transfers the code yo JavaScript fast. During the complication, you will take the error which occurs in the application run.

Nested Elements in JSX

In React, if we want to use more than one element then by using div tag we can do it. This tag uses as a wrapper and wraps all the elements with one container element. Let take example

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <h1> Tutorial Link</h1> 
      <h2> Hello !! Readers</h2>
      <h3> Tutorials link is an online community for IT professionals and provides the comprehensive set of resources 
      like Articles, Videos and Ebooks on various topics. 
      <br></br>Tutorialslink.com is also online learning platform that helps anyone to learn software,
       technology and creative skills to achieve the personal and professional goal.</h3>
    </div>
  );
}

export default App;

In the above code,  h1,h2,h3, and br are the elements and div as a wrapper, wrap all the elements in one container. The output is :

Attributes of JSX

Same as HTML, JSX also allows us to use attributes with the elements. But, class in HTML becomes className in JSX because some attributes name in HTML is keywords in JavaScript. To solve the problem, JSX uses a camel case name conversation other than normal name conversion which is used in HTML. JSX also allow using the custom attributes in it, using prefixed by data-. E.g. data-sample

JSX allows us to specify the values in 2 ways such as we can specify the values of the attribute as a hard-coded string using quotes and another one by using curly Braces.

Wrapping elements in JSX

If we want to use multiple tags at a time. Then we have to wrap all the tag under the parent tag and render the elements in the HTML and all subtags become Child tag.

Styling in JSX

React allows us to use the inline style in JSX. To set the style, we use camelCase syntax. React will also automatically append px after the number value on specific elements.

Comments in JSX

JSX allows us to use the comment in the file by wrapping them in curly brackets the same as we do in expression. It is denoted with /*      */.

Let take an example which covers all the above concepts,

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends React.Component {
   render() {
      var head = {
         fontSize: 100,
         color: '#FF0000'
      }
      return (
         <div>
            <h1 style = {head}> Tutorial Link </h1>
            {/*This line covers Comment, Attribute and Styling for JSX */}
            <h2 className="hello">
                Example for JSX
            </h2>
            <p data-sample="sample">
                JSX has use some features like comment, styling the font in the specific tag, attributes and also wrapping elements in JSX.
            </p>
         </div>
      );
   }
}
export default App;

In the above code, there is used every concept like

We use h1, h2, and p tag as an element and wrap all together, that is an example for wrapping elements in JSX. Next, with the h1 tag, we used both styling and comment in it as u can see in it. After that, the last attribute is also used in it with h2, p tags.

Output:

Benefits of JSX

• Faster: While compiling the source code, JSX performs optimization. That means from a normal code written in the javascript, the generated code is much faster.
• Safer: JSX is statically-typed and mostly type-safe as, during compilation level, it offers the compile of the code by finding errors and also debugging feature during that process.
• Easier: JSX offers a solid system that helps the developer to work on a too-primitive proto-type inheritance system provided by JavaScript. Expression and statement in JSX are similar to JavaScript that’s why for developers easier to work on it. Code compilation editor/ISEs help to make coding easier so that it can be understandable.
• Keeping Markup Organised and Dry: Due to mixing HTML into JavaScript, it helps the developer to get better code standards so that they may design a component-based web application which is about structuring code and markup. It gives the developer an advantage of breaking large parts of HTML into other components. So that we can work on it individually after that easy to reorganize.
• Rendering Lists of Data: JSX gives facility for doing a map to transform an array of data into an array of related markup.
• Using Formatting Libraries: It might set up a new variable that shows a piece of data and then render the piece of data into the page. It is easier for JSX to formatting as it is a mixer of HTML and JS.