Course Content
Mastering React
1. Introduction to React
What is React?Web Application ArchitecturesVirtual DOM and Browser DOMJSXRender Element to DOM TreeChallenge: Render ElementComponentsChallenge: Functional ComponentsConditional RenderingChallenge: Render Content ConditionallyRender a Data CollectionChallenge: Render Collection"Introduction to React" Section Sum Up
Mastering React
Challenge: Render Content Conditionally
Task 1
Let's devise a mechanism to display a notification only when a user has unread messages. We will verify whether the user has any unread messages. If this condition is true, we will show a notification indicating the number of messages. However, we won't display anything if the user has no messages.
The task is:
- Create two components:
App
as the parent component andNotification
as the child component. - The parent component,
App
, should pass a prop calledmessages
to the child component. Themessages
prop is an array containing messages. In the child component, you need to check the length of themessages
array. - If there are any messages in the array, display a string that says:
You have <amount> of unread messages.
The<amount>
should be replaced with the actual count of unread messages.
Hint
1. To determine if there are any messages in the array, we can check its
length using the
2. In React, we use the operator
3. To construct the string correctly, replace the placeholder
4. Use curly braces
length
property. The syntax is -
array.length
2. In React, we use the operator
&&
to implement the logic of
an if
statement.3. To construct the string correctly, replace the placeholder
amount
with the actual length of the array. 4. Use curly braces
{array.length}
to set the array length in
the string Task 2
Let's work with a bank account. We aim to develop a logic that informs the user whether they have sufficient funds on their card to cover a given price. Depending on the outcome, we will display different messages to the user.
The task is:
- Create two components -
App
, parent, andMessage
, child. - The parent component (
App
) transfers the propsmoneyAvailable
,price
, andname
.moneyAvailable
- represents the amount of money the user has.price
- denotes the amount of money the user needs to pay.name
- refers to the user's name.
- If the user has enough money to pay, we show the message:
Success! The remaining amount of money for <user_name> is: <calculated_amount_of_money_left>. Thank you!
. - If the user has not enough money to pay, we show the message:
Failure! The bank account balance for <user_name> is: <moneyAvailable>. Unfortunately, you need to pay: <price>.
Hint
1. In React, we use the ternary operator
2. To construct the string correctly,
- replace the placeholder
- replace the placeholder
- replace the placeholder
- replace the placeholder
3. Use curly braces
condition ? ... : ...
to implement the logic of an
if...else
statement.2. To construct the string correctly,
user_name
with the
actual user name: name
prop.
calculated_amount_of_money_left
with the calculated amount of
money left - moneyAvailable - price
moneyAvailable
with
the actual available money - moneyAvailable
prop.
price
with the actual
price - price
prop.
3. Use curly braces
{...}
to assign a value that is not a
string type. Everything was clear?
Section 1. Chapter 10