Scribd
Upload
50 views

JSX

This document compares HTML and JSX syntax by providing examples of common HTML elements and their JSX equivalents. Some key differences highlighted include: JSX uses className instead of class, returns instead of void tags for elements like <img />, and requires JavaScript functions and imports/exports since JSX code needs to be compiled to JavaScript.

Uploaded by

Pranjal tiwari
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
50 views

JSX

This document compares HTML and JSX syntax by providing examples of common HTML elements and their JSX equivalents. Some key differences highlighted include: JSX uses className instead of class, returns instead of void tags for elements like <img />, and requires JavaScript functions and imports/exports since JSX code needs to be compiled to JavaScript.

Uploaded by

Pranjal tiwari
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 1

HTML JSX

<!-- HTML --> // JSX


<div>Hello, World!</div> <div>Hello, World!</div>
<!-- HTML --> // JSX
<img src="image.jpg" alt="A sample image"> <img src="image.jpg" alt="A sample image" />
<!-- HTML --> // JSX
<ul> <ul>
<li>Item 1</li> <li>Item 1</li>
<li>Item 2</li> <li>Item 2</li>
</ul> </ul>
<!-- HTML --> // JSX
<button class="btn primary">Click me</button> <button className="btn primary">Click me</button>
<!-- HTML --> // JSX
<button onclick="alert('Button clicked!')">Click me</button> <button onClick={() => alert('Button clicked!')}>Click me</button>
<!DOCTYPE html> import React from 'react';
<html>
<head> function SimpleForm() {
<title>Simple Form</title> return (
</head> <div>
<body> <form>
<form> <label htmlFor="name">Name:</label>
<label for="name">Name:</label> <input type="text" id="name" name="name" required /><br
<input type="text" id="name" name="name" required /><br />
/><br /><br />
<label htmlFor="email">Email:</label>
<label for="email">Email:</label> <input type="email" id="email" name="email" required /><br
<input type="email" id="email" name="email" required /><br /><br />
/><br />
<label htmlFor="message">Message:</label>
<label for="message">Message:</label> <textarea id="message" name="message" rows="4" cols="50"
<textarea id="message" name="message" rows="4" cols="50" required></textarea><br /><br />
required></textarea><br /><br />
<input type="submit" value="Submit" />
<input type="submit" value="Submit" /> </form>
</form> </div>
</body> );
</html> }

export default SimpleForm;


We import React because JSX needs to be transpiled into JavaScript, and React is required for this.

You might also like