interview
react-basics
JSX

React 基础面试题, JSX

React 基础面试题, JSX

QA

Step 1

Q:: What is JSX?

A:: JSX stands for JavaScript XML. It is a syntax extension for JavaScript that allows you to write HTML directly within React code. JSX produces React elements and it’s syntactic sugar for the React.createElement() function. Although JSX is not mandatory in React, it makes writing UI components more intuitive.

Step 2

Q:: Why is JSX used in React?

A:: JSX makes it easier to write and add HTML in React. It allows developers to combine HTML with JavaScript logic, which enables more readable and maintainable code. Additionally, JSX helps prevent injection attacks since it escapes any values embedded in the JSX expressions.

Step 3

Q:: Can browsers read JSX directly?

A:: No, browsers cannot read JSX directly. JSX needs to be transpiled into regular JavaScript using tools like Babel before it can be executed in the browser.

Step 4

Q:: How do you embed expressions in JSX?

A:: You can embed any JavaScript expression in JSX by wrapping it in curly braces {}. For example, you can include a variable, a function call, or any JavaScript expression inside the JSX code.

Step 5

Q:: What are the limitations of JSX?

A:: JSX expressions must have a single parent element. You cannot return multiple sibling elements directly without wrapping them in a single enclosing tag, like a <div> or <React.Fragment>. Additionally, JSX attributes cannot contain objects and functions directly without using curly braces.

用途

JSX is a fundamental concept in React that developers need to understand to write components effectively`. Since React applications often involve the creation of reusable UI components, knowing how to use JSX is critical. In production, JSX is used in almost every React component, making it an essential skill for any React developer.`\n

相关问题

🦆
What is Babel and how does it relate to JSX?▷

Babel is a JavaScript compiler that is used to convert ECMAScript 2015+ code into a backwards-compatible version of JavaScript. It also converts JSX syntax into standard JavaScript that browsers can understand. Babel plays a crucial role in React development by transpiling JSX code.

🦆
What is the difference between an element and a component in React?▷

A React element is a plain object describing what you want to appear on the screen in terms of the DOM nodes or other components. A React component is a function or class that optionally accepts input (i.e., props) and returns a React element describing what should appear on the screen.

🦆
How does React handle HTML attributes in JSX?▷

In JSX, HTML attributes are written in camelCase instead of lowercase. For example, 'class' becomes 'className', and 'for' becomes 'htmlFor'. React uses these attributes to interact with the DOM.

🦆
What is the purpose of React.createElement?▷

React.createElement() is a function that returns an object representing a virtual DOM element. JSX is syntactic sugar that gets compiled to React.createElement() calls, making it easier to write React components.

🦆
How do you handle events in React using JSX?▷

In React, event handling is similar to handling events in regular HTML, but with a few syntactic differences. Events are named using camelCase, and you pass the event handler as a function reference within curly braces. For example, you would use 'onClick={this.handleClick}' for a button's click event.

React 中 Component 和 PureComponent 有什么区别React Hooks