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

                    
                        $ npm create vite@latest pokedex-vite
                          > React
                          > Typescript + SWC
                        $ cd ./pokedex-vite
                        $ npm install
                        $ npm run dev
                    
                

• 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

Our components can be tested using the Vitest and React Testing Library

Add the library

Add in the package.json in the scripts section

Configure

Configure

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

Follow-Up: Continuous Integration

On your CI pipeline you typically want to ensure the quality of the solution

• npm run test:ci which is defined in package.json with the command vitest run without watchmode
• npm run lint
• npm run build

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 PokeList.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