Scribd Logo
Upload

Welcome to Scribd!

  • JSX

    Uploaded by

    Pranjal tiwari
    2 views1 page
    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.

    Original Description:

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    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.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    2 views1 page

    JSX

    Uploaded by

    Pranjal tiwari
    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.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 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