List of most commonly asked React Interview Questions.

What is JSX in React? How does it differ from HTML?

JSX (JavaScript XML) is an extension to JavaScript used in React to write and render UI components. It allows developers to define the structure and appearance of the UI in a syntax that closely resembles HTML. However, there are a few key differences between JSX and HTML:

1. Syntax: JSX syntax looks similar to HTML but with some differences. For example, instead of using HTML attributes like class, JSX uses className to define CSS classes, since class is a reserved keyword in JavaScript. Similarly, self-closing tags in HTML (e.g., <img src="image.jpg" />) are also used in JSX.

2. Dynamic Values: JSX allows embedding JavaScript expressions within curly braces {}. This allows you to dynamically compute and inject values into the rendered elements. For example, <div>{name}</div> would render the value of the name variable.

3. Expressing Conditions and Loops: JSX allows you to express conditions and loops using JavaScript constructs. You can use ternary operators or if statements to conditionally render elements. Similarly, you can use map or other JavaScript iteration methods to loop over arrays and render multiple elements.

4. Component Rendering: JSX makes it easy to render React components. You can use custom components as if they were HTML tags. For example, <MyComponent /> would render the MyComponent component. This composability is one of the key features of React.

5. No Built-in HTML Objects: Unlike HTML, JSX does not have built-in objects like document or browser-specific APIs. JSX focuses on component-based development, and any direct interaction with the DOM is typically done through React's APIs.

It's important to note that JSX is not interpreted by the browser directly. Instead, it is transpiled by build tools like Babel into regular JavaScript function calls, which React uses to create and update the DOM efficiently.

Overall, JSX provides a familiar and expressive way to describe the structure and behavior of UI components in React, combining the power of JavaScript with the declarative nature of HTML-like syntax.