TutorialsArena

React JSX: A Beginner's Guide to Writing HTML-like JavaScript

Learn the fundamentals of JSX (JavaScript XML) in React. This tutorial explains how JSX simplifies creating React elements, its translation to JavaScript, attribute usage (camelCase, data attributes), and best practices for writing clean and efficient JSX code.

React JSX: A Beginner's Guide

What is JSX?

JSX (JavaScript XML) lets you write HTML-like code directly within your JavaScript. It's not standard JavaScript, but a preprocessor (like Babel) converts it into regular JavaScript that your browser understands. Think of it as a more readable way to create React elements.

A Simple JSX Example

Here's a basic JSX example and how it's translated to JavaScript:

JSX Code

<div>Hello JavaTpoint</div>
JavaScript Equivalent

React.createElement("div", null, "Hello JavaTpoint");

The React.createElement function creates a React element. The arguments are: the element type (e.g., "div"), attributes (null in this case), and the content.

Why Use JSX?

  • Faster: JSX often compiles to optimized JavaScript.
  • Concise: Combines markup and logic in one place, improving readability.
  • Type-safe: Catches many errors during compilation.
  • Easier Templating: Makes creating user interfaces easier and more intuitive.

Nested Elements in JSX

To use multiple elements, wrap them in a single container (like a div):

Nested Elements Example

<div>
  <p>JavaTpoint</p>
  <p>Training Institutes</p>
  <p>This website contains the best CS tutorials.</p>
</div>

JSX Attributes

JSX uses attributes like regular HTML, but uses camelCase (e.g., className instead of class). Custom attributes start with data- (e.g., data-demoAttribute).

Specifying Attribute Values

You can specify attribute values in two ways:

  1. String Literals: <div title="My Title">...</div>
  2. Expressions: <div count={myCount}>...</div> (using curly braces {})

JSX Comments

JSX comments are written like JavaScript comments but wrapped in curly braces:

JSX Comments Example

<div>
  {/* This is a comment */}
</div>

JSX Styling (Inline Styles)

React recommends inline styles using camelCase (e.g., fontSize). React automatically adds px to numeric values where appropriate.

JSX Styling Example

<h1 style={{ fontSize: 80, fontFamily: 'Courier', color: '#003300' }}>
    www.tutorialsarena.com/
</h1>

Conditional Rendering (Ternary Operator)

JSX doesn't directly support if-else. Use the ternary operator instead:

Conditional Rendering Example

{i === 1 ? 'True!' : 'False!'}