React

• How to
• 11 minutes

Welcome to your React guide on Dynatrace Developer. If you've reached this page, you likely wish to get started with React.

The following documentation will introduce you to important React concepts. By the end of this guide, you'll have enough knowledge to start building React app. Although this guide won't cover everything about React, we've provided helpful links to resources for further reading.

Prerequisite​

React is a JavaScript library. You'll need a good understanding of JavaScript and HTML concepts to make the most of this guide. If you need a refresher, look at this JavaScript tutorial.

What's React?​

A JavaScript library for building user interfaces -- From React docs

It's a library that helps you create user interfaces (UIs) using composable UI elements.

Following are some key features of React:

• Component-based: React components are the building blocks of a React app. Think of components as something similar to HTML elements. In React, you create encapsulated components with their state, and then you can combine them to make an application.

• Declarative: You can create your views declaratively in React. It makes code easier to understand.

Create components​

Creating a component is as easy as creating a JavaScript function that returns some markup. Take a look at the following example:

function MyComponent() {
  return <span>My Fancy Component</span>;
}

You have a function named MyComponent that returns the span element.

Render components​

To render your components, you create a React root using createRoot by passing the DOM container. This React root is then used to render React elements into the DOM with the render function, as shown:

import { createRoot } from 'react-dom/client';

function MyComponent() {
  return <span>My Fancy Component</span>;
}

const domRoot = document.getElementById('root');
const reactRoot = createRoot(domRoot);

reactRoot.render(<MyComponent />);

Write markup​

You've already seen that react components return markup. This markup isn't HTML. It's called JSX, syntactic sugar for JavaScript, to write XML-like declarative code.

Since JSX is just syntactic sugar, it's also optional. The compiler under the hood converts JSX into JavaScript function calls. Following is an example of MyComponent with and without JSX:

// jsx
function MyComponent() {
  return <span>My Fancy Component</span>;
}

// without jsx
function MyComponent() {
  return React.createElement('span', null, 'My Fancy Component');
}

The compiler replaces JSX with React.createElement function calls in this example. Therefore, you can also assign JSX to a variable, pass it to a function, and return it from a function like a normal JavaScript function. Following are some examples of valid JSX code along with React.createElement version:

// assign jsx to variable
const MyElement = <h1>Hi there!</h1>;

const MyElement = React.createElement('h1', null, 'Hi there!');

// return jsx from a function
const doSomething = () => {
  return <span>Do Something</span>;
};

const doSomething = () => {
  return React.createElement('span', null, 'Do Something');
};

// jsx as a function argument
const anotherFunction = (jsxValue) => {
  // do something with jsxValue here
};

anotherFunction(<h1>Hello</h1>);

const anotherFunction = (jsxValue) => {
  // do something with jsxValue here
};
anotherFunction(React.createElement('h1', null, 'Hello'));

// Inserted by a compiler (don't import it yourself!)
import { jsx as _jsx } from 'react/jsx-runtime';

function MyComponent() {
  return _jsx('span', { children: 'My Fancy Component' });
}

Add expressions in JSX​

You can also add JavaScript expressions in your JSX code using curly braces. In the following example, you're doing the following:

• create a variable fullName
• then wrap it around curly braces in the JSX and assign that to the greeting variable
• finally, use the greeting variable in the return expression

Take a look at the following code snippet:

function ExpressionComponent() {
  const fullName = 'Lorem Stark';
  const greeting = <h1>Welcome {fullName}</h1>;

  return (
    <div>
      {greeting}
    </div>
  );
}

It will render <h1>Welcome Lorem Stark</h1> on the page.

Conditional rendering​

You can also conditionally render some JSX. In the following example, the app only renders <span>Dark Mode</span> when darkMode is true:

function ConditionalRender() {
  let darkMode = true; // boolean value
  return (
    <div>{darkMode && <span>Dark Mode</span>}</div>;
  );
}

You can also use a ternary operator to have if/else like rendering. In the following example, if darkMode is true the app renders <span>Dark Mode</span>, else it renders <span>Light Mode</span>.

function TernaryComponent() {
  let darkMode; // boolean value
  return <div>{darkMode ? <span>Dark Mode</span> : <span>Light Mode</span>}</div>;
}

Render list​

You can also render objects and arrays. In the following example, the app renders the list of people on the page by returning JSX from Array's map:

function AComponentWithMap() {
  const people = [
    {
      name: 'Philip Prosacco',
      id: 'abc',
    },
    {
      name: 'Allison Nolan',
      id: 'xyz',
    },
  ];

  return (
    <div>
      <h2>List of people</h2>
      <ul>
        {people.map((person) => (
          <li key={person.id}>{person.name} </li>
        ))}
      </ul>
    </div>
  );
}

Things to remember​

Here are some things to remember:

• You can mix HTML tags and React components in JSX.
• A React component can only return one root JSX tag. If you have to return many elements from a React component, you can wrap a div or React.Fragment component around them. Take a look at Fragment documentation.
• You have to close all HTML tags and React components like <img/>.

Props​

In React, a component can receive input from its outer component. You can achieve this using props. Think of props as something similar to attributes in HTML.

In the following example, you have a StockDetail component that takes an object as an argument with two props, stockSymbol and stockValue, and shows them on page.

function StockDetail({ stockSymbol, stockValue }) {
  return (
    <div>
      <h2>Stock Symbol: {stockSymbol}</h2>
      <h3>Stock Value: {stockValue}</h3>
    </div>