top of page
Logo der Online Agentur mdwp

JSX

JSX stands for JavaScript XML. It is a syntax extension for JavaScript that is primarily used in React JS to describe what the user interface should look like. Instead of separating markup and logic in separate files, React uses JSX to combine the two, allowing developers to write markup directly within their JavaScript code.

This results in a more integrated and concise code base. You can write JavaScript expressions inside the curly braces (`{}`) in your JSX, and even apply JavaScript methods, such as `map()`, to render specific components or elements.

Here's a simple example of JSX in a React component:

```jsx
class Hello extends React.Component {
render() {
return (
<div>
<h1>Hello, {this.props.name}</h1>
</div>
);
}
}
```

In the above code, the `Hello` component contains JSX in its `render()` method. The component returns a `div` element containing an `h1` element. The content of the `h1` element is a combination of a string ("Hello, ") and a JavaScript expression (`{this.props.name}`).

The JavaScript expression is enclosed in curly braces, indicating to the JSX that it needs to interpret the content within the braces. In this case, it will print the value of `this.props.name` which is passed as a property when the component is used.

bottom of page