Rendering with JSX

This chapter will introduce you to JSX, which is the XML/HTML markup syntax that’s embedded in your JavaScript code and used to declare your React components. At the lowest level, you’ll use HTML markup to describe the pieces of your UI. Building React applications involves organizing these pieces of HTML markup into components. In React, creating a component allows you to define custom elements that extend beyond basic HTML markup. These custom elements, or components, are defined using JSX, which then translates them into standard HTML elements for the browser. This ability to create and reuse custom components is a core feature of React, enabling more dynamic and complex UIs. This is where React gets interesting – having your own JSX tags that can use JavaScript expressions to bring your components to life. JSX is the language used to describe UIs built using React.

In this chapter, we’ll cover the following:

• Your first...

Technical requirements

The code for this chapter can be found in the following directory of the accompanying GitHub repository: https://github.com/PacktPublishing/React-and-React-Native-5E/tree/main/Chapter02.

Your first JSX content

In this section, we’ll implement the obligatory Hello World JSX application. This initial dive is just the beginning – it’s a simple yet effective way to get acquainted with the syntax and its capabilities. As we progress, we’ll delve into more complex and nuanced examples, demonstrating the power and flexibility of JSX in building React applications. We’ll also discuss what makes this syntax work well for declarative UI structures.

Hello JSX

Without further ado, here’s your first JSX application:

import * as ReactDOM from "react-dom";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <p>
    Hello, <strong>JSX</strong>
  </p>
);

Let’s walk through what’s happening here.

The render() function takes JSX as an argument and renders it to the DOM node passed to ReactDOM.createRoot().

The actual JSX content in...

Rendering HTML

At the end of the day, the job of a React component is to render HTML in the DOM browser. This is why JSX has support for HTML tags out of the box. In this section, we’ll look at some code that renders a few of the available HTML tags. Then, we’ll cover some of the conventions that are typically followed in React projects when HTML tags are used.

Built-in HTML tags

When we render JSX, element tags reference React components. Since it would be tedious to have to create components for HTML elements, React comes with HTML components. We can render any HTML tag in our JSX, and the output will be just as we’d expect.

Now, let’s try rendering some of these tags:

import * as ReactDOM from "react-dom";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <div>
    <button />
    <code />
    <input />
    <label />
    <p />
    <pre />
   ...

Creating your own JSX elements

Components are the fundamental building blocks of React. In fact, they can be thought of as the vocabulary of JSX markup, allowing you to create complex interfaces through reusable, encapsulated elements. In this section, we’ll delve into how to create your own components and encapsulate HTML markup within them.

Encapsulating HTML

We create new JSX elements so that we can encapsulate larger structures. This means that instead of having to type out complex markup, you can use your custom tag. The React component returns the JSX that goes where the tag is used. Let’s look at the following example:

import * as ReactDOM from "react-dom";
function MyComponent() {
  return (
    <section>
      <h1>My Component</h1>
      <p>Content in my component...</p>
    </section>
  );
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<MyComponent />...

Using JavaScript expressions

As you saw in the preceding section, JSX has a special syntax that allows you to embed JavaScript expressions. Any time React renders JSX content, expressions in the markup are evaluated. This feature is at the heart of JSX’s dynamism; it enables the content and attributes of your components to change in response to different data or state conditions. Each time React renders or re-renders JSX content, these embedded expressions are evaluated, allowing the displayed UI to reflect current data and state. You’ll also learn how to map collections of data to JSX elements.

Dynamic property values and text

Some HTML property or text values are static, meaning that they don’t change as JSX markup is re-rendered. Other values, the values of properties or text, are based on data that is found elsewhere in the application. Remember, React is just the view layer. Let’s look at an example so that you can get a feel for what the JavaScript...

Before you begin: Join our book community on Discord

Give your feedback straight to the author himself and chat to other early readers on our Discord server (find the "react-and-react-native-5e" channel under EARLY ACCESS SUBSCRIPTION).

https://packt.link/EarlyAccess

This chapter will introduce you to JSX, which is the XML/HTML markup syntax that's embedded in your JavaScript code and used to declare your React components. At the lowest level, you'll use HTML markup to describe the pieces of your UI. Building React applications involves organizing these pieces of HTML markup into components. When you create a component, you add new vocabulary to JSX beyond basic HTML markup. This is where React gets interesting – when you have your own JSX tags that can use JavaScript expressions to bring your components to life. JSX is the language used to describe UIs built using React.In this chapter, we'll cover the following:

• Your first JSX content
• Rendering HTML...

Technical requirements

The code for this chapter can be found in the following directory of the accompanying GitHub repository: https://github.com/PacktPublishing/React-and-React-Native-5E/tree/main/Chapter02.