Understanding JSX in React - Lession 5

JSX (JavaScript XML) is a syntactic extension for JavaScript, designed specifically for React to enhance the development experience. It allows developers to write HTML-like code directly within JavaScript files, which simplifies the creation and maintenance of UI components.

What is JSX?

JSX stands for JavaScript XML, allowing developers to write HTML structures in a way that resembles HTML but actually executes as JavaScript. This hybrid syntax makes it easier to connect the UI and the underlying data structures. React transforms JSX into JavaScript objects, a process managed during the build phase before the application loads in the browser.

How to Write a Component with JSX

Writing React components with JSX is straightforward. JSX allows you to define components using a syntax that looks very much like HTML, which is then transposed into JavaScript, allowing React to understand and render it.

Here’s a simple example of a React functional component using JSX:

1
2
3
4
5
6

import React from "react";

function Greeting() {
  // JSX directly returns HTML-like elements
  return <h1>Hello, World!</h1>;
}

In this component:

Greeting is a functional component, a basic building block in React for creating user interfaces. The component returns JSX, which describes what the UI should look like. It renders an <h1> tag with the text “Hello, World!”.

Key Features and Advantages of JSX

Readability: JSX closely resembles HTML, making it intuitive for developers to design and visualize the UI directly within JavaScript code. Enhanced Productivity: Integrating the markup with JavaScript in a single file eliminates the context switching between markup and logic, which can lead to more productive development. Dynamic Content: JSX makes it easier to dynamically render content based on the state or props in React components. You can embed any JavaScript expression within braces {}, and it will execute as part of the JSX.

Comparison to Traditional JavaScript

In conventional JavaScript, embedding HTML directly within the script is not possible without appending strings or using methods like document.createElement(). These methods are verbose and prone to errors.

For example, traditional JavaScript dynamic content manipulation:

1
2
3

const element = document.createElement("h1");
element.textContent = "Hello, World!";
document.body.appendChild(element);

In contrast, JSX simplifies this process:

1

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

Where Can You Use JSX?

JSX is not limited to straightforward scenarios; it can be integrated into various aspects of a React component’s logic and structure. Below are several practical ways to utilize JSX effectively within your components:

1. Return Statements

JSX is most commonly used within the return statement of React components. This is where you define what the UI should look like for that component.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

import React from "react";

function Welcome() {
  return (
    <div>
      <h1>Welcome to React!</h1>
      <p>This is a simple component demonstrating JSX usage.</p>
    </div>
  );
}

export default Welcome;

In this example, the Welcome component uses JSX to render a <div> element containing an <h1> and a <p> element. This is the basic way to use JSX, rendering static HTML content.

2. Variables

JSX can be assigned to variables to enhance component readability, reuse common elements, or conditionally render parts of the component.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

import React from "react";

function UserProfile() {
  const user = { name: "John Doe" };
  const header = <h1>Hello, {user.name}</h1>; // JSX assigned to a variable

  return (
    <div>
      {header}
      <p>Welcome to your profile page.</p>
    </div>
  );
}

export default UserProfile;

Here, header is a variable containing JSX. This technique is useful for breaking down complex components into manageable parts or when the same JSX snippet is used multiple times within a component or across several components.

3. Conditionals

JSX works seamlessly with JavaScript’s logical operators to enable conditional rendering within components. This allows you to dynamically alter what is rendered based on the component’s state or props.

1
2
3
4
5
6
7
8

import React from "react";

function Greeting() {
  const isLoggedIn = true;
  return (
    <div>{isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign in.</h1>}</div>
  );
}

In this example, the Greeting component uses JSX to conditionally render an <h1> tag based on the value of isLoggedIn. The ternary operator is used to determine which tag to render.

4. Loops

JSX can be used to render lists or collections dynamically using JavaScript’s array methods like .map(). This is particularly useful for creating repeating UI elements.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

import React from "react";

function TodoList() {
  const items = [
    { id: 1, text: "Item 1" },
    { id: 2, text: "Item 2" },
    { id: 3, text: "Item 3" },
  ];
  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>{item.text}</li>
      ))}
    </ul>
  );
}

This TodoList component takes an array of todo items and uses .map() to create a list item for each todo. The key prop is essential in lists for helping React identify which items have changed, are added, or are removed.

Key Differences Between HTML and JSX

JSX, while similar in appearance to HTML, has several important syntactic differences. These differences are designed to integrate smoothly with JavaScript’s syntax and workflow. Here are some of the key distinctions:

1. ClassName vs. Class

In HTML, classes are assigned using the class attribute. In JSX, you must use className instead because class is a reserved word in JavaScript.

HTML:

1

<div class="app">Hello World</div>

JSX:

1

<div className="app">Hello World</div>

2. Self-Closing Tags

In HTML, certain tags like <input> and <img> do not require a closing tag, but in JSX, all tags must be closed either explicitly or self-closed.

HTML:

1

<input type="text" /> <img src="logo.png" />

JSX:

1
2

<input type="text" />
<img src="logo.png" />

3. Inline Styles as Objects with CamelCase Properties

HTML uses a string to declare styles, whereas JSX requires styles to be passed as an object with properties in camelCase.

HTML:

1

<div style="background-color: blue; margin-top: 20px;">Content</div>

JSX:

1

<div style={{ backgroundColor: "blue", marginTop: "20px" }}>Content</div>

4. HTML vs. JSX Comments Comments in JSX are written with curly braces and the JavaScript comment format, differing from the traditional HTML comment style.

HTML:

1

<!-- This is an HTML comment -->

JSX:

1
2
3

{
  /* This is a JSX comment */
}

5. Attribute Differences

Certain HTML attributes have different names in JSX to conform to JavaScript naming conventions.

For Attribute: HTML:

1

<input id="inputId" /> <label for="inputId">Enter your name:</label>

JSX:

1
2

<input id="inputId" />
<label htmlFor="inputId">Enter your name:</label>