Rendering Elements

Introduction

Rendering elements is the foundation of any React application. Elements are the smallest building blocks of React apps, representing what you want to display on the screen. This chapter will cover how to create and render elements, updating rendered elements, and the lifecycle of rendering.

1. Creating an Element

In React, elements are immutable objects representing the UI at a specific point in time. You can create a React element using the React.createElement() function or JSX syntax.

Using React.createElement()

The React.createElement() function creates an element with a specific type, properties (props), and children.

				
					const element = React.createElement(
  'h1',
  { className: 'greeting' },
  'Hello, world!'
);

Using JSX

JSX is a syntax extension that looks similar to HTML. It makes it easier to create React elements and is compiled to React.createElement() calls under the hood.

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

2. Rendering an Element to the DOM

To render a React element into the DOM, use the ReactDOM.render() function. It takes a React element and a DOM container where the element should be rendered.

				
					import React from 'react';
import ReactDOM from 'react-dom';

const element = <h1>Hello, world!</h1>;
ReactDOM.render(element, document.getElementById('root'));

3. Updating the Rendered Element

React elements are immutable. Once you create an element, you cannot change its children or attributes. To update the UI, create a new element and pass it to ReactDOM.render().

Example: Updating a Clock

				
					function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(element, document.getElementById('root'));
}

setInterval(tick, 1000);

4. Conditional Rendering

React allows you to render elements conditionally based on the state or props of a component. Use JavaScript expressions and conditional operators within JSX.

Example: Conditional Greeting

				
					function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <h1>Welcome back!</h1>;
  }
  return <h1>Please sign up.</h1>;
}

ReactDOM.render(<Greeting isLoggedIn={true} />, document.getElementById('root'));

5. Lists and Keys

Rendering lists in React involves mapping over an array of data to produce a list of elements. Each element in the list should have a unique “key” prop to help React identify which items have changed.

Example: Rendering a List

				
					function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <li key={number.toString()}>
      {number}
    </li>
  );
  return (
    <ul>{listItems}</ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);

6. Handling Events

React elements handle events similarly to HTML elements but with some differences. Events are named using camelCase, and you pass a function as the event handler.

Example: Handling a Button Click

				
					function ActionLink() {
  function handleClick(e) {
    e.preventDefault();
    console.log('The link was clicked.');
  }

  return (
    <a href="#" onClick={handleClick}>
      Click me
    </a>
  );
}

ReactDOM.render(
  <ActionLink />,
  document.getElementById('root')
);

Rendering elements in React is the core concept around which React applications are built. Understanding how to create, update, and render elements, handle conditional rendering, lists, and events will enable you to build dynamic and efficient user interfaces.