ReactJS - JSX

JSX (JavaScript XML) is a syntax extension for JavaScript used in React to describe the structure of the UI in a syntax similar to HTML. JSX makes it easier to write and understand React components by allowing developers to mix HTML-like code with JavaScript logic. Although JSX looks like HTML, it is not HTML. It gets compiled into JavaScript before being rendered in the browser.

JSX Code:

const element = <h1>Hello, React!</h1>;

What it gets compiled into:

const element = React.createElement("h1", null, "Hello, React!");

Why Use JSX?

• Easier to Read and Write: JSX makes UI development easier by using an HTML-like syntax instead of complex JavaScript function calls.
• Embeds JavaScript Expressions: JSX allows JavaScript code (such as variables, functions, and expressions) to be embedded inside {} .
• Prevents Security Issues: JSX automatically escapes values before rendering them to the DOM, which helps prevent Cross-Site Scripting (XSS) attacks.
• Optimized Performance: JSX compiles to JavaScript (React.createElement) for better performance and efficiency.
• Works Seamlessly with Components: JSX simplifies React component creation and reusability.
• Boosts Developer Productivity: JLess code, easier debugging, and faster UI development.
• Consistency : JSX enforces a structured UI design, making it easier to maintain and scale applications.

Expressions in JSX:

Expressions in JSX are JavaScript values that can be evaluated and rendered inside JSX by enclosing them in {} . JSX expressions make UI dynamic by embedding JavaScript logic directly inside the HTML-like syntax.

import React from "react";

function App() {
  const name = "Sam"; // Variable in JSX

  return (
    <div>
      {/* Using Expressions */}
      <h3>Welcome: {name}</h3>
    </div>
  );
}

export default App;

Attributes in JSX:

In JSX, attributes are used to pass information to HTML elements and React components, just like in regular HTML. However, JSX follows JavaScript syntax rules, so some attributes have slightly different names or syntax compared to HTML. Unlike HTML, JSX uses camelCase for attributes instead of lowercase.

.heading
{ 
  color: rgb(196, 2, 245);
  font-size: 20px; 
  text-transform: uppercase;
  font-family:Georgia;
}

import React from "react";
import "./App.css"; // Import external CSS

  return (
    <div>
      {/* Using Attributes */}
      <h3 className="heading">Welcome: sam</h3>
    </div>
  );
}

export default App;

Using Expression within Attributes:

JSX allows you to use JavaScript expressions inside attributes by enclosing them in {} . This makes it possible to dynamically set attributes based on variables, functions, or calculations.

import React from "react";

function App() {
  const name = "Sam"; 

  return (
    <div>
      {/* Using Expressions within Attributes */}
      <input type="text" value={name}/>
    </div>
  );
}

export default App;

Functions in JSX:

In JSX, you can use JavaScript functions to return elements dynamically. Functions help keep your code organized, reusable, and efficient. You can define a function that returns JSX and use it inside another JSX element.

function message() {
  return <h1>Welcome to our site</h1>;
}

function App() {
  return (
    <div>
      <h3>{message()}</h3>
      <p>This is Home Page.</p>
    </div>
  );
}

export default App;

Inline Styles in JSX:

In JSX, inline styles are applied using JavaScript objects instead of traditional CSS strings. JSX requires style properties to be written in camelCase and values inside double curly braces ( {{ }} ).

function App() {
  return (
    <div>
      <h1 style={{ color: "blue", fontSize: "24px",textAlign:"center" }}>Welcome to our site!</h1>
      <p style={{ color: "green" }}>This is sample paragraph.</p>
    </div>
  );
}

export default App;

Conditional Rendering in JSX:

Conditional rendering in React means showing different UI elements based on certain conditions (like user login status, data availability, etc.). It's just like regular JavaScript if statements, but done inside JSX using different patterns.

function App() {

  const isLoggedIn = true;

  return (
    <div>
      {isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please log in.</h1>}
    </div>
  );
}

export default App;

Loops in JSX:

In React, JSX does not support traditional loops like for or while directly inside the markup. Instead, we use JavaScript’s map() method to iterate over arrays and render elements dynamically.

function App() {
  const items = [
    { id: 1, name: "Item 1" },
    { id: 2, name: "Item 2" },
    { id: 3, name: "Item 3" }
  ];
  return (
    <div>
      <h1>Rendering List</h1>
      <ul>
        {items.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;