Hello World
;
const rootElement = document.getElementById("root");
ReactDOM.createRoot(rootElement).render(element);
```
As you can see, this is much easier to read than both the straight `React.createElement` API and the vanilla JS API. Most people using React use JSX to write their components.
| Exercise B (estimate: 5 min) |
| ------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Change the [JSX example from above](https://jsbin.com/xitupewiwe/edit?html,output) to instead render a `h1` tag with the text "Hello Code Your Future". |
### Let's create a React app
| Exercise C (estimate: 10 min) |
| ------------------------------------------------------------------------------------------------ |
| 1. If you haven't already, follow the instructions above to create a React app called `pokedex`. |
#### What got created?
Diagram of folder layout created by create-react-app. Click [here](https://excalidraw.com/#json=5666421027635200,SRigco8_OhrCb94QSj4Wow) for live diagram.
### React Components
We looked at the beginning of the lesson at the concept of components. Now let's look at how components are made in React.
```jsx
import React from "react";
import ReactDOM from "react-dom/client";
function HelloWorld() {
return Hello World
;
}
ReactDOM.createRoot(document.getElementById("root")).render(` element with the text "Welcome to the Pokedex". What do you see in your web browser? |
| 6. Create a `` element that *wraps around* the `` you just created. |
| 7. Below the `` element (but within the ``), create an `![]()
` element. Then make its `src` attribute equal to `https://assets.pokemon.com/assets/cms2/img/pokedex/full/016.png`. What do you expect to see in your web browser? |
| 8. Now create a `` element to wrap both the `` element **and** the `![]()
` element. |
**Component Composition**
A component can be combined with another component so that both are rendered. This is called *composition*:
```jsx
function Greeting() {
return Hello;
}
function Mentor() {
return Ali;
}
function HelloWorld() {
return (
` element and its contents and paste it into the `Logo` component. |
| 4. Replace the `` element in the `App` component with the new `Logo` component. |
| 5. Create a new component function named `BestPokemon` and return a `` element with some text saying which is your favorite Pokémon (e.g. "My favorite Pokémon is Squirtle"). |
| 6. *Render* your new `BestPokemon` component below the `Logo` component within the `App` component. |
**Arrow Functions for shorter syntax**
Because a React component is just a function, we can also use the arrow function syntax:
```jsx
const HelloWorld = () => {
return (
Hello World
);
};
```
This can be even shorter again if we use parentheses and implicit return:
```jsx
const HelloWorld = () => (
Hello World
);
```
Although this is shorter, it is less flexible as we cannot insert code that is **not** JSX. Like for example, a `console.log`:
```jsx
// THIS DOES NOT WORK!
const HelloWorld = () => (
console.log('Hello!');
Hello World
);
```
If we want to do this, we can still use arrow functions but we can't use the implicit return.
| Exercise F (estimate: 5 min) |
| -------------------------------------------------------------------------------------- |
| 1. Using the `pokedex` React app that you created earlier, open the `src/App.js` file. |
| 2. Convert the `Logo` and `BestPokemon` functions into arrow functions. |
### Embedding JavaScript into JSX
So far all of the components we have looked at haven't been able to change - they are *hard-coded*. But this doesn't make very interesting websites, we want to be able to use variables with different data. We can insert variables (and some other things) into our React components.
Anything in the JSX that is inside curly braces `{}` is interpreted as a regular JavaScript *expression*. That means you can use every object or function from JavaScript that we have learned so far. Let's look at an example ([interactive example](https://codesandbox.io/s/interpolation-in-jsx-l910pqnjql)):
```jsx
function Greeting() {
const greetingWord = "Hello";
return {greetingWord};
}
```
Now instead of hard-coding the greeting in the `Greeting` component, we are using a variable. Remember that everything between the curly braces is just regular JavaScript. So we can use more than just variables ([interactive example](https://codesandbox.io/s/interpolation-with-methods-in-jsx-nw29kzx744?file=/src/HelloWorld.js)):
```jsx
function Mentor() {
const mentors = ["Ali", "Kash", "Davide", "German", "Gerald"];
return {mentors.join(", ")};
}
```
Now we have modified the `Mentor` component to use the `Array.join` method so that it lists several mentor's names. This also works with other JS types:
```jsx
function Addition() {
return {1 + 2 + 3};
}
```
```jsx
function Weather() {
const weatherData = {
temperature: 5,
location: "London",
};
return (
The temperature in {weatherData.location} is {weatherData.temperature}
);
}
```
```jsx
function formatName(user) {
return user.firstName + " " + user.lastName;
}
function Name() {
const user = {
firstName: "Bob",
lastName: "Marley",
};
return {formatName(user)};
}
```
A common pattern in React is to use `Array.map` to loop through a list of items and render a component for each one ([interactive example](https://codesandbox.io/s/interpolation-with-map-in-jsx-7mw0mw3qx0?file=/src/MentorsList.js)):
```jsx
const mentors = ["Ali", "Kash", "Davide", "German", "Gerald"];
function MentorsList() {
return (
{mentors.map((name) => (
- {name}
))}
);
}
```
Here we are using `Array.map` to turn an array of strings into an array of components.
| Exercise G (estimate: 10 min) |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 1. Using the `pokedex` React app that you created earlier, open the `src/App.js` file. |
| 2. Inside the `Logo` component create a new variable called `appName` and assign it to `"Pokedex"`. |
| 3. Now replace the hard-coded app name with `{appName}`. What do you see in your web browser? What would you do if you wanted to change the app name? |
| 4. Create a new component named `CaughtPokemon`. Within this component return a `` tag with the text "Caught 0 Pokémon on" (we're going to fill in today's date in the next step). |
| 5. Create a variable named `date` within the `CaughtPokemon` component, and assign it today's date (hint: `new Date().toLocaleDateString()`). Finally, render the `date` variable after the text "Caught 0 Pokémon on". |
| 6. Render the `CaughtPokemon` component within the `App` component (below `BestPokemon`). |
| 7. Within the `BestPokemon` component, create a variable named `abilities` and assign it to an array with some Pokémon abilities (e.g. `['Anticipation', 'Adaptability', 'Run-Away']`). |
| 8. Change the `BestPokemon` component to return a `
` element with the existing `` element inside it. Then add a `
` element underneath the `` element. |
| 9. Now use the `.map()` method on the `abilities` variable to loop over each name and return a `
- ` element for each (hint: look at the mentors list example above) within the `
` element. |
### Keys
You may have noticed that we are now seeing a red error message in the Dev Tools: `Warning: Each child in a list should have a unique "key" prop.`. This error happens when you use `Array.map` to return a list of elements ([interactive example](https://codesandbox.io/s/key-prop-for-lists-in-react-pwp8ox4kn0?file=/src/MentorsList.js)):
```jsx
const mentors = ["Ali", "Sub", "Loic", "Anthony", "Lucy", "Mozart"];
function MentorsList() {
return (
{mentors.map((name, index) => (
- {name}
))}
);
}
```
Here we have added a `key` prop to the `li` element. A documentation page explaining in more depth is in the further reading section but basically the `key` prop has a special meaning in React because it is used internally to keep track of which element in the list is which.
### Importing/Exporting Components
To help organize your code, components can be imported and exported just like any other JavaScript code ([interactive example](https://codesandbox.io/s/1z6xozl81l)):
```jsx
import Greeting from "./Greeting";
import Mentor from "./Mentor";
function HelloMentor() {
return (
```
Now let's take a look at using props that we have passed to a component ([interactive example](https://codesandbox.io/s/intro-to-props-vmjy0o91m7?file=/src/Mentor.js)):
```jsx
function Mentor(props) {
console.log(props);
return {props.name};
}
```
React gives you access to props in the **first argument** to the component function. We can then inject props into our component using curly braces.
The `props` variable is just a normal object with key-value pairs that match what was passed to the component. Because it is just a variable, it can be used like any other variable. That includes injecting props into attributes:
```html
{props.name}
```
Or calculating new values:
```html
{props.age + 1}
```
| Exercise I (estimate: 10 min) |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 1. Using the `pokedex` React app that you created earlier, open the `App.js` file. |
| 2. Pass a prop `appName="Pokedex"` to the `Logo` component. |
| 3. Now open the `Logo.js` file. |
| 4. Delete the `appName` variable. What do you see in your web browser? Why? |
| 5. Change the `Logo` function to access the first argument and call it `props`. Use `console.log` to inspect the `props` variable. |
| 6. Change the usage of `appName` in the `` to be `props.appName` instead. Does this fix the problem? Why? |
| 7. Now open the `BestPokemon.js` file. |
| 8. Copy the `abilities` variable and then delete it from `BestPokemon.js`. |
| 9. Paste the `abilities` variable into `App.js`. |
| 10. Pass the `abilities` variable as a prop to `BestPokemon` from `App.js`. |
| 11. In the `BestPokemon.js` file replace the existing usage of `abilities` with the `abilities` **prop**. You should still see the Pokémon ability names in your web browser. |
| 12. **(STRETCH GOAL)** Repeat the process with the `date` variable in the `CaughtPokemon.js` file. |
` you just created. |
| 7. Below the `` element (but within the ``), create an `![]()
` element. Then make its `src` attribute equal to `https://assets.pokemon.com/assets/cms2/img/pokedex/full/016.png`. What do you expect to see in your web browser? |
| 8. Now create a `` element to wrap both the `` element **and** the `![]()
` element. |
**Component Composition**
A component can be combined with another component so that both are rendered. This is called *composition*:
```jsx
function Greeting() {
return Hello;
}
function Mentor() {
return Ali;
}
function HelloWorld() {
return (
` element and its contents and paste it into the `Logo` component. |
| 4. Replace the `` element in the `App` component with the new `Logo` component. |
| 5. Create a new component function named `BestPokemon` and return a `` element with some text saying which is your favorite Pokémon (e.g. "My favorite Pokémon is Squirtle"). |
| 6. *Render* your new `BestPokemon` component below the `Logo` component within the `App` component. |
**Arrow Functions for shorter syntax**
Because a React component is just a function, we can also use the arrow function syntax:
```jsx
const HelloWorld = () => {
return (
Hello World
);
};
```
This can be even shorter again if we use parentheses and implicit return:
```jsx
const HelloWorld = () => (
Hello World
);
```
Although this is shorter, it is less flexible as we cannot insert code that is **not** JSX. Like for example, a `console.log`:
```jsx
// THIS DOES NOT WORK!
const HelloWorld = () => (
console.log('Hello!');
Hello World
);
```
If we want to do this, we can still use arrow functions but we can't use the implicit return.
| Exercise F (estimate: 5 min) |
| -------------------------------------------------------------------------------------- |
| 1. Using the `pokedex` React app that you created earlier, open the `src/App.js` file. |
| 2. Convert the `Logo` and `BestPokemon` functions into arrow functions. |
### Embedding JavaScript into JSX
So far all of the components we have looked at haven't been able to change - they are *hard-coded*. But this doesn't make very interesting websites, we want to be able to use variables with different data. We can insert variables (and some other things) into our React components.
Anything in the JSX that is inside curly braces `{}` is interpreted as a regular JavaScript *expression*. That means you can use every object or function from JavaScript that we have learned so far. Let's look at an example ([interactive example](https://codesandbox.io/s/interpolation-in-jsx-l910pqnjql)):
```jsx
function Greeting() {
const greetingWord = "Hello";
return {greetingWord};
}
```
Now instead of hard-coding the greeting in the `Greeting` component, we are using a variable. Remember that everything between the curly braces is just regular JavaScript. So we can use more than just variables ([interactive example](https://codesandbox.io/s/interpolation-with-methods-in-jsx-nw29kzx744?file=/src/HelloWorld.js)):
```jsx
function Mentor() {
const mentors = ["Ali", "Kash", "Davide", "German", "Gerald"];
return {mentors.join(", ")};
}
```
Now we have modified the `Mentor` component to use the `Array.join` method so that it lists several mentor's names. This also works with other JS types:
```jsx
function Addition() {
return {1 + 2 + 3};
}
```
```jsx
function Weather() {
const weatherData = {
temperature: 5,
location: "London",
};
return (
The temperature in {weatherData.location} is {weatherData.temperature}
);
}
```
```jsx
function formatName(user) {
return user.firstName + " " + user.lastName;
}
function Name() {
const user = {
firstName: "Bob",
lastName: "Marley",
};
return {formatName(user)};
}
```
A common pattern in React is to use `Array.map` to loop through a list of items and render a component for each one ([interactive example](https://codesandbox.io/s/interpolation-with-map-in-jsx-7mw0mw3qx0?file=/src/MentorsList.js)):
```jsx
const mentors = ["Ali", "Kash", "Davide", "German", "Gerald"];
function MentorsList() {
return (
{mentors.map((name) => (
- {name}
))}
);
}
```
Here we are using `Array.map` to turn an array of strings into an array of components.
| Exercise G (estimate: 10 min) |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 1. Using the `pokedex` React app that you created earlier, open the `src/App.js` file. |
| 2. Inside the `Logo` component create a new variable called `appName` and assign it to `"Pokedex"`. |
| 3. Now replace the hard-coded app name with `{appName}`. What do you see in your web browser? What would you do if you wanted to change the app name? |
| 4. Create a new component named `CaughtPokemon`. Within this component return a `` tag with the text "Caught 0 Pokémon on" (we're going to fill in today's date in the next step). |
| 5. Create a variable named `date` within the `CaughtPokemon` component, and assign it today's date (hint: `new Date().toLocaleDateString()`). Finally, render the `date` variable after the text "Caught 0 Pokémon on". |
| 6. Render the `CaughtPokemon` component within the `App` component (below `BestPokemon`). |
| 7. Within the `BestPokemon` component, create a variable named `abilities` and assign it to an array with some Pokémon abilities (e.g. `['Anticipation', 'Adaptability', 'Run-Away']`). |
| 8. Change the `BestPokemon` component to return a `
` element with the existing `` element inside it. Then add a `
` element underneath the `` element. |
| 9. Now use the `.map()` method on the `abilities` variable to loop over each name and return a `
- ` element for each (hint: look at the mentors list example above) within the `
` element. |
### Keys
You may have noticed that we are now seeing a red error message in the Dev Tools: `Warning: Each child in a list should have a unique "key" prop.`. This error happens when you use `Array.map` to return a list of elements ([interactive example](https://codesandbox.io/s/key-prop-for-lists-in-react-pwp8ox4kn0?file=/src/MentorsList.js)):
```jsx
const mentors = ["Ali", "Sub", "Loic", "Anthony", "Lucy", "Mozart"];
function MentorsList() {
return (
{mentors.map((name, index) => (
- {name}
))}
);
}
```
Here we have added a `key` prop to the `li` element. A documentation page explaining in more depth is in the further reading section but basically the `key` prop has a special meaning in React because it is used internally to keep track of which element in the list is which.
### Importing/Exporting Components
To help organize your code, components can be imported and exported just like any other JavaScript code ([interactive example](https://codesandbox.io/s/1z6xozl81l)):
```jsx
import Greeting from "./Greeting";
import Mentor from "./Mentor";
function HelloMentor() {
return (
```
Now let's take a look at using props that we have passed to a component ([interactive example](https://codesandbox.io/s/intro-to-props-vmjy0o91m7?file=/src/Mentor.js)):
```jsx
function Mentor(props) {
console.log(props);
return {props.name};
}
```
React gives you access to props in the **first argument** to the component function. We can then inject props into our component using curly braces.
The `props` variable is just a normal object with key-value pairs that match what was passed to the component. Because it is just a variable, it can be used like any other variable. That includes injecting props into attributes:
```html
{props.name}
```
Or calculating new values:
```html
{props.age + 1}
```
| Exercise I (estimate: 10 min) |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 1. Using the `pokedex` React app that you created earlier, open the `App.js` file. |
| 2. Pass a prop `appName="Pokedex"` to the `Logo` component. |
| 3. Now open the `Logo.js` file. |
| 4. Delete the `appName` variable. What do you see in your web browser? Why? |
| 5. Change the `Logo` function to access the first argument and call it `props`. Use `console.log` to inspect the `props` variable. |
| 6. Change the usage of `appName` in the `` to be `props.appName` instead. Does this fix the problem? Why? |
| 7. Now open the `BestPokemon.js` file. |
| 8. Copy the `abilities` variable and then delete it from `BestPokemon.js`. |
| 9. Paste the `abilities` variable into `App.js`. |
| 10. Pass the `abilities` variable as a prop to `BestPokemon` from `App.js`. |
| 11. In the `BestPokemon.js` file replace the existing usage of `abilities` with the `abilities` **prop**. You should still see the Pokémon ability names in your web browser. |
| 12. **(STRETCH GOAL)** Repeat the process with the `date` variable in the `CaughtPokemon.js` file. |
`), create an `![]()
` element. Then make its `src` attribute equal to `https://assets.pokemon.com/assets/cms2/img/pokedex/full/016.png`. What do you expect to see in your web browser? |
| 8. Now create a `` element to wrap both the `` element **and** the `
` element **and** the `![]()
` element. |
**Component Composition**
A component can be combined with another component so that both are rendered. This is called *composition*:
```jsx
function Greeting() {
return Hello;
}
function Mentor() {
return Ali;
}
function HelloWorld() {
return (
` element and its contents and paste it into the `Logo` component. |
| 4. Replace the `` element in the `App` component with the new `Logo` component. |
| 5. Create a new component function named `BestPokemon` and return a `` element with some text saying which is your favorite Pokémon (e.g. "My favorite Pokémon is Squirtle"). |
| 6. *Render* your new `BestPokemon` component below the `Logo` component within the `App` component. |
**Arrow Functions for shorter syntax**
Because a React component is just a function, we can also use the arrow function syntax:
```jsx
const HelloWorld = () => {
return (
Hello World
);
};
```
This can be even shorter again if we use parentheses and implicit return:
```jsx
const HelloWorld = () => (
Hello World
);
```
Although this is shorter, it is less flexible as we cannot insert code that is **not** JSX. Like for example, a `console.log`:
```jsx
// THIS DOES NOT WORK!
const HelloWorld = () => (
console.log('Hello!');
Hello World
);
```
If we want to do this, we can still use arrow functions but we can't use the implicit return.
| Exercise F (estimate: 5 min) |
| -------------------------------------------------------------------------------------- |
| 1. Using the `pokedex` React app that you created earlier, open the `src/App.js` file. |
| 2. Convert the `Logo` and `BestPokemon` functions into arrow functions. |
### Embedding JavaScript into JSX
So far all of the components we have looked at haven't been able to change - they are *hard-coded*. But this doesn't make very interesting websites, we want to be able to use variables with different data. We can insert variables (and some other things) into our React components.
Anything in the JSX that is inside curly braces `{}` is interpreted as a regular JavaScript *expression*. That means you can use every object or function from JavaScript that we have learned so far. Let's look at an example ([interactive example](https://codesandbox.io/s/interpolation-in-jsx-l910pqnjql)):
```jsx
function Greeting() {
const greetingWord = "Hello";
return {greetingWord};
}
```
Now instead of hard-coding the greeting in the `Greeting` component, we are using a variable. Remember that everything between the curly braces is just regular JavaScript. So we can use more than just variables ([interactive example](https://codesandbox.io/s/interpolation-with-methods-in-jsx-nw29kzx744?file=/src/HelloWorld.js)):
```jsx
function Mentor() {
const mentors = ["Ali", "Kash", "Davide", "German", "Gerald"];
return {mentors.join(", ")};
}
```
Now we have modified the `Mentor` component to use the `Array.join` method so that it lists several mentor's names. This also works with other JS types:
```jsx
function Addition() {
return {1 + 2 + 3};
}
```
```jsx
function Weather() {
const weatherData = {
temperature: 5,
location: "London",
};
return (
The temperature in {weatherData.location} is {weatherData.temperature}
);
}
```
```jsx
function formatName(user) {
return user.firstName + " " + user.lastName;
}
function Name() {
const user = {
firstName: "Bob",
lastName: "Marley",
};
return {formatName(user)};
}
```
A common pattern in React is to use `Array.map` to loop through a list of items and render a component for each one ([interactive example](https://codesandbox.io/s/interpolation-with-map-in-jsx-7mw0mw3qx0?file=/src/MentorsList.js)):
```jsx
const mentors = ["Ali", "Kash", "Davide", "German", "Gerald"];
function MentorsList() {
return (
{mentors.map((name) => (
- {name}
))}
);
}
```
Here we are using `Array.map` to turn an array of strings into an array of components.
| Exercise G (estimate: 10 min) |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 1. Using the `pokedex` React app that you created earlier, open the `src/App.js` file. |
| 2. Inside the `Logo` component create a new variable called `appName` and assign it to `"Pokedex"`. |
| 3. Now replace the hard-coded app name with `{appName}`. What do you see in your web browser? What would you do if you wanted to change the app name? |
| 4. Create a new component named `CaughtPokemon`. Within this component return a `` tag with the text "Caught 0 Pokémon on" (we're going to fill in today's date in the next step). |
| 5. Create a variable named `date` within the `CaughtPokemon` component, and assign it today's date (hint: `new Date().toLocaleDateString()`). Finally, render the `date` variable after the text "Caught 0 Pokémon on". |
| 6. Render the `CaughtPokemon` component within the `App` component (below `BestPokemon`). |
| 7. Within the `BestPokemon` component, create a variable named `abilities` and assign it to an array with some Pokémon abilities (e.g. `['Anticipation', 'Adaptability', 'Run-Away']`). |
| 8. Change the `BestPokemon` component to return a `
` element with the existing `` element inside it. Then add a `
` element underneath the `` element. |
| 9. Now use the `.map()` method on the `abilities` variable to loop over each name and return a `
- ` element for each (hint: look at the mentors list example above) within the `
` element. |
### Keys
You may have noticed that we are now seeing a red error message in the Dev Tools: `Warning: Each child in a list should have a unique "key" prop.`. This error happens when you use `Array.map` to return a list of elements ([interactive example](https://codesandbox.io/s/key-prop-for-lists-in-react-pwp8ox4kn0?file=/src/MentorsList.js)):
```jsx
const mentors = ["Ali", "Sub", "Loic", "Anthony", "Lucy", "Mozart"];
function MentorsList() {
return (
{mentors.map((name, index) => (
- {name}
))}
);
}
```
Here we have added a `key` prop to the `li` element. A documentation page explaining in more depth is in the further reading section but basically the `key` prop has a special meaning in React because it is used internally to keep track of which element in the list is which.
### Importing/Exporting Components
To help organize your code, components can be imported and exported just like any other JavaScript code ([interactive example](https://codesandbox.io/s/1z6xozl81l)):
```jsx
import Greeting from "./Greeting";
import Mentor from "./Mentor";
function HelloMentor() {
return (
```
Now let's take a look at using props that we have passed to a component ([interactive example](https://codesandbox.io/s/intro-to-props-vmjy0o91m7?file=/src/Mentor.js)):
```jsx
function Mentor(props) {
console.log(props);
return {props.name};
}
```
React gives you access to props in the **first argument** to the component function. We can then inject props into our component using curly braces.
The `props` variable is just a normal object with key-value pairs that match what was passed to the component. Because it is just a variable, it can be used like any other variable. That includes injecting props into attributes:
```html
{props.name}
```
Or calculating new values:
```html
{props.age + 1}
```
| Exercise I (estimate: 10 min) |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 1. Using the `pokedex` React app that you created earlier, open the `App.js` file. |
| 2. Pass a prop `appName="Pokedex"` to the `Logo` component. |
| 3. Now open the `Logo.js` file. |
| 4. Delete the `appName` variable. What do you see in your web browser? Why? |
| 5. Change the `Logo` function to access the first argument and call it `props`. Use `console.log` to inspect the `props` variable. |
| 6. Change the usage of `appName` in the `` to be `props.appName` instead. Does this fix the problem? Why? |
| 7. Now open the `BestPokemon.js` file. |
| 8. Copy the `abilities` variable and then delete it from `BestPokemon.js`. |
| 9. Paste the `abilities` variable into `App.js`. |
| 10. Pass the `abilities` variable as a prop to `BestPokemon` from `App.js`. |
| 11. In the `BestPokemon.js` file replace the existing usage of `abilities` with the `abilities` **prop**. You should still see the Pokémon ability names in your web browser. |
| 12. **(STRETCH GOAL)** Repeat the process with the `date` variable in the `CaughtPokemon.js` file. |
` element with some text saying which is your favorite Pokémon (e.g. "My favorite Pokémon is Squirtle"). | | 6. *Render* your new `BestPokemon` component below the `Logo` component within the `App` component. | **Arrow Functions for shorter syntax** Because a React component is just a function, we can also use the arrow function syntax: ```jsx const HelloWorld = () => { return (
Hello World
Hello World
Hello World
The temperature in {weatherData.location} is {weatherData.temperature}
); } ``` ```jsx function formatName(user) { return user.firstName + " " + user.lastName; } function Name() { const user = { firstName: "Bob", lastName: "Marley", }; return {formatName(user)}; } ``` A common pattern in React is to use `Array.map` to loop through a list of items and render a component for each one ([interactive example](https://codesandbox.io/s/interpolation-with-map-in-jsx-7mw0mw3qx0?file=/src/MentorsList.js)): ```jsx const mentors = ["Ali", "Kash", "Davide", "German", "Gerald"]; function MentorsList() { return (-
{mentors.map((name) => (
- {name} ))}
` tag with the text "Caught 0 Pokémon on" (we're going to fill in today's date in the next step). | | 5. Create a variable named `date` within the `CaughtPokemon` component, and assign it today's date (hint: `new Date().toLocaleDateString()`). Finally, render the `date` variable after the text "Caught 0 Pokémon on". | | 6. Render the `CaughtPokemon` component within the `App` component (below `BestPokemon`). | | 7. Within the `BestPokemon` component, create a variable named `abilities` and assign it to an array with some Pokémon abilities (e.g. `['Anticipation', 'Adaptability', 'Run-Away']`). | | 8. Change the `BestPokemon` component to return a `
` element with the existing `
` element inside it. Then add a `
- ` element underneath the `
- ` element for each (hint: look at the mentors list example above) within the `
- ` element. |
### Keys
You may have noticed that we are now seeing a red error message in the Dev Tools: `Warning: Each child in a list should have a unique "key" prop.`. This error happens when you use `Array.map` to return a list of elements ([interactive example](https://codesandbox.io/s/key-prop-for-lists-in-react-pwp8ox4kn0?file=/src/MentorsList.js)):
```jsx
const mentors = ["Ali", "Sub", "Loic", "Anthony", "Lucy", "Mozart"];
function MentorsList() {
return (
- {name} ))}
-
{mentors.map((name, index) => (
); } ``` We also need to export our components if we want to use them in other files: ```jsx function Greeting() { return Hello; } export default Greeting; ``` The convention is to name component files exactly the same as the component (including the capital letter). | Exercise H (estimate: 5 min) | | --------------------------------------------------------------------------------------------------------------------------- | | 1. Open the `pokedex` React app that you created earlier. | | 2. Create a new file within the `src` directory named `Logo.js`. | | 3. Copy and paste the `Logo` component from `App.js` into `Logo.js`. | | 4. Remember to add `import React from 'react'` at the top of `Logo.js`. | | 5. Export the `Logo` component from `Logo.js` (hint: look at the `Greeting` example above). | | 6. Delete the old `Logo` component from `App.js`. | | 7. Import the `Logo` component into `App.js` (hint: look at the `HelloMentor` example above). | | 8. Repeat this process with the `BestPokemon` and `CaughtPokemon` components. What do you think the files should be called? | ### Making an argument for Props What's the problem with our `HelloMentor` component above? The component `HelloMentor` is very static. What if we want to say *hello* to a different mentor? Currently, we would have to change the code too! This is easy in our tiny application but for "real" applications this might be more difficult. Instead wouldn't it be good if we could change which mentor we are saying hello to every time we render the component? So we could reuse the `HelloMentor` component for different mentor names. This is what *props* are for. ### What are Props? Props are what we use in React to pass "arguments" to components. They are very similar to arguments in functions - you can "pass" props to components, and you can use those props within a component. First let's look at passing props to your components ([interactive example](https://codesandbox.io/s/intro-to-props-vmjy0o91m7?file=/src/HelloMentor.js)): ```jsx``` As you can see props are key-value pairs, in this example the key is `name` and the value is the string `'Mozafar'`. We can pass as many props as we like to a component. We don't have to use strings, we can use any valid JavaScript data like numbers, arrays and objects. Remember that in JSX you can use curly braces `{}` to inject data that is not a string: ```jsx ``` Now let's take a look at using props that we have passed to a component ([interactive example](https://codesandbox.io/s/intro-to-props-vmjy0o91m7?file=/src/Mentor.js)): ```jsx function Mentor(props) { console.log(props); return {props.name}; } ``` React gives you access to props in the **first argument** to the component function. We can then inject props into our component using curly braces. The `props` variable is just a normal object with key-value pairs that match what was passed to the component. Because it is just a variable, it can be used like any other variable. That includes injecting props into attributes: ```html {props.name}``` Or calculating new values: ```html{props.age + 1}``` | Exercise I (estimate: 10 min) | | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | 1. Using the `pokedex` React app that you created earlier, open the `App.js` file. | | 2. Pass a prop `appName="Pokedex"` to the `Logo` component. | | 3. Now open the `Logo.js` file. | | 4. Delete the `appName` variable. What do you see in your web browser? Why? | | 5. Change the `Logo` function to access the first argument and call it `props`. Use `console.log` to inspect the `props` variable. | | 6. Change the usage of `appName` in the `` to be `props.appName` instead. Does this fix the problem? Why? | | 7. Now open the `BestPokemon.js` file. | | 8. Copy the `abilities` variable and then delete it from `BestPokemon.js`. | | 9. Paste the `abilities` variable into `App.js`. | | 10. Pass the `abilities` variable as a prop to `BestPokemon` from `App.js`. | | 11. In the `BestPokemon.js` file replace the existing usage of `abilities` with the `abilities` **prop**. You should still see the Pokémon ability names in your web browser. | | 12. **(STRETCH GOAL)** Repeat the process with the `date` variable in the `CaughtPokemon.js` file. |
` element. | | 9. Now use the `.map()` method on the `abilities` variable to loop over each name and return a `