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.