JSX in React: A Beginner's Guide

JSX, or JavaScript XML, is a syntax extension for JavaScript that allows you to write HTML directly within React. It makes it easier to create and visualize the structure of your UI components. In this guide, we'll cover the basics of JSX, its syntax, and some best practices.

👉 Download eBook - JavaScript: from ES2015 to ES2023

.

Table of Contents

1. Introduction to JSX
2. Embedding Expressions in JSX
3. JSX Syntax Rules
4. Styling in JSX
5. Conditional Rendering in JSX
6. Lists and Keys in JSX
7. JSX Best Practices

1. Introduction to JSX

JSX looks like HTML but is transformed into JavaScript before being rendered in the browser. It allows developers to write UI elements in a syntax that resembles HTML, making the code easier to understand and maintain.

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

2. Embedding Expressions in JSX

You can embed JavaScript expressions within JSX using curly braces {}.

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

👉 Download eBook

3. JSX Syntax Rules

JSX has some important syntax rules:

• Single Parent Element: JSX expressions must have one parent element.
• Closing Tags: All tags must be closed.
• CamelCase for Attributes: HTML attributes are written in camelCase.

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

4. Styling in JSX

In JSX, styles are written as objects, and CSS properties are written in camelCase.

const divStyle = {
  color: 'blue',
  backgroundColor: 'lightgray'
};

const element = <div style={divStyle}>Styled text</div>;

5. Conditional Rendering in JSX

You can conditionally render elements using JavaScript operators like if statements and ternary operators.

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

6. Lists and Keys in JSX

When rendering lists of elements, each element should have a unique key attribute to help React identify which items have changed.

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

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

7. JSX Best Practices

• Keep JSX readable: Break down complex components into smaller, reusable components.
• Use fragments: Use React fragments (<React.Fragment> or <>) to group multiple elements without adding extra nodes to the DOM.
• Self-closing tags: Use self-closing tags for elements without children.
• Consistent style: Stick to a consistent style for writing JSX.

const element = (
  <>
    <h1>Title</h1>
    <p>Description</p>
  </>
);

Conclusion

JSX is a powerful feature of React that makes writing and maintaining your UI code more intuitive. By understanding and following JSX syntax rules and best practices, you can create more readable and maintainable React components.

👉 Download eBook