Getting started with JSX: A Guide for React Developers

tags: [“JSX”, “React”, “web development”, “frontend development”]

Introduction to JSX

JSX is a technology introduced by React that allows developers to write declarative syntax for defining a component’s UI using JavaScript. It is not a mix of HTML and JavaScript, but rather a way to describe the UI elements using JavaScript. JSX offers many advantages when working with components in React.

A JSX primer

To define a JSX element, you simply write JavaScript code that resembles HTML syntax. For example:

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

You can also insert attributes into JSX elements:

1 2	const myId = 'test'; const element = <h1 id={myId}>Hello, world!</h1>;

When using attributes with a dash (-), such as class, you need to convert them to camelCase syntax (e.g., className). Additionally, for becomes htmlFor in JSX.

Transpiling JSX

Browsers cannot directly execute JavaScript files with JSX code. JSX must be transpiled into regular JavaScript. This is done using tools like Babel, which is often included in projects created using create-react-app.

JS in JSX

JSX allows you to insert any JavaScript code using curly braces {}. This can be used to reference variables or perform more complex JavaScript operations. For example:

const paragraph = 'A paragraph';
ReactDOM.render(
  <div id="test">
    <h1>A title</h1>
    <p>{paragraph}</p>
  </div>,
  document.getElementById('myapp')
);

HTML in JSX

JSX resembles HTML, but it is actually XML syntax. There are a few differences to keep in mind:

All tags must be closed, including self-closing tags (e.g., <br />).
Attributes use camelCase syntax instead of kebab-case.
class becomes className, and for becomes htmlFor.
The style attribute is defined using an object instead of a string.
Forms have some slight changes for consistency and utility.

CSS in React

JSX provides a convenient way to define CSS within components. Inline styles in JSX use an object syntax instead of a string, ensuring encapsulation and avoiding class name conflicts. However, for more complex styling scenarios, external stylesheets or CSS-in-JS solutions may be more appropriate.

Forms in JSX

JSX simplifies working with HTML forms by providing some changes to their behavior. The value attribute holds the current value of a field, while defaultValue holds the default value. This helps address some quirks with regular DOM interaction. Additionally, the onChange event behaves consistently across different types of form fields.

JSX auto escapes

To mitigate the risk of XSS exploits, JSX automatically escapes expressions. This means that HTML entities in string expressions will be rendered as plaintext. To display HTML entities in JSX, you can either move them outside the expression or use Unicode representations.

White space in JSX

White space in JSX follows two rules:

Horizontal white space is trimmed to a single space.
Vertical white space is eliminated. To add white space, you can use space expressions or embed the desired text within JSX expressions.

Adding comments in JSX

You can add comments to JSX using JavaScript comment syntax ({/* Comment */}). This can be useful for documenting your JSX code.

Spread attributes

JSX supports the use of the spread operator to simplify assigning values to attributes. Instead of manually assigning each attribute, you can use the spread operator to automatically assign the properties of an object as attributes.

How to loop in JSX

To generate JSX elements dynamically, you can use loops and array manipulation. You can create an array of JSX elements and then render them using the curly brace syntax within JSX. Alternatively, you can use the map function directly within JSX to loop over an array and generate JSX elements.

By understanding JSX and its syntax, you’ll be able to create more efficient and expressive UI components in React.