From HTML to JSX: Bridging the Gap

JSX stands for JavaScript XML. This is the language of reactjs framework that is html + javascript meaning it allows us to write html like code in javascript file to create the UI at the same time implement javascript in that UI.
Writing JSX code in reactjs
Since react 16.8 version, react hooks was introduced and it is simply a javascript function returning an HTML like structure as shown below and this is JSX. 
import React from 'react';

function MyComponent() {
  return (
    <div>
      <h1>Welcome to My Component</h1>
      <p>This is a paragraph.</p>
    </div>
  );
}
JSX and HTML Differences
While JSX syntax in React.js resembles HTML, there are some key differences to be aware of. Here are the main differences between JSX and HTML:

Syntax and Attribute Names:
HTML attributes use kebab-case (e.g., class, id, src).
JSX attributes use camelCase (e.g., className, id, src).
HTML elements are written in lowercase (e.g., <div>, <p>, <span>).
JSX elements and component names start with an uppercase letter (e.g., <MyComponent>, <CustomButton>).

Class vs. ClassName:
In HTML, the class attribute is used to define CSS classes for an element.
In JSX, the className attribute is used instead of class to avoid conflicts with the JavaScript class keyword.

Self-closing Tags:
In HTML, certain elements like <img>, <br>, and <input> can be self-closed (<img src="..." />).
In JSX, self-closing tags must always end with /> (e.g., <img src="..." />).

Inline Styles:
In HTML, you define styles using the style attribute with CSS syntax (e.g., <div style="color: red;">Hello</div>).
In JSX, the style attribute expects a JavaScript object with CSS properties written in camelCase (e.g., <div style={{ color: 'red', fontSize: "15px" }}>Hello</div>).

Comments:
HTML comments are written as <!-- Comment -->.
JSX comments are written within curly braces and two forward slashes ({/* Comment */}).
Note::
It's important to note that JSX is not HTML but a syntactic extension of JavaScript. The main purpose of JSX is to allow you to write declarative and component-based UI code in a more intuitive and concise manner. JSX gets transpiled into JavaScript code that creates React elements and manages the component's lifecycle.

While there are differences between JSX and HTML, JSX still maintains a familiar HTML-like structure, making it easier for developers to transition and work with React components.
Prev