Multi-line JSX should always be wrapped in parentheses.
Importing another component
WelcomePage.tsx
Smart 🧠 | Dumb 🎨 | |
---|---|---|
Holds state | ✅ | ❌ |
Fetches data | ✅ | ❌ |
Handles logic | ✅ | ❌ |
Pure component | ❌ | ✅ |
Focus | Behaviour & data | Layout & presentation |
Components always return a single node.
If you want to return multiple nodes, wrap them in a Fragment to avoid rendering an unnecessary <div>.
Using the long-form
Fragment
is equivalent to the shorter
We will see in a bit in which situation the long-form <Fragment> is useful.
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
React updates the UI in two main phases: render and commit.
Our components can be tested using Vitest and React Testing Library.
The jest-dom package is required to integrate React Testing Library with Vitest.
Add in the package.json in the scripts section:
npm run test
On your CI pipeline you typically want to ensure the quality of the solution
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.
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.
$ npm create vite@latest pokedex-vite
> React
> Typescript + SWC
$ cd ./pokedex-vite
$ npm install
$ npm run dev
We learned…