In this video we're going to kick off one last example around St..
This application is going to kind of combine a couple other things we've already worked on.
On this course it's definitely going to be a little bit more complicated than the last two examples
we worked on.
So let's get to it.
OK.
So we're still going to do another example that's kind of focused on colors but this time has definitely
like I said a little bit more complexity.
So in this case we're going to have three different sets of buttons one set of buttons the first ones
right here are going to control how much red or not red we're gonna show on some new element down here
at the very bottom whilst have a set of buttons to control how green it is and how blue it is as well.
So we're going to have a red a green in a blue.
We're going to essentially combine all these different values together to form an our G.B. string to
apply to that view element right there.
So in this case as opposed to having a bunch of different squares just one square we're going to change
the value of it based upon how many times the user taps on these different buttons right away.
You're going to notice that this set of elements right here like that label and those two buttons and
this one and these right here.
Well they all look very similar with some just very slightly different words on them like the first
one is red and the next one is green and then blue.
So this might be another opportunity where we can make a reusable component and in doing so we're probably
have to figure out how we can somehow get reusable components to work with state and props at the same
time.
So like I said perhaps is going to be a little bit more complicated.
All right let's answer these three questions once again because they're going to be slightly different
this time around.
So first off what piece of data is changing in our app.
You might think that we're going to have just like a single string a RG value.
Well we could do that but a much easier way to deal with this would you have been to have three separate
different pieces of state.
We could have one piece of state called red and that would be essentially a counter that goes up and
down.
It would be a single number between 0 and 255 and I would track the amount of red we have.
We could then also have a second piece of state very similar between 0 and 255.
It would track the amount of green and then a third piece of state that would be blue what type of data
are these.
Well once again they're going to be numbers.
And then finally what are their starting values going to be.
Well in each case we could either maybe randomly generate them or maybe we'd just start them off as
0 or 255 so that the square here is black but we could figure that out in due time so big challenges
inside this application rather than just one piece of state.
We're going to have three different pieces of state.
In addition we're going to kind of coordinate how these pieces of state change on these child components
as well before we take a break.
Let's go through all this boilerplate setup that we have to go through every time so inside my screens
directory I'm going to make a new screen I'm going to call this.
How about square screen dot J.S. because we're just showing one color square then at the top I'm going
to import react from react.
We'll get our view and how about some text and style sheet.
We'll see how many of those we actually need.
But it's a good place to get started.
I'll then make my square screen
from here.
I'm going to return just a piece of text for now that says square screen all then loop my style sheet
so I'll do con styles is style sheet to create with an empty object and we'll do our export default
of square screen OK.
Looks like a good place to get started so let's save this.
We'll go back to our apt j ust file here's our DOT J.S. as usual I'm going to import square screen from
these source screens directory
and I'll add it into my list of possible routes here so I'll get squared is square screen and then finally
very last step let's make sure we open up that home screen here's the home screen right here I'm going
to copy 1 These buttons again
I'll change the name go to a square demo and we'll change the navigate function as well to square all
right let's do a quick test here so I'll refresh I'll go to Square demo and there we go.
Very good.
All right.
So quick pause right here when we come back the next video we'll start working on our square screen
screen so I'll see you in just a minute.