In the last section we generated a new project now we called Songs.
So not going to change into that project directory like so now I'm not going to start up my project
here just yet because I want to show you one or two quick things that we're going to have to do before
we actually start the project up.
All right.
So back over here a couple of quick diagrams.
First I want to show you how we're going to break out this application into separate components.
So we're going to make one component for the right hand side.
We're going to call it a song list.
It's going to take a list of songs as you might guess those will be an array of objects for each object
has maybe the title of the song and maybe the length as well.
We will then render out a list of all those different songs and then for the right hand side we'll have
a very simple song detail if it is given a song object it will display the title and the length of the
given song.
And that's pretty much it.
So without a doubt the Riak side of this application.
Simple straightforward.
All right.
Now when I tell you something a little bit more interesting that's going to help you understand how
we put react in redux together.
So at this point we've made use of the re-act library by itself quite a bit.
We also have seen an example of redux inside of Copan and you even saw me and you probably went through
the same process as well at redux to that code instance as a dependency.
Now we're going to flip back over toward terminal's here and just a second and we're going to install
redux but at the same time we're going to install a second library called re-act redux.
That's literally it's name it's re-act dash redux.
This is a third library that we're going to use to make sure that react in redux can talk to each other.
Remember redux was not necessarily designed to work only with react so the re-act redux library has
a bunch of helper functions inside of it to get redux to work nicely with you guessed it react we're
going to really be learning a lot about re-act redux at this point and moving forward because we already
know how re-act works pretty well and he's got a reasonable idea of exactly what redux is doing.
So in this app what we're really learning at the end of the day is how re-act redux works as opposed
to just react or redux.
OK so we're going to flip back over toward terminal.
I'm going to make sure I'm inside that Sung's project directory and I'll do an NPM install dash dash
save redux and re-act dash redux like so.
All right now this is just going to take a second or two to install so I'm just going to let it do its
thing.
And then when it's done I'm going to start up NPM start inside this project directory.
There we go.
It's all run NPM start and it will see our browser open up and here we go localhost 3000 like so.
Next up I'm going to start up my code editor inside of our project directory.
And as you are very well used to doing.
We're going to find that SIRC folder and we're going to delete everything inside there.
And then inside the US RC folder will go back in and we're going to create our root index js file.
I'm going to put together a little bit of the plate inside of your soul say import re-act from react
or do import re-act Dom from re-act dash Dom and then we don't have a app component or a app file yet
but we're going to make it in just a second so I'm going to imagine that already exists and I'll say
import app from components slash app like so and then at the bottom we'll do the classic re-act render
with our app and document query selector with root like so.
All right.
So remember at this point we don't have our app component put together so if you flip back over to the
browser you're probably going to see an error message.
So let's now very quickly create our app component.
So going to find my or directory make a new folder inside they're called components and inside of that
folder I'm going to make a new file called.
J.S..
And then inside of here we will import re-act from react.
We'll create a functional component this time old app and inside of it or turn a simple div with a text
app and then export default app at the bottom like so that's it.
That's all we do.
So let's do a quick check inside the browser and I should now see the text app appear on the screen.
Perfect.
Now one last little bit of setup that I want to do as long as we are going through all this kind of
repetitive stuff.
I want to make sure that I hook up semantic UI just the CSSA file to our project as well.
So I'm sure you remember how to do this.
We're going to do a quick search for semantic UI CDN.
I'll find the Cdn.
Dot com link.
And then I'll do a search for semantic men CSA.
Siri go right there.
So I'm going to copy that thing.
I will flip flip back over to my public index.
HS e-mail file.
And then just as before I'll put in my link with the rel style sheets and my eight's ref to the link
that I just copied.
Like so and I'll save the file and I'll just make sure that I see the updated font for my app text that
appears appear on the screen.
All right that's it.
So we're now ready to start putting together our actual app and learning how to get react in redux to
work together with that re-act dash redux library.
I know that's so repetitive but let's take a break and we're going to figure out how that thing works
in the next section.