Understanding JSX

Introduction

Welcome back! Today we will learn about JSX which is a very important concept in React. With JSX, we can effortlessly blend JavaScript and HTML, enabling us to create captivating user interfaces Just to remind you, the content we see on the browser is the result of what is resolved by the app.js file.

What is JSX?

JSX, short for JavaScript XML, is a powerful extension of JavaScript that allows developers to write UI components using a familiar HTML-like syntax. This declarative approach to building interfaces simplifies the process of combining JavaScript logic with user interface design. With JSX, we can seamlessly embed JavaScript expressions within our markup, making it easier to manage dynamic content and create interactive elements.
To summarize it is a combination of HTML and JS. To make a better user experience React gives us the option to write in one place in a unified way HTML and JS.

Function vs. Class-based Components

• Class Based Components: While they have more boilerplate code, class-based components offer additional features, such as state management and lifecycle methods. They were the traditional way of writing components before functional components were introduced.

• Function Based Components: These are simpler and more lightweight, making them the preferred choice for most use cases. They are stateless and rely on props to receive data.

For this blog, we'll focus on function-based components for their simplicity and readability.

Handling JSX with care

There are few reserved keywords in Javascript so we need to be careful while writing JSX.
Eg:
1. className instead of class: In React, we use className to assign CSS class names to elements, whereas in HTML, the attribute is simply class.

// In React
<div className="my-class">Hello, World!</div>

<!-- In HTML -->
<div class="my-class">Hello, World!</div>

2. htmlFor instead of for: we use htmlFor in React to associate a label with a form element, while in HTML, the attribute is for.

// In React
<label htmlFor="inputField">Input Field:</label>
<input type="text" id="inputField" />

<!-- In HTML -->
<label for="inputField">Input Field:</label>
<input type="text" id="inputField" />

1. defaultValue instead of value: When using controlled components in React, you set the initial value with defaultValue, whereas in HTML, it's just value.

jsxCopy code// In React
<input type="text" defaultValue="Initial value" />

<!-- In HTML -->
<input type="text" value="Initial value" />

There are other reserve keywords like tabIndex, onChange etc. So we should always check in official react documentation to make sure we are using the correct keywords.
https://react.dev/reference/react-dom/components#custom-html-elements

Returning Multiple Elements

In react, if we are using JSX then can return only one element.

function App() {
  return (
    <div className="blank">
      Hi There!!
    </div>
  );
}

In case if we return 2 elements then it is not valid

import './App.css';

function App() {
  return (
    <h1>Heading 1</h1>
    <div className="blank">
      Hi There!!
    </div>
  );
}

export default App;

we can use JSX fragment <></> in case we want to return more than 1 element:
Now this is valid

import './App.css';

function App() {
  return (
    <>
      <h1>Heading 1</h1>
      <div className="blank">
        Hi There!!
      </div>
    </>
  );
}

export default App;

Styling with CSS

Now as we can observe in the above code we have imported app.css and we have className = "blank"
Now we can use that className to apply css

.blank{
  color: red;
}

This will give the output as below:

Using Variables in JSX

We can also use variables in JSX
Eg: Here we have a name variable and we are using in JSX

import './App.css';

let name="Annu";

function App() {
  return (
    <>
      <h1>Heading 1</h1>
      <div className="blank">
        Hi There!! Myself {name}
      </div>
    </>
  );
}

export default App;

Output:

Let us discuss one more point in JSX.
What will happen if we write the below code? Will react resolve html tag bold for name variable? Any guesses?

import './App.css';

let name="<b>Annu</b>";

function App() {
  return (
    <>
      <h1>Heading 1</h1>
      <div className="blank">
        Hi There!! Myself {name}
      </div>
    </>
  );
}

export default App;

So the answer is No, React won't resolve it. It sanitizes it and the result will be:

To make it bold we will use dangerous html which we will learn later. As of now we just need to be mindful that this is not a bug.

Remember, JSX brings unparalleled flexibility to web development, but it also requires responsible use to prevent security vulnerabilities. Armed with this knowledge, we are now well equipped to build captivating and interactive user interfaces with React and JSX. Stay curious, keep learning, and happy coding!
Stay tuned untill next blog and do comment your feedback and queries. Thanks for reading.