JSX basics

JSX (JavaScript XML) is a syntax extension for JavaScript used with libraries like React to describe what the user interface should look like. It allows developers to write HTML-like markup directly within JavaScript code, making the code more readable and intuitive.

JavaScript paired with HTML enables powerful, high-level functionality with relatively simple code think dynamic updates, event handling, and interactivity without needing heavy frameworks.

Core Concepts

• HTML-like Syntax: JSX looks very similar to standard HTML, using tags and attributes.

• Not Native JavaScript: Browsers cannot read JSX directly. A tool called Babel transpiles (converts) JSX code into regular JavaScript function calls (specifically React.createElement()) before the code runs in the browser.

• Represents Objects: After compilation, a JSX expression becomes a regular JavaScript object, which React uses to build and update the Document Object Model (DOM) efficiently.

• Embedding Expressions: You can embed any valid JavaScript expression (variables, functions, calculations) inside JSX by wrapping it in curly braces {}.

---

Example

Source - https://github.com/Dun-sin/Whisper/blob/main/client/src/components/NavBar.jsx

As we can observe below, Using JavaScript functions with HTML making it easier to make high level functionality without complex code.

import { useMemo } from 'react';
import { NavLink, useLocation } from 'react-router-dom';

import { Tooltip, Whisper } from 'rsuite';
import { Icon } from '@iconify/react';
import { useKindeAuth } from '@kinde-oss/kinde-auth-react';

// Store
import { useDialog } from 'src/context/DialogContext';
import { useAuth } from 'context/AuthContext';
import { socket } from 'src/lib/socketConnection';

// Lib
import { useApp } from 'src/context/AppContext';
import { NEW_EVENT_LOGOUT } from '../../../constants.json';

const linkStyle = `h-full w-full flex items-center justify-center hover:bg-primary rounded-[15px] md:max-h-[60px] md:h-[60px] md:min-h-[60px] `;
const activeStyle = linkStyle + 'bg-primary';

const NavBar = () => {
    const { authState, dispatchAuth } = useAuth();
    const { logout } = useKindeAuth();

    const { app } = useApp();
    const location = useLocation();
    const { setDialog } = useDialog();

    function logOut() {
        dispatchAuth({
            type: 'LOGOUT',
        });
        setDialog({ isOpen: false });
        logout();
    }

    const handleLogout = () => {
        setDialog({
            isOpen: true,
            text: 'Are you sure you want to logout?',
            noBtnText: 'Cancel',
            yesBtnText: 'Yes, log me out',
            handler: () => {
                if (socket.disconnected) {
                    socket.volatile.emit(NEW_EVENT_LOGOUT, {
                        email: authState.email,
                        loginId: authState.loginId,
                    });
                } else {
                    socket.emit(NEW_EVENT_LOGOUT, {
                        email: authState.email,
                        loginId: authState.loginId,
                    });
                }
                logOut();
            },
        });
    };

    const getLinkStyle = ({ isActive }) => (isActive ? activeStyle : linkStyle);
    const fullscreenPages = ['/founduser'];

    const hideNavbar = useMemo(
        () => fullscreenPages.includes(location.pathname) && app.currentChatId,
        [location, app]
    );

    return (
        <div
            className={`${
                hideNavbar && 'hidden'
            } bg-secondary md:w-[120px] md:min-h-screen md:max-h-screen items-center md:flex-col flex-row justify-between shadow-[rgb(0,_0,_0)_12px_0px_18px_-18px] p-2 md:p-5 sticky bottom-0 md:flex max-h-[70px] h-[70px] min-h-[70px]`}
        >
            <div className="hidden md:flex">
                <img src="favicon.ico" />
            </div>
            <div className="justify-between md:justify-center flex items-center md:flex-col flex-row w-full h-full gap-2 flex-nowrap overflow-auto">
                <Whisper
                    placement="auto"
                    controlId="control-id-hover"
                    trigger="hover"
                    speaker={<Tooltip>Search for random buddies</Tooltip>}
                >
                    <NavLink to="/" className={getLinkStyle}>
                        <Icon icon="fluent:people-search-20-regular" color="white" height="24" width="24" />
                    </NavLink>
                </Whisper>
                <Whisper
                    placement="auto"
                    controlId="control-id-hover"
                    trigger="hover"
                    speaker={<Tooltip>Friends</Tooltip>}
                >
                    <NavLink to="/friends" className={getLinkStyle}>
                        <Icon color="white" icon="la:user-friends" height="24" width="24" />
                    </NavLink>
                </Whisper>
                <Whisper
                    placement="auto"
                    controlId="control-id-hover"
                    trigger="hover"
                    speaker={<Tooltip>My Profile</Tooltip>}
                >
                    <NavLink to="/profile" className={getLinkStyle}>
                        <Icon icon="fluent:person-circle-20-regular" color="white" height="24" width="24" />
                    </NavLink>
                </Whisper>

                {/* show only on mobile screen */}
                <div className="flex w-full md:hidden h-full">
                    <Whisper
                        placement="auto"
                        controlId="control-id-hover"
                        trigger="hover"
                        speaker={<Tooltip>Settings</Tooltip>}
                    >
                        <NavLink to="/settings" className={getLinkStyle}>
                            <Icon icon="ic:outline-settings" color="white" height="24" width="24" />
                        </NavLink>
                    </Whisper>
                </div>

                <div className="flex w-full md:hidden h-full">
                    <Whisper
                        placement="auto"
                        controlId="control-id-hover"
                        trigger="hover"
                        speaker={<Tooltip>Logout</Tooltip>}
                    >
                        <button className={linkStyle} onClick={() => handleLogout()}>
                            <Icon icon="majesticons:logout-half-circle" color="white" height={24} width={24} />
                        </button>
                    </Whisper>
                </div>
            </div>
            <div className="hidden md:flex w-full flex-col gap-2">
                <Whisper
                    placement="auto"
                    controlId="control-id-hover"
                    trigger="hover"
                    speaker={<Tooltip>Settings</Tooltip>}
                >
                    <NavLink to="/settings" className={getLinkStyle}>
                        <Icon icon="ic:outline-settings" color="white" height="24" width="24" />
                    </NavLink>
                </Whisper>
                <Whisper
                    placement="auto"
                    controlId="control-id-hover"
                    trigger="hover"
                    speaker={<Tooltip>Logout</Tooltip>}
                >
                    <button className={linkStyle} onClick={() => handleLogout()}>
                        <Icon icon="majesticons:logout-half-circle" color="white" height={24} width={24} />
                    </button>
                </Whisper>
            </div>
        </div>
    );
};

export default NavBar;

JSX Usage in NavBar: Key Points

1. Conditional Rendering with Dynamic Classes: Uses template literals for complex Tailwind class (or any class) computation: ${hideNavbar && 'hidden'}. If hideNavbar is true then hidden class will be applied.

2. Reusable Function Components: getLinkStyle({ isActive }) extracts logic for NavLink styling, applied consistently across 5+ navigation items.

3. JSX self-closing tags like <Icon icon="fluent:people-search-20-regular" color="white" height="24" width="24" />.

4. JSX-in-JSX Nesting: Deeply nested structure with Whisper > NavLink > Icon for tooltips + routing + icons. Inline handlers onClick={() => handleLogout()} keep JSX declarative while functions handle side effects.

JSX Power: ~80% JSX, 20% JS logic—maximum declarative UI (meaning you just say what the UI should look like, not how to build or update it step by step which is imperative) with minimal imperative code.

---

Key Rules and Syntax Differences from HTML

While similar to HTML, JSX has specific rules:

• Single Root Element: A component must return a single top-level element. To return multiple elements, you must wrap them in a single parent tag, such as a <div> or a <>...</> (a Fragment).

• Close All Tags: All tags, including self-closing elements like <img> or <input>, must be explicitly closed with a forward slash (e.g., <img />, <br />).

• camelCase Attributes: HTML attributes are written in camelCase in JSX because some words like class and for are reserved keywords in JavaScript.

  This is important to differentiate between JavaScript reserved keywords and HTML keywords, as they can conflict. For example, 'class' is used to create a JavaScript class, but it can also be used in HTML to apply styles.

  • class becomes className.

  • for becomes htmlFor.

• Inline Styles: Inline styles are specified using a JavaScript object rather than a string.

• Conditional Rendering and Lists: You can use JavaScript logic like if statements or the .map() method to conditionally render elements or lists of items directly within your JSX. (This is widely used)

Why Use JSX?

• Improved Readability: It makes UI code visually intuitive and easier to read and understand.

• Better Developer Experience: JSX provides more detailed error messages and warnings during development compared to writing vanilla JavaScript with React.createElement() calls.

• Prevents XSS: By default, React DOM escapes any values embedded within curly braces before rendering them, which helps prevent Cross-Site Scripting (XSS) attacks.

Note:

JSX and React are two separate things. They’re often used together, but you can use them independently of each other. JSX is a syntax extension, while React is a JavaScript library.

TSX popular now a day, every thing is same just use TypeScript instead of JavaScript.