JSX in React – Mixing HTML and JavaScript for Dynamic Interfaces

JSX is a syntax extension for JavaScript that allows developers to combine HTML and JavaScript inside React components. This article explains how to use variables, functions, and data structures in JSX, highlights key differences from native HTML, and shows how JSX enables declarative UI development.

JSXReacthtmlFor

Introduction

In React, everything returned from a component is rendered in the browser. While the output looks like HTML, it’s actually JSX — a powerful blend of HTML and JavaScript that enables dynamic user interfaces.

Using Variables in JSX

const title = 'React';
function App() {
  return (
    
      Hello {title}
    
  );
}

Curly braces {} allow you to embed JavaScript expressions inside JSX. Changing the variable updates the browser output thanks to React’s Fast Refresh and the development server’s Hot Module Replacement.

Input and Label in JSX

function App() {
  return (
    
      Search: 
      
    
  );
}

JSX uses camelCase for HTML attributes. For example, htmlFor replaces for, and className replaces class to avoid conflicts with JavaScript keywords.

Using Objects in JSX

const welcome = {
  greeting: 'Hey',
  title: 'React',
};
function App() {
  return (
    
      {welcome.greeting} {welcome.title}
    
  );
}

You can access object properties directly in JSX using curly braces.

Using Functions in JSX

function getTitle(title) {
  return title;
}
function App() {
  return (
    
      Hello {getTitle('React')}
    
  );
}

Functions can be called inside JSX to dynamically generate content.

How JSX Works

JSX is transpiled to JavaScript before rendering. For example:

const title = 'React';
const myElement = Hello {title};
// becomes:
const myElement = React.createElement('h1', null, `Hello ${title}`);

React then renders this as actual HTML in the browser.

Conclusion

JSX is one of React’s most powerful features, allowing developers to write declarative UI code by mixing HTML and JavaScript. Whether using variables, functions, or complex data structures, JSX makes it easy to express dynamic content directly inside your components.

JSX in React – Mixing HTML and JavaScript for Dynamic Interfaces

Introduction

Using Variables in JSX

Hello {title}

Input and Label in JSX

Using Objects in JSX

{welcome.greeting} {welcome.title}

Using Functions in JSX

Hello {getTitle('React')}

How JSX Works

Hello {title}

Conclusion

Related Articles

Forms in React – Submitting Data with onSubmit and Action in Search Forms

Third-Party Libraries in React – Using Axios and Async/Await for Data Fetching

Explicit Data Fetching in React – Controlling API Requests with a Confirmation Button

Impossible States in React – Predictable State Management with useReducer

Advanced State Management in React – Using useReducer for Complex Transitions

Conditional Rendering in React – Displaying Loading and Error States for Asynchronous Data

Related Articles

Forms in React – Submitting Data with onSubmit and Action in Search Forms
react-forms-Forms are essential in modern applications. This article walks through building a search form in React using input and button elements. First, we use the onSubmit attribute to manage form submission, then introduce the action attribute to align with native HTML behavior. This structure improves accessibility, readability, and prepares the app for future React updates.submit-search-with-onsubmit-and-action
Continue

Third-Party Libraries in React – Using Axios and Async/Await for Data Fetching
This article explores how to replace the native fetch API with the more stable and feature-rich Axios library for data fetching in React. It also demonstrates how to refactor promise-based code using async/await and try/catch blocks for improved readability and error handling. These techniques enhance compatibility with older browsers, improve testability, and simplify asynchronous logic.
Continue

Explicit Data Fetching in React – Controlling API Requests with a Confirmation Button
In the initial implementation, every keystroke in the search field triggered a new API request. This article demonstrates how to shift to explicit data fetching in React, where data is only fetched when the user clicks a confirmation button. By separating the searchTerm and url states, and using useCallback and useEffect, we gain full control over when API requests are sent.
Continue

Impossible States in React – Predictable State Management with useReducer
Using multiple useState hooks to manage related states like data, loading, and error can lead to impossible states — combinations that should never occur in a well-designed UI. This article shows how to consolidate related states into a single useReducer hook, enabling predictable transitions and eliminating bugs like simultaneous loading and error indicators. By structuring state as a complex object and dispatching clearly defined actions, we gain control and clarity in asynchronous data flows.
Continue

Advanced State Management in React – Using useReducer for Complex Transitions
While useState is ideal for simple state updates, React’s useReducer hook offers a more scalable solution for managing complex state transitions. This article demonstrates how to migrate story-related state from useState to useReducer, handle multiple actions like setting and removing stories, and refactor reducer logic for clarity. It’s a foundational step toward building robust, declarative state logic in React applications.
Continue

Conditional Rendering in React – Displaying Loading and Error States for Asynchronous Data
Conditional rendering in React is a powerful tool for controlling what appears in the UI based on different states. This article explains how to show a “Loading…” message while asynchronous data is being fetched, and how to display an error message if the request fails. Using useState and useEffect, we manage isLoading and isError flags, and render content dynamically using ternary and logical operators.
Continue