DEV Community

Cover image for JSX in React: A Beginner's Guide
Ellis
Ellis

Posted on

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>;
Enter fullscreen mode Exit fullscreen mode

2. Embedding Expressions in JSX

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

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

👉 Download eBook
javascript-from-es2015-to-es2023

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>
);
Enter fullscreen mode Exit fullscreen mode

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>;
Enter fullscreen mode Exit fullscreen mode

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>;
Enter fullscreen mode Exit fullscreen mode

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>;
Enter fullscreen mode Exit fullscreen mode

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>
  </>
);
Enter fullscreen mode Exit fullscreen mode

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
javascript-from-es2015-to-es2023

Top comments (0)