TechHatch
Published in

TechHatch

Which is preferable: JSX or HTML?

Let’s start with a definition of HTML and JSX.

The Primary Distinctions Between HTML and JSX

1. In JSX, you must return a single parent element.

2. In JSX, you can use JS straight away.

export const Article() {
return (
<>
<div>This is Khansa's Article</div>
<div>Hello There!</div>
<p> Add two values together, then multiply them. </p>
Result: {100 + 20 * 2}
</>
);
}

3. In JSX, self-closing tags are used.

4. Adding style to an element requires a separate syntax.


HTML → <div style='border: 1px solid black; width:'100px' height:'100px' />
JSX → <input style={{border: '1px solid black', width: '100px' height: '100px' }}/>

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store