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:
const element = <h1>Hello, world!</h1>;
You can also insert attributes into JSX elements:
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
becomesclassName
, andfor
becomeshtmlFor
.- 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.