DEV Community

Md Yusuf
Md Yusuf

Posted on

Understanding JSX in React

JSX (JavaScript XML) is a syntax extension for JavaScript commonly used with React to describe what the user interface should look like. It looks similar to HTML but works within JavaScript. JSX allows you to write HTML elements directly in JavaScript and place them in the DOM. It makes React components easier to write and understand by visually resembling HTML.

Example of JSX:

function Welcome(props) {
  return <h1>Hello, {props.name}!</h1>;
}

const element = <Welcome name="John" />;
Enter fullscreen mode Exit fullscreen mode

In this example:

  • Welcome is a functional component that takes props as an argument.
  • The element is a JSX expression that passes the name "John" to the Welcome component.

JSX is then compiled into regular JavaScript calls to React.createElement() during the build process. Here's how JSX might be compiled:

React.createElement(Welcome, { name: "John" });
Enter fullscreen mode Exit fullscreen mode

It simplifies the creation of React components and boosts readability, allowing developers to work with UI layouts more intuitively.

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay