12-Jan-2025

React JSX

JSX is a syntax extension to JavaScript that allows you to write HTML-like code within your JavaScript files. It’s a core part of React and makes it easier to create and manage the user interface (UI) of your applications. While it looks like HTML, JSX is ultimately compiled to plain JavaScript function calls that create React elements. These elements describe what you want to see on the screen.

Why JSX?

JSX might seem a bit strange at first, but it offers several advantages:

Familiar Syntax: If you’re coming from a web development background, the HTML-like structure of JSX makes it easier to learn and use. It reduces the mental overhead when switching between HTML and JavaScript.
Composable Components: JSX makes it easy to build reusable UI components. Components are the building blocks of React applications, allowing you to break down complex UIs into smaller, more manageable pieces.
Type Safety (with TypeScript): When used with TypeScript, JSX allows for better type checking and error detection, catching potential issues during development rather than at runtime.

Example

import React from 'react';
import ReactDOM from 'react-dom/client';

const myElement = <h1>Hello from JSX!</h1>;

const root = ReactDOM.createRoot(document.getElementById('root')); // Assuming you have a <div id="root"></div> in your HTML
root.render(myElement);

In this example, <h1>Hello from JSX!</h1> is JSX. It looks like HTML, but it’s within a JavaScript file. React will transform this into a JavaScript representation that the browser can understand.

JSX Expressions

You can embed JavaScript expressions within JSX by using curly braces {}.

import React from 'react';
import ReactDOM from 'react-dom/client';

const name = "John Doe";
const element = <h1>Hello, {name}!</h1>;

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(element);

This code will render “Hello, John Doe!” on the screen.

JSX Attributes

Just like HTML, JSX elements can have attributes.

import React from 'react';
import ReactDOM from 'react-dom/client';

const element = <img src="myimage.jpg" alt="My Image" />;

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(element);

JSX and JavaScript Logic

JSX allows you to seamlessly integrate JavaScript logic into your UI rendering. You can use conditional statements, loops, and function calls directly within JSX using curly braces.

import React from 'react';
import ReactDOM from 'react-dom/client';

function MyComponent(props) {
  const showMessage = props.displayMessage;
  return (
    <div>
      {showMessage && <p>This message is displayed conditionally.</p>}
      <p>This message is always displayed.</p>
    </div>
  );
}


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyComponent displayMessage={true}/>); // try setting this to false!

JSX is a powerful tool that simplifies building dynamic and interactive UIs in React. Its resemblance to HTML makes it easy to learn, and its integration with JavaScript allows for complex logic and component composition. Understanding JSX is fundamental to working effectively with React.