JavaScript XML (JSX)
Duration : 00:04:00
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 variablesExample
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"));
Still have some questions? Let's discuss.
CONTACT US