JSX vs HTML differences in React

Introduction

JSX looks like HTML but is used in React to describe UI. It lets you write UI code inside JavaScript easily.

When building React components to create interactive web pages.

When you want to mix JavaScript logic with UI structure.

When you need to use dynamic data inside your UI elements.

When you want to write cleaner and more readable UI code in React.

Syntax

React

const element = <div className="container">Hello, world!</div>;

JSX uses className instead of class because class is a reserved word in JavaScript.

JSX expressions must have one parent element wrapping all content.

Examples

JSX uses checked as a boolean attribute with curly braces for JavaScript values.

React

<input type="checkbox" checked={true} />

JSX uses htmlFor instead of for to avoid conflict with JavaScript reserved words.

React

<label htmlFor="name">Name:</label>

JSX styles are written as JavaScript objects inside double curly braces.

React

<div style={{ color: 'red', fontSize: '16px' }}>Red Text</div>

Sample Program

This React component shows JSX differences: className for CSS class, htmlFor for label, boolean attribute checked, and inline styles as an object.

React

import React from 'react';

function Sample() {
  return (
    <div className="box" style={{ backgroundColor: 'lightblue', padding: '1rem' }}>
      <label htmlFor="title">Welcome!</label>
      <input type="checkbox" checked={true} />
      <p>This is JSX, not plain HTML.</p>
    </div>
  );
}

export default Sample;

Important Notes

JSX is not a string or HTML but a syntax that compiles to JavaScript calls.

Always use camelCase for event handlers like onClick in JSX.

Summary

JSX looks like HTML but uses JavaScript rules.

Use className instead of class, and htmlFor instead of for.

Attributes like styles and booleans use JavaScript syntax inside JSX.