JavaScript XML (JSX)

Go Back

Level : Beginner

Go Back

Mentor: Shailendra Chauhan

Duration : 00:04:00

Get Details

JSX syntax and HTML

JSX is a syntax extension of JavaScript that resembles HTML. It's used in React to define the structure of components.

Example

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

JSX attributes

JSX attributes are similar to HTML attributes and provide additional information to elements.

Example

const element = <a href="https://www.example.com">Visit Example</a>;

JSX className

In JSX, use `className` instead of `class` to add CSS classes to elements, since `class` is a reserved word in JavaScript.

Example

const element = <div className="container">Content</div>;

JSX empty elements syntax

Empty elements should be closed with a trailing slash in JSX.

Example

const element = <img src="image.jpg" alt="An image" />;

Embedding JavaScript in JSX

JavaScript expressions can be embedded within JSX using curly braces.

Example

const number = 42;
const element = <p>The answer is {number}.</p>

JSX Syntax and JavaScript

JSX is a syntax extension of JavaScript that allows you to write HTML-like code within your JavaScript code.

Example

const name = "John";
const element = <p>Hello, {name}!</p>;

Embedding JavaScript code in JSX

JavaScript code can be embedded within JSX using curly braces.

Example

const value = Math.random();
const element = <p>Random number: {value}</p>;

JSX element event listeners

Event listeners are added to JSX elements using camelCase attribute names.

Example

const handleClick = () => alert("Button clicked!");
const element = <button onClick={handleClick}>Click me</button>;

Setting JSX attribute values with embedded JavaScript

JSX attributes can be set using JavaScript variables

Example

const className = "highlight";
const element = <div className={className}>Highlighted content</div>;

JSX conditionals

You can use ternary operators for conditionals within JSX expressions.

Example

const isLoggedIn = true;
const element = <p>{isLoggedIn ? "Logged in" : "Logged out"}</p>;

JSX and conditional

JSX supports the `&&` operator for conditional rendering.

Example

const age = 18;
const element = <p>{age > 18 && "You are an adult"}</p>;

JSX .map() method

.map() can be used to create a list of JSX elements from an array.

Example

const items = ["Item 1", "Item 2", "Item 3"];
const list = items.map(item => <li key={item}>{item}</li>);
const element = <ul>{list}</ul>;

Nested JSX elements

JSX expressions must have a single outermost element, but you can nest elements within it.

Example

const element = (
  <div>
  <h1>Nested JSX</h1>
  <p>This is a nested paragraph.</p>
  </div>
);

JSX key attribute

The `key` attribute is used to uniquely identify elements within a list in JSX.

Example

const items = ["One", "Two", "Three"];
const list = items.map(item => <li key={item}>{item}</li>);
const element = <ul>{list}</ul>;

Multiline JSX Expression

Multiline JSX expressions need to be wrapped in parentheses.

Example

const element = (
 <div>
  <p>Line 1</p>
  <p>Line 2</p>
 </div>
);

ReactDOM JavaScript library

ReactDOM is used to interact with the DOM in React applications.

Example

const element = <h1>Hello, ReactDOM!</h1>;
ReactDOM.render(element, document.getElementById("root"));

React.createElement() Creates Virtual DOM Elements

React.createElement() is used internally by React to create virtual DOM elements.

Example

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

The Virtual DOM

The Virtual DOM is a representation of the actual DOM used to optimize updates.

Example

const element = <h1>Virtual DOM</h1>;
ReactDOM.render(element, document.getElementById("root"));

Self-paced Membership

Upto 60% OFF

Know More

Still have some questions? Let's discuss.