Roman

Posted on Jun 3

Everything About JSX Syntax And Its Basics: A Quick Guide

#react #jsx #jsxsyntax #reactsyntax

This blog is originally posted at Programmingly.dev. Visit programmingly.dev to read more articles like this.
When diving into the world of ReactJS, one of the first things you encounter is JSX. JSX, or JavaScript XML, is a syntax extension that enables you to write HTML-like code within JavaScript. Despite its initial appearance, JSX is a powerful tool that enhances the way we build user interfaces in React. In this blog post, we’ll take a deep dive into JSX syntax, exploring its intricacies, capabilities, and best practices.

JSX was introduced by Facebook as part of the React library. It was designed to make the process of writing user interfaces in JavaScript easier and more intuitive. Facebook’s development team recognized that traditional JavaScript was not well-suited for describing UIs, which led to the creation of JSX.

Understanding JSX

JSX allows developers to write UI components using a syntax that closely resembles HTML. It’s important to note that JSX is not valid JavaScript or HTML on its own. Instead, JSX code gets transpiled into regular JavaScript code before being executed in the browser. This transpilation process is handled by tools like Babel, which convert JSX syntax into React.createElement calls.

Let’s start with a basic example of JSX:

const element = <h1>Hello, world!</h1>;

In this example,

Hello, world!

looks like HTML, but it’s actually JSX. When transpiled, it becomes:

const element = React.createElement('h1', null, 'Hello, world!');

This React.createElement function creates a React element, which is used to render content to the DOM.

How Does JSX Work?

JSX is not valid JavaScript or HTML on its own. Under the hood, JSX is transpiled to regular JavaScript by a tool like Babel before the code runs in the browser. This transpilation process converts JSX into React.createElement calls.

For example, the JSX:

const element = <h1>Hello, world!</h1>;

gets transpiled to:

const element = React.createElement('h1', null, 'Hello, world!');

The React.createElement function is what actually creates the React element used to update the UI.

How JSX Syntax benefits us?

Improved Readability: JSX’s HTML-like syntax makes the code more readable and easier to understand, especially for those who are already familiar with HTML.
Component-based Structure: JSX fits naturally with React’s component-based architecture, making it easy to see the structure and hierarchy of components.
Enhanced Developer Experience: With JSX, you get better error messages and warnings during development, which helps in debugging and maintaining the code.
Problem JSX Solved: JSX simplifies this process by allowing developers to write HTML-like code directly within JavaScript, which is then seamlessly transformed into React elements.
Is JSX Mandatory in React: No, JSX is not mandatory in React, but it is highly recommended. You can write React code using plain JavaScript by calling React.createElement directly.

JSX Features and Syntax

Embedding Expressions

One of the powerful features of JSX is the ability to embed JavaScript expressions within curly braces {}. This allows you to include dynamic content within your JSX code:

const name = 'Alice';
const element = <h1>Hello, {name}!</h1>;

Attributes

JSX supports HTML-like attributes for elements. However, there are some differences. For example, the class attribute in HTML becomes className in JSX:

const element = <div className="container">Content here</div>;

Self-Closing Tags

Similar to HTML, elements with no children must be self-closed in JSX:

const element = <img src="image.jpg" alt="A description" />;

Conditional Rendering

JSX allows you to render elements conditionally using JavaScript conditions:

const isLoggedIn = true;
const element = isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign up.</h1>;

Looping

You can use JavaScript loops like map to render lists of elements:

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li key={number.toString()}>
    {number}
  </li>
);

const element = <ul>{listItems}</ul>;

Fragments

JSX supports fragments, which allow you to group multiple elements without adding extra nodes to the DOM:

const element = (
  <>
    <h1>Hello, world!</h1>
    <h2>Welcome to learning JSX.</h2>
  </>
);

Inline Styles

You can style JSX elements using inline styles by passing a JavaScript object to the style attribute:

const element = <h1 style={{ color: 'blue', fontSize: '24px' }}>Hello, world!</h1>;

Best Practices for JSX

Keep Components Small and Focused: Each component should do one thing and do it well, promoting reusability and readability. Use Descriptive Names: Clearly name your components and props to make your code more understandable.
Consistent Formatting: Follow a consistent code style to improve maintainability.
Avoid Inline Styles: For better maintainability and consistency, use CSS classes or styled-components instead of inline styles.

Conclusion

JSX is a powerful syntax extension for JavaScript that enhances the React development experience. It makes it easier to write and understand UI components by allowing developers to use an HTML-like syntax directly within JavaScript. By solving the verbosity and complexity issues of traditional JavaScript UI creation, JSX has become an essential tool for React developers. Whether you’re new to React or looking to deepen your understanding, mastering JSX is a key step towards becoming a proficient React developer. Happy coding!

DEV Community