A Comprehensive Guide to Writing JSX in React (with Vite)

Day #18 of #100daysofMiva, I've been working on various React and Vite projects, both public and private. Today, I just want to write about jsx, it's technicalities and what I've learnt so far.

JSX (JavaScript XML) is a syntax extension used in React that allows developers to write HTML-like code within JavaScript. It's a core part of the React framework, enabling the creation of user interfaces in a declarative manner. While JSX may look like HTML, it's transformed into JavaScript under the hood.

In this guide, I will explore JSX syntax, concepts, and best practices for writing JSX in React projects, specifically those built with tools like Vite. This guide does not focus on setting up React or Vite but rather on mastering JSX itself. If you'll like to know how to set up React and Vite applications, you can check previous posts where I've covered the topic:

Setting up simple React components (also helpful for interviews)

Table of Contents

1. What is JSX?
2. JSX Syntax and Basic Concepts
• Embedding Expressions in JSX
• JSX as Expressions
• Attributes in JSX
• JSX Children
3. Conditional Rendering in JSX
• Using Ternary Operators
• Logical AND (&&) Rendering
• Inline If-Else Conditions
4. Styling in JSX
• Inline Styles
• CSS Modules
5. JSX Lists and Keys
6. Handling Events in JSX
7. JSX Best Practices
• Fragment Usage
• Component Naming
• Clean and Readable Code
8. JSX with Vite

1. What is JSX?

JSX is a syntax extension for JavaScript that looks similar to HTML and is used to describe the UI in React components. JSX is not a string or HTML but syntax that gets compiled to React createElement calls, which generate the UI.

JSX allows you to mix HTML-like code with JavaScript, enabling the creation of dynamic components that react to user inputs and data changes.

Example:

function WelcomeMessage() {
  return <h1>Hello, World!</h1>;
}

Under the hood, this JSX gets compiled into:

function WelcomeMessage() {
  return React.createElement('h1', null, 'Hello, World!');
}

JSX Syntax and Basic Concepts

Embedding Expressions in JSX

In JSX, you can embed any JavaScript expression by wrapping it in curly braces {}. Expressions can include variables, functions, or any valid JavaScript.

function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

If you pass "Jane" as the name prop, the output will be:

<h1>Hello, Jane!</h1>

JSX as Expressions

JSX can be assigned to variables, passed as function arguments, and returned from functions because JSX itself is an expression.

const element = <h1>Welcome to the blog!</h1>;

function render() {
  return element;
}

Attributes in JSX

In JSX, you can add attributes to elements similar to HTML, but camelCase is used for most attribute names, such as className, onClick, tabIndex, etc.

HTML:

<button class="btn">Click Me</button>

JSX:

<button className="btn">Click Me</button>

Self-closing tags: Elements like <img>, <br>, and <input> must be written as self-closing tags in JSX:

<img src="logo.png" alt="Logo" />

JSX Children

In JSX, children can be nested inside elements, such as text, elements, or even other components.

<div>
  <h1>Title</h1>
  <p>This is a description.</p>
</div>

JSX can also return arrays of elements:

return [<h1 key="1">First</h1>, <h1 key="2">Second</h1>];

Conditional Rendering in JSX

React allows you to render elements conditionally using JavaScript conditions within JSX.

Using Ternary Operators

The ternary operator is a common method to conditionally render different elements.

function Greeting({ isLoggedIn }) {
  return isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign in.</h1>;
}

Logical AND (&&) Rendering

If the first condition is true, React will render the second part. Otherwise, it won’t render anything.

function Notification({ unreadMessages }) {
  return (
    <div>
      {unreadMessages.length > 0 && (
        <h2>You have {unreadMessages.length} unread messages.</h2>
      )}
    </div>
  );
}

Inline If-Else Conditions

You can also use if-else statements, though they require separating logic from JSX:

function Greeting({ isLoggedIn }) {
  if (isLoggedIn) {
    return <h1>Welcome back!</h1>;
  } else {
    return <h1>Please sign in.</h1>;
  }
}

Styling in JSX

Inline Styles

In JSX, inline styles are written as objects. Properties are camelCased rather than hyphenated.

const divStyle = {
  backgroundColor: 'lightblue',
  padding: '10px',
};

function MyComponent() {
  return <div style={divStyle}>Styled with inline styles</div>;
}

CSS Modules

CSS Modules allow for scoped CSS, preventing naming collisions. With CSS Modules, the class names are unique to their components.

import styles from './MyComponent.module.css';

function MyComponent() {
  return <div className={styles.container}>Styled with CSS modules</div>;
}

JSX Lists and Keys

When rendering a list of elements in JSX, each element should have a unique key prop to help React optimize rendering.

const items = ['Apple', 'Banana', 'Cherry'];

function FruitList() {
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}

Handling Events in JSX

Events in JSX are similar to HTML but use camelCase syntax and take a function as a handler.

function ClickButton() {
  function handleClick() {
    alert('Button clicked!');
  }

  return <button onClick={handleClick}>Click Me</button>;
}

React event handlers work across all browsers and use a synthetic event system for performance and compatibility.

JSX Best Practices

Fragment Usage

Sometimes, JSX requires wrapping multiple elements in a single parent. Instead of using an extra div, you can use React Fragments (<></>).

function MultiElement() {
  return (
    <>
      <h1>Title</h1>
      <p>Description</p>
    </>
  );
}

Component Naming

Components should be named with an uppercase letter. React treats lowercase tags as DOM elements, while uppercase ones are treated as custom components.

function MyButton() {
  return <button>Click Me</button>;
}

Clean and Readable Code

Write clean and readable JSX by breaking complex UI into smaller components. Avoid deeply nested structures by creating reusable components.

function Card({ title, content }) {
  return (
    <div className="card">
      <h2>{title}</h2>
      <p>{content}</p>
    </div>
  );
}

JSX with Vite

With Vite, JSX functions the same way as in Create React App or other tools, but the build process is optimized for speed and performance.

Hot Module Replacement (HMR)

Vite enables fast hot module replacement, meaning any JSX changes will reflect instantly without a full reload.