Understanding JSX

What is JSX?

JSX(JavaScript XML) in React is a syntax extension for JavaScript. It looks very similar to HTML, but its actually more powerful because it allows us to write HTML elements directly in JavaScript code and to embed JavaScript expressions within these HTML elements.

Why use JSX?

Readability: JSX makes our code easier to read and understand by combining markup and logic in a way that closely resembles how the UI will be structured.

Powerful syntax: We can write complex logic directly within our JSX, making components highly dynamic and interactive.

Tooling and ecosystem: The React ecosystem and tools like Babel are designed to work seamlessly with JSX, providing a smooth development experience.

Implementation

function App() {
  const name = "Suman";
  return (
    <div>
      <h1>Hello {name}</h1>
    </div>
  );
}

export default App;

The output should read "Hello Suman". If we change the variable in the source code, the browser should reflect that change.

The development server automatically detects changes in our files and refreshes the affected parts in the browser without needing to reload the entire page. React uses a tool called React Fast Refresh (previously known as React Hot Loader) to help with this, while the development server uses Hot Module Replacement to reload the changes efficiently. This process makes development faster and more convenient by showing updates instantly as we code.

Label and Input field in React using JSX

You can define an input field and a label within JSX just like you would in regular HTML. However, JSX has some slight differences from standard HTML. We can see the difference clearly in the following example:

function App(){
return (
	<div>
		<label htmlFor="search">Search: </label>
		<input id="search" type="text"/>
	</div>
	);
}
export default App;

The label is used to describe the input field. This helps users to understand what the input is for. The 'htmlFor' attribute in JSX is similar to the 'for' attribute in regular HTML. It links the label to the input field with the matching 'id'. So, when you click on the label, the input field is focused, making it easier for users to interact with the form.

JSX vs HTML

In JSX, some HTML attributes have different names. For example, 'for' becomes 'htmlFor'. This is because 'for' is a reserved keyword in JavaScript and JSX is a syntax extension of JavaScript. Other attributes like 'id' and 'type' remain the same as in regular HTML.

Let us see an example to understand this better:

<!-- HTML -->
<label for="name">Name:</label>
<input id="name" type="text"/>

// JSX
<label htmlFor="name">Name:</label>
<input id="name" type="text"/>

Another difference between JSX and HTML is case sensitivity. HTML attributes are usually written in lowercase, but in JSX some attributes might have camelCase versions. This is necessary because JSX integrates seamlessly with JavaScript, which is case-sensitive.

For example, 'class' becomes 'className' in JSX and 'onclick' becomes 'onClick'.

Mixing HTML with JavaScript in JSX

One of the powerful features of JSX is the ability to mix HTML with JavaScript. For example, we can define a JavaScript object and use its properties directly within our JSX.

function App() {
  const message = {
    greeting: "Good morning!",
    name: "Suman",
  };
  return (
    <div>
      <h1>
        {message.greeting} {message.name}
      </h1>
    </div>
  );
}
export default App;

Here, the message object is defined in JavaScript, and its properties ('greeting' and 'name') are accessed within the JSX using curly braces. This allows us to dynamically insert JavaScript expressions into HTML.

Using JavaScript functions in JSX

JSX also allows us to call JavaScript functions directly within HTML-like code. It means we can dynamically generate content based on the result of a function.

function App() {
  function getTitle(title) {
    return title;
  }
  return (
    <div>
      <h1>Hello {getTitle("Welcome!")}</h1>
    </div>
  );
}
export default App;

In this example, the getTitle function returns a string, and that string is then displayed in the <h1> tag.

JSX in modern development

In the past, developers had to use the '.jsx' file extension when writing JSX code. Nowadays, built tools like Vite can be configured to recognize JSX in '.js' files, so we don't need a separate file extension. However, some developers still prefer to use '.jsx' because it makes it clear that the file contains JSX code.

Conclusion

JSX is a powerful feature in React that enhances the way we write and manage user interfaces. By combining the familiar syntax of HTML with the capabilities of JavaScript, JSX allows developers to create dynamic, readable, and maintainable code. The ability to mix JavaScript logic directly  with HTML elements makes React components more interactive and responsive to user input. Despite its initial learning curve, JSX quickly becomes an essential tool for modern web development, streamlining the process of building complex UIs. Whether using .jsx or .js files, JSX integrates seamlessly into the React ecosystem, making it easier to bring your ideas to life in the browser.