What Is JSX In React JS ?

In This Blog, You are going to learn what is JSX and why we use JSX in react app.

Normal Functions Of JavaScript

Example No: 1
function Show()
{
  document.write(“<h1> Hey Wassup </h1>”);
}

Example No: 2
function Show1()
{
  var a = 10;
  var b = 20;
  var c = a + b;
  return c;
}

Function That Return JSX

function Show2()
{
  return (
  <div>
  <h1> Hey Wassup </h1>
  <h1> Hey Wassup </h1>
  </div>
)
}

What is JSX?

• In React JS, JSX stands for JavaScript XML.
• In React JS, JSX is an extension of JavaScript Language.
• In React JS, JSX allows us to write HTML in React.
• In React JS, JSX makes it easier to write and add HTML in React.

Working With JSX In React

• In React JS, JSX allows us to write HTML elements in JavaScript and place them in the DOM without any createElement() and/or appendChild() methods.
• In React JS, JSX converts HTML tags into react elements.
• In React JS, You are not required to use JSX, but JSX makes it easier to write React applications.
• In React JS, JSX is an extension of the JavaScript language based on ES6, and is translated into regular JavaScript at runtime

Expressions in JSX

• In React JS, With JSX you can write expressions inside curly braces { }.
• In React JS, the expression can be a React variable, or property, or object or any other valid JavaScript expression. JSX will execute the expression and return the result.

One Top Level Element In React JS

• In React JS, the HTML code must be wrapped in ONE top level element.
• In React JS, so if you like to write two paragraphs, you must put them inside a parent element, like a “div” element.
• In React JS, JSX will throw an error if the HTML is not correct, or if the HTML misses a parent element.
• In React JS, Alternatively, you can use a “fragment” to wrap multiple lines. This will prevent unnecessarily adding extra nodes to the DOM.
• In React JS, a fragment looks like an empty HTML tag: <>

Elements Must be Closed In React JS

• In React JS, JSX follows XML rules, and therefore HTML elements must be properly closed.
• In React JS, Close empty elements with />
• In React JS, JSX will throw an error if the HTML is not properly closed.

Source Code Of App.js file With JSX Expressions

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

let name = "Mohammad Adil Mehmood Ansari";
const car_obj = {name:"Corolla XLI", colour:"white", make:"2008"};
function App() {
  return (
    <div className="App">
     <h1>{car_obj.name}</h1>
     <h1>{car_obj.colour}</h1>
     <h1> {name} </h1>
     <h1> {5 + 5} </h1>
     <h1>Learning Never Ends</h1>
    </div>
  );
}

export default App;

Source Code Of App.js file With Fragments

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

let name = "Mohammad Adil Mehmood Ansari";
const car_obj = {name:"Corolla XLI", colour:"white", make:"2008"};
function App() {
  return (
    <>
    <h2>Ali</h2>
    <div className="App">
     <h1>Learning Never Ends</h1>
    </div>
    </>
  );
}

export default App;

Source Code Of App.js file With IF Condition & Ternary Operator

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

let a = 10;
let msg = "";
if(a > 50)
{
  msg = "Hello";
}
else
{
  msg = "Bye";
}

function App() {
  return (
    <div className="App">
      <h1> {msg} </h1>
      <h1> { (a > 50) ? "Hello Kumar" : "Bye Kumar" } </h1>
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React With Learning Never Ends
        </a>
      </header>
    </div>
  );
}

export default App;

Click Below Link to Download Notes & Source Code Of This Blog

https://www.mediafire.com/file/99quas3gasssiqm/JSX.rar/file