Created with Create React App:
npx create-react-app converter
cd converter
yarn start
App is now running at http://localhost:3000.
We're going to extend our Euro-to-$BTC functionality to support more cryptocurrencies.
You can start from your own App from last week, or simply git checkout start
to have an app ready to work with.
- Our Product Owner foresees a demand in conversion for other cryptocurrencies: extract the convertion logic into a
<Converter />
component that takes acryptoName
and aexchangeRate
. We can drop the crash to zero after 5 seconds functionality. - Add a second converter to our app, one for Ethereum $ETH with a
1.2
exchangeRate
. Add as many as you want. - Our design team finds the lack of a title per
<Converter />
a usuabillity problem. Allow the<Converter />
component to render some custom markup to render it at the top of the component. - Monetization is key. Add an alert to warn the user about our freemium conversion model after 5 convertions are performed in any of the components in our app.
- We need a way to let our users become Premium Members. Implement a Become Premium button that removes the just implemented alert and adds a
💎 Premium conversion
message.
-
Add a number input with a label, "Euros".
-
Extract the input into a separate component called
<Amount />
that takes aname
(eg. "Euros") prop. -
(Optional) If it is not already, convert
<Amount />
into a class-based component. -
Teach
<Amount />
input to show a red outline for negative amounts. -
Make
<Amount />
a controlled component (ie. pass it itsvalue
as a prop). -
Add a second, read-only
<Amount />
component that shows $BTC instead of Euros; use this function to get the exchange rate:function exchangeRate() { return Math.random() * 10000; }
-
Use
setTimeout
to make the $BTC price crash to zero after 5 seconds of inactivity. -
Use
React.createContext()
to provide a dark/light theme toggle.