What is JSX?

JavaScript XML is referred to as JSX.

We can write HTML in React thanks to JSX.

Writing and adding HTML in React is made simpler with JSX.

Laravel Error Handling

JSX Coding

Without the need for createElement() and/or appendChild() methods, JSX enables us to write HTML elements in JavaScript and insert them into the DOM.

HTML tags are transformed into React elements by JSX.

Here are two examples. JSX is used in the first, but not in the second:

Example 1

JSX:

const myElement = <h1>I Love JSX!</h1>;
createRoot(document.getElementById('root')).render(
  myElement
)

Example 2

Without JSX:

const myElement = React.createElement('h1', {}, 'I do not use JSX!');
createRoot(document.getElementById('root')).render(
  myElement
);

The first example demonstrates how JSX enables us to write HTML right within JavaScript code.

Based on ES6, JSX is a JavaScript language extension that is converted into standard JavaScript at runtime.

JSX Expressions

Expressions can be written inside curly braces { } when using JSX.

The expression may be any legitimate JavaScript expression, a React variable, or a property.

Example

Run the equation 5 + 5:

const myElement = <h1>React is {5 + 5} times better with JSX</h1>;

Adding a Large HTML Block

Put the HTML in parenthesis if you want to write it on many lines:

Example

Make a list consisting of three items:

const myElement = (
  <ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Cherries</li>
  </ul>
);

One Element at the Top Level

One top level element must enclose the HTML code.

Therefore, if you want to write two paragraphs, you have to put them inside a parent element, such as a div element.

Example

Combine two paragraphs into a single DIV element:

const myElement = (
  <div>
    <p>I am a paragraph.</p>
    <p>I am a paragraph too.</p>
  </div>
);

A “fragment” can also be used to surround several lines. This will stop the DOM from needlessly gaining more nodes.

A fragment appears as <></>, an empty HTML tag.

Example

Put a fragment between two paragraphs:

const myElement = (
  <>
    <p>I am a paragraph.</p>
    <p>I am a paragraph too.</p>
  </>
);

Closed Elements are Needed

Because JSX adheres to XML standards, HTML elements must be correctly closed.

Example

Use /> to close any empty elements.

const myElement = <input type="text" />;

Attribute class = className

While the class attribute is frequently used in HTML, you are not permitted to use it in JSX since JSX is rendered as JavaScript and the class keyword is a reserved word in JavaScript.

Instead, JSX used className to address this. JSX converts className attributes into class attributes when it is rendered.

Example

In JSX, use the attribute className rather than class:

const myElement = <h1 className="myclass">Hello World</h1>;

JSX Comments

In JSX, comments are written using {/* */}.

Example

Comments in JSX:

const myElement = <h1>Hello {/* Wonderful */} World </h1>;

React Components with JSX

React builds user interfaces using components. Code segments that are independent and reusable are called components.

React components return HTML and are similar to JavaScript functions.

JSX functions flawlessly within React components.

Example

JSX in Components:

function Car() {
  return (
    <>
      <h2>My Car</h2>
      <p>It is a Ford Mustang.</p>
    </>
  );
}
createRoot(document.getElementById('root')).render(
  <Car />
)

Before returning the HTML, you might perform the following additional operations inside the components:

Example

JSX in Components:

function Car() {
  const brand = "Ford";
  const model = "Mustang";
  return (
    <>
      <h2>My Car</h2>
      <p>It is a {brand} {model}.</p>
    </>
  );
}
createRoot(document.getElementById('root')).render(
  <Car />
)

Post Views: 0

Categorized in:

JavaScriptReact