React JSX :-
JSX is a syntax extension for JavaScript that allows you to write HTML-like syntax in your JavaScript code, making it easier to write and read React components. Here are some key features of JSX:
HTML-like syntax: With JSX, you can write HTML-like syntax directly in your JavaScript code. For example:
const element = <h1>Hello, World!</h1>;
This code creates a new element variable containing an h1 element with the text "Hello, World!".
Expressions in curly braces: You can embed JavaScript expressions inside JSX by wrapping them in curly braces. For example:
const name = 'John';
const element = <h1>Hello, {name}!</h1>;
This code creates a new element variable containing an h1 element with the text "Hello, John!".
Components: You can use JSX to define React components. For example:
function Greeting(props) {
return <h1>Hello, {props.name}!</h1>;
}
const element = <Greeting name="John" />;
This code defines a Greeting component that takes a name prop and returns an h1 element with the text "Hello, [name]!". The element variable creates an instance of the Greeting component with the prop name set to "John".
Attributes: You can specify HTML attributes in JSX using HTML-like syntax. For example:
const element = <img src="logo.png" alt="Logo" />;
This code creates a new element variable containing an img element with the src and alt attributes set.
JSX is not mandatory for writing React applications, but it can make your code more readable and easier to understand. Under the hood, JSX is transpiled to regular JavaScript code using a tool like Babel, which converts the HTML-like syntax into function calls that create React elements.
JSX expressions must have one root element: When you write JSX expressions, you must wrap them in a single root element. For example:
const element = (
<div>
<h1>Hello, World!</h1>
<p>This is some text.</p>
</div>
);
In this code, the element variable contains a div element that wraps an h1 element and a p element.
JSX expressions are compiled to JavaScript: While JSX looks like HTML, it is actually compiled to regular JavaScript. When you run your React code, your JSX expressions are transformed into function calls that create React elements. For example, the previous JSX code would be compiled to the following JavaScript:
const element = React.createElement(
'div',
null,
React.createElement('h1', null, 'Hello, World!'),
React.createElement('p', null, 'This is some text.')
);
This is why you need to include React in your project, as React.createElement is a method provided by the React library.
JSX expressions can be used with conditional rendering: You can use JSX expressions to conditionally render content based on certain conditions. For example:
function Greeting(props) {
const isLoggedIn = props.isLoggedIn;
return (
<div>
{isLoggedIn ? (
<h1>Welcome back!</h1>
) : (
<h1>Please log in.</h1>
)}
</div>
);
}
const element = <Greeting isLoggedIn={true} />;
In this code, the Greeting component takes an isLoggedIn prop and conditionally renders a welcome message or a login message based on the value of the prop.
JSX expressions can be used with arrays: You can use JSX expressions with arrays to render lists of items. For example:
const items = ['apple', 'banana', 'orange'];
const list = (
<ul>
{items.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
);
In this code, the list variable contains an unordered list element that is populated with items from the items array. The map method is used to iterate over the items and create a list item element for each one.
By using JSX expressions in your React components, you can write code that is more concise and easier to understand, and can create dynamic and interactive user interfaces.
0 Comments