React - Jsx

JSX (JavaScript XML) is a syntax used in React that allows you to write HTML-like elements in JavaScript. It makes it easy to design user interfaces by combining the power of JavaScript with the structure of HTML.

Key Features of JSX:

HTML-like Syntax in JavaScript
JSX lets you write HTML tags in JavaScript.

jsx

const element = <h1>Hello, World!</h1>;

This code creates a React element that displays "Hello, World!" in an <h1> tag.

JavaScript Inside JSX

You can embed JavaScript expressions inside curly braces {}.

jsx

const name = "John";
const element = <h1>Hello, {name}!</h1>;

Output:

Hello, John!

Babel Transpilation

JSX is not valid JavaScript, so tools like Babel convert JSX into standard JavaScript. For example:

jsx

const element = <h1>Hello, World!</h1>;

import { Fragment } from "react";
import React from "react";
import "./App.css";

let Name = "Ranjith";
let Age = 25;
let Country = "India";
let isMarried = true;

function App() {
  return (


      {/* class*/}

    <div className="jsx">

      <h1>React jsx</h1>


      {/* id */}

      <p id="h1">JSX - Javascript XML</p>


      {/* close Tag */}

      <label htmlFor="">Hiiiii</label>


       {/* Br tag*/}

      <br />
      <br />


        {/* input tag */}

      <input
        type="text"
        placeholder="Enter your Name"
        style={{ padding: "10px" }}
      />



      {/* style */}

      <button style={{ backgroundColor: "red", color: "white" }}>submit</button>


      {/* onClick */}

       <button onClick={click}>submit</button>
      <br />  

       <img src="#"/> * 


      {/* variables */}

      <h1>
        my - {Name} ,my age - {Age}
      </h1>


      {/* if block */}


      {isMarried ? <h1>he is married</h1> : <h1>he is not married</h1>}


      {/* {isMarried && <p> welcome!</p>} */}

      <div>
        <h1>jsx-javascript Xml</h1>
      </div>
    </div>

    <React.Fragment>  // import { Fragment } from "react";

    style not allowed ..pnly key
       <></>
    </React.Fragment>

     <Fragment key={1}> // only property inside key only  allowed
      <h1>jsx-javascript Xml</h1>
     </Fragment>
  );
}

export default App;

 compont same like a normal function EX:

 function User() {
  return (
     "Ranjith",
    25,
     true
  )
}

 console.log(User()); // true

 React

import React from 'react'

 export const App = () => {
   return (<div>App</div>), (<div>App1</div>);
}

 output: app1