In this lab, you'll set initial state in a React component and distinguish between state and props.
Follow the steps below and create two components,
ImageSlider.js don't contain any code, so if you run
learn, you'll get an error. This is because our tests are trying to import and
use these components before they've been written.
So, before we continue, your first task is to create a simple components
src/ImageSlider.jsfile, create an
src/Bomb.jsfile, create a
These components will need a valid
render method to allow for our tests to
properly import and use them.
Let's pretend we're making an awesome slider for our new portfolio site. Naturally, we'll use React to do so! We have to start somewhere, so in this lab we'll just focus on setting up the initial state of the slider.
currentSlideIndexthat starts at
'I am on slide <CURRENT_SLIDE>', where
<CURRENT_SLIDE>is the value of
Take a moment to think about what a bomb does and how it works. Don't get all into the nitty gritty — what we're going to focus on right now is the timer.
Let's create a component that represents a bomb timer that counts down until it
0. However, the only thing we're going to focus on right now is
setting the initial state of the bomb: the amount of seconds left on the timer.
Since bomb timers can differ, we'll pass in a prop to our
Bomb component to
determine what the starting count should be.
secondsLeftis set by passing in an
initialCountprop to the
Bombcomponent. Don't forget to pass the argument props into the constructor (i.e.,
'<SECONDS_LEFT> seconds left before I go boom!', where
<SECONDS_LEFT>is the value of
0, it should render