In the last video we had a very long discussion about the browser router with re-act Rotterdam.
Now in this video we're going to start to drive our application forward.
We're still going to have a couple of discussions about re-act router but in order to do so we need
to progress our application a lot more than it currently is.
So to get started we're going to start to scaffold out a bunch of different components for application
and then hook them all up to our react Roger instance with individual route components.
So let's get to it.
The first thing we need to do is decide what different components we need to create inside of our application.
Now I took all of our different mockups right here.
I've got six different pages and I put down a proposed name for each of these different components.
That's going to form each individual screen.
So I think that this screen right here that shows a list of streams to the user should be called the
stream list component.
And I think that a user should be able to see that screen and anytime time that they go to the route
route of our application.
And each time user looks at a very particular stream I think we should show a component called stream
show anytime that a user tries to create a NEWS STREAM I think we should show a component called stream
create for editing which then stream edit and for deleting a stream we should have a component called
stream delete.
So I want to create all these separate components.
I don't want to just kind of scaffold them out for right now and then hook them all up to individual
route calls or route elements.
This is going to mean that we only have to go through all this routing stuff one time and then we will
have to revisit the topic of routing.
Like you know five or six times as we work through this application it's just going to save us a little
bit of time.
All right so for each of these different components we need to decide on a path to use when to show
each individual component.
So right now I came up with a couple of early guesses.
I think that when we show our route route so like local 3000 we should show a stream list when a user
goes to the route of streams slash knew we should show string create and so on for the other ones as
well.
So these are the different paths that we're going to use to hook up these different components to our
application.
All right so now we're going to continue by creating separate component files for each of these five
different components.
Again right now we're just going to throw in a little bit of quick scaffolding to each one just to get
them to appear on the screen and make sure that we can hook up a little bit of routing between each
one.
All right so I'm going to flip back over to my code editor now if we created those five separate component
files directly inside of our components directory we would kind of have a mess of component files inside
there.
And so because these five different components are all related to streams I think that we should place
all five of them inside of a new directory inside of our components folder.
So in some of my components folder I'm going to make a new folder called streams and then I will put
all of my components related to handling and showing streams inside of that new folder.
So now inside of here we're going to create a new file for each of these different five components.
So five files in total.
Let's do it right now.
OK.
So inside of streams I'm going to make a new file called stream list datcha us.
I will do a new file called stream create J us.
I will do stream show I will do stream at it.
And finally I will do stream delete.
OK so five files in total.
So now we're going to write out a quick little bit of boilerplate into each one so that we can just
show them on the screen for right now and then after we can show them on the screen we'll come back
and add in a ton of functionality to each one.
So I'm going to start off inside of my stream create file.
So inside of here I'll put together a little bit of the plate and we're going to essentially just copy
paste it to the other files so it will be a pretty quick process.
So inside of stream create I'm going to import re-act from re-act and then I will make a functional
component called stream creates
I will return a div with the text stream create.
Notice how I did not use a space in there.
There's a good reason for that you'll see in just a second and they'll say export default default stream
create
OK it's not going to take this right here.
I'm going to copy it.
I'm going to close string create and I'm going to move to my next file down stream delete.
I'm going to paste that boilerplate in and then I'm going to very quickly just change the names inside
of your.
Now as a quick shortcut if you are using Adom or vs code as your code editor you can double click to
select the text string create and then press either command.
If you're on Mac OS or control d if you are on Windows when you hit command or control D you can multi-select
the different instances of stream create inside this file.
And so we could change all three of them at the same time just as a quick time saver Zoll do stream
delete.
So I should say delete delete delete in here three times or then save this file and close it all then
go over to stream edit all.
Paste this again I'll edit it to be stream edit so edit edit or save it or go to list wildest dream
lists and safe.
Well do finally stream show and stream show and save.
So show show show three times and then I'm going to do a quick double check here so I see.
Show list edit delete and create.
Like so perfect.
All right so that's it for creating these kind of scaffolding components.
Now let's take a quick pause right here.
When we come back to the next section we're going to start to set up some different paths for each of
these different components and make sure that we can visit them inside of our browser so quick puzzles
see you in just a minute.