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
CODE
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>;
CODE
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;
CODE
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
Vollständiger Original-Bericht
Ausführliche Details, Code-Beispiele & Hersteller-Stellungnahme auf dev.to.
SOCIAL SHARE CARD GENERATOR