JSX in React

What is JSX?

JavaScript XML is abbreviated as JSX. It's a JavaScript syntactic extension designed to be used in React apps. JSX code resembles HTML in style, but it has all of JavaScript's capabilities.

It's essentially a combination of JavaScript and HTML, which makes the HTML file really simple to comprehend. This union of a programming language with a markup language strengthens and improves the performance of applications.

Preprocessors (i.e., transpilers like Babel) will employ this syntax to convert HTML-like content present in JavaScript files into standard JavaScript objects that a JavaScript engine will parse.

Now, what is Babel? It is a free and open-source JavaScript transcompiler that converts ECMAScript 2015+ (ES6+) code into a backward-compatible JavaScript version that can be executed by previous JavaScript engines. Babel is a popular tool for utilizing the JavaScript programming language's latest capabilities.

Because browsers can not understand or read JSX, we must first convert it to standard JavaScript objects using JSX transformers like Babel before passing it to the browser.

Why JSX?

⮞ It is faster than standard JavaScript because it optimises while converting to standard JavaScript.

⮞ It facilitates the creation of templates for us.

⮞ Rather than dividing the markup and logic in different files, React makes use of components.

Example of JSX

Consider the following JSX example, in which we declare a variable called person and technology and then utilise it within JSX by wrapping it in curly brackets (a normal JSX approach for embedding expressions):

const person = “Arya”
const technology = “React”
const JSXelement = <h1>Hello, {person}! Welcome to {technology}</h1>

ReactDOM.render(
  JSXelement,
  document.getElementById('root')
);

React will immediately render a h1 that says "Hello, Arya! Welcome to React." We've barely touched the surface of what JSX can do. We can use JSX to create elaborate interactive online and mobile user interfaces.

Attributes in JSX

We can utilise attributes with HTML elements in JSX exactly like we can with standard HTML. However, instead of using HTML's standard name convention, JSX employs a camelcase convention for attributes. In JSX, class becomes className. The main motivation for this is that some HTML attribute names, such as 'class,' are reserved JavaScript keywords. As a result, JSX employs the camel case naming pattern for attributes to avoid this issue.

In JSX, we may also use custom attributes. The prefix data- should be used to prefix the names of custom attributes. For the h2> tag in the example below, we utilised a custom attribute called data-sampleAttribute.

import React from 'react';
import ReactDOM from 'react-dom';


const element = <div><h1 className = "hello">Hello Mojo</h1>
			<h2 data-sampleAttribute="sample">Custom attribute</h2>< /div>;


ReactDOM.render(
	element,
	document.getElementById("root")
);

Wrapping elements in JSX

Consider the following scenario: you wish to render numerous tags at the same time. To accomplish this, we must encapsulate all of this tag in a parent element and then render this parent element to HTML. This parent element's subtags are referred to as child tags or children.

Below in the implementation we have wrapped h1, h2, and h3 tags under a single div element and rendered them to HTML:

import React from 'react';
import ReactDOM from 'react-dom';


const element = <div>
				<h1>This is Heading 1 < /h1>
				<h2>This is Heading 2</h2 >
				<h3>This is Heading 3 < /h3>
				</div > ;
ReactDOM.render(
	element,
	document.getElementById("root"));

Comments in JSX

We can use comments in JSX the same way we can use JavaScript expressions. In JSX, comments begin with /* and conclude with */. In JSX, we may add comments by wrapping them in curly brackets, exactly like we did with expressions.

import React from 'react';
import ReactDOM from 'react-dom';


const element = <div><h1>Hello Mojo !</h1>
			{/ * This is a comment in JSX * /}
		</div>;

ReactDOM.render(
	element,
	document.getElementById("root"));

💡 Notes

⮞ Consider JSX to be a special/alternative JS syntax that must be compiled rather than a template. To put it another way, JSX simply converts XML-like markup to JavaScript.

⮞ HTML tags always begin with lowercase letters, whereas React components begin with uppercase letters.

⮞ Instead of using if-else statements, you can utilise conditional (ternary) expressions in JSX.

⮞ When it comes to styling, react suggests using inline styles. When setting inline styles, camelCase syntax is required.

Conclusion: So there you have it, your journey into the React realm. We've started with only an introduction to JSX to get you familiar with why you'd use React and what you can do with it.