Simple React Component

Single-line vs. multi-line JSX

Multi-line JSX should always be wrapped in parentheses.

Component Splitting

Importing another component

Fragments

Components always return a single node .

If you want to return multiple nodes, wrap them in a Fragment to avoid rendering an unnecessary <div> .

Fragments

Using the long-form Fragment is equivalent to the shorter <>…</> syntax.

We will see in a bit in which situation the long-form <Fragment> is useful.

Exercise

• Setup a new React project with
  npx create-react-app name --template typescript
• Create a PokeListEntry component to show a pokémon name like 'Bulbasaur' kept in a constant
• Consume this component in the App.tsx

Solution

Solution continued

Props

We can pass data to child components by setting their props (properties)

A prop can have any type, e.g. it can be a JavaScript primitive, an object, or a function

Props can be defined as required or optional

Pass functions as props to listen to events emitted by child components

Define Props on a component

Exercise

• Create Props for your PokeListEntry component expecting an optional name
• Set a default name if property is not passed by consumer
• Use object destruction

Solution

Testing / React Testing Library

Our components can be tested using the React Testing Library

It is already pre-installed when using Create React App.

Testing our dumb component

TDD - Test Driven Development

It is a good practice to conduct TDD wherever possible

Let us amend the component such that we can set the name through an name property

Add new test case

Implement / Make the test green

Refactor

Refactor your code such that it is extensible and easy to understand

Cheat Sheet

• getBy* - verify that an element/node is present at this very moment. Throws an error if element/node is not found.
• queryBy* - similar to getBy* , but will not throw an error if the element/node is absent.
• findBy* - verify that an element will be present, e.g. upon completion of an asynchronous API-Call

Find more about queries here

Exercise

• Test your PokeListEntry component with React Testing Library
• Stretch Goal: Parameterize your test with React Testing Library using it.each(table)(name, fn, timeout)

Solution

Solution continued

List

To render a list of items, we call the map function on an array.
In the callback we map the array item to a JSX element.

We can map to an HTML element or to a custom component.

The JSX element returned from map must have a key prop.

This is a special prop used by React internally to distinguish the elements. It must be unique within the list (e.g. an entity ID).

Use a Fragment to return multiple elements from map .

Here we can't use the shorter <>…</> syntax. Only Fragment can take the key prop.

The children prop

Like HTML elements, React components can be nested:

The parent component receives the child components through the children prop.

The children prop can be rendered in the parent component's JSX.

Exercise

• Create a (hard-coded) array of Pokémon
• Render all Pokémon names in a list (hint: add a new PokeEntry.tsx component)
• Make the name in PokeListEntry.tsx required
• Write tests for the list
• Create a Layout component which wraps the list with a page structure (containing a nav bar with dummy links)

Solution

Solution continued

Solution continued

Solution continued