JSX In Depth

#javascript #react #programming

JSX means you can write JavaScript code inside the HTML this is called JSX Also JSX helps to make it easy to understand your code and important point is easier to Debug your code.
Without JSX complex to handle and understand code. if you want to create a large Application in reacting so without JSX handle All component pieces of code are more difficult so using the JSX is handled to easily large applications.

JSX is together with your HTML code and JavaScript code. React component has render function which is used to translate your JSX code into regular Javascript code runtime because the browser does not understand your JSX code.

We can not execute JSX code directly inside the browser we required the compiler for executing JSX code to JavaScript babel compiler convert your JSX code into JavaScript here Babel working like Transfer JSX code into JavaScript also you can use Babel compiler through the CDN(online) please check following the JSX example.

Sample Example JSX:

const ele = <h1>This is sample JSX</h1>;

This is simple JSX code in React. But the browser does not understand the JSX code because JSX is not valid for JavaScript code. We can not execute the JSX code inside the browser directly if you want to execute the JSX code inside the browser we need to compile your JSX code
Using Babel compiler we can convert your JSX code to JavaScript Code because the browser understands JavaScript code
The above code somewhat looks like HTML and JS code, it also use javascript like a variable but is neither HTML nor JavaScript, it is JSX

Benefits of JSX :

JSX helps for code simpler and Attractive when writing large pieces of code for big React Application.
According to the React DOCS, most people find JSX helpful as visual help when working with UI inside
the JavaScript code .
JSX also allows React to Show more useful error and warning messages.
JSX is Faster compare normal JavaScript code.
using JSX you can create faster Application in React.
If you use inside the render method two or more HTML element show the Error Massage through JSX in React. that means you cannot use the two or more than HTLM element inside the render method. fix this error massage you can use single div and inside this single div your All HTML element put.
without JSX your code is complex for understanding
easy to use JSX when building React Application
JSX help easy to create UI templates
using JSX you can be easy to handle your JS code and HTML code

Example of with JSX and without JSX

Step 1: Create a React application using the npx create-react-app my-app cmd.
Step 2: After creating your project folder.my-app, then using the cd example cmd.
Step 3: Create files Withoutjsx.js and WithJsx.js.

//apps.js
import './App.css' ;
import Withoutjsx from './Components/Withoutjsx';
import Withjsx from './Components/Withjsx';

function App() { 
  return ( 
    <div className="App"> 
      <Withoutjsx /> 
      <Withjsx /> 
    </div> 
  ) 
}  
export default App

WithoutJSX.js

import React from 'react'

const Withoutjsx = () => {
  return React.createElement(
    'div',
    { id: 'Withoutjsx', className: 'welComeClass' },
    React.createElement('h1', null, 'Welcome to Bihar),
  )
}
export default Withoutjsx;

WithJSX.js

import React from 'react'

const Withjsx = () => {
  return (    <div className="welComeClass">
      <h1>Welcome to Bihar</h1>
    </div>
  )
}

export default Withjsx;

Conclusion: Above example of components code withoutjsx and withjsx both of the two-component show the same result but so much easier to use withjsx component writing code as compare to withoutjsx component

Docs: jsx-in-depth