Unless sexually generated a new project I'm not going to change into that new project directory.
And then all startup might react server inside there with NPM start.
All right.
So there we go.
We've now got a fresh reactor application up and running.
I'm now going to also make sure they open up my code editor on that new project directory.
So I'm going to find that components folder components project directory we just put together and I'm
going to open that thing up like so then finally inside my SIRC directory I'm going to find all the
automatically generated files inside of here and I'm going to delete all them.
So you can start from scratch.
All right.
So remember the first take that we're going to do on this project we're going to put together a single
component and we're going to write out all of the different GSX we need inside there to make these three
different comments all in one go.
So I'm going to flip back over to my code editor and inside of my sarcy directory I'm going to create
a new file called index.
Yes like so then at the top of this file will put in a little bit of familiar code.
So I'll say import re-act from reacts or do import re-act Dom from re-act dash Dom.
I'll then make a new app component and inside there right now I'll return a simple div that says I there.
And then finally at the bottom of the file I'll do react.
Dom does render all sad once render an instance of my app component.
Now I want to render it into document dumb queries selector not going to find that same div with an
idea of root like so.
All right so the code that you see right here is what we just wrote into our last project in writing
all this stuff out is going to become second nature for you very quickly.
So if it seems tedious to write this all out right now.
Don't sweat it you're going to get so much practice writing this.
All right so going to save this file and then we should build to flip back over to our browser and see
the text.
Hi there appear on the screen.
OK so it looks good.
So now we need to start replacing the simple div that we have inside of here with the list of comments
instead.
Now I know to be honest with you this is not really a course about basic styling and CSSA and stuff
like that.
We are going to talk at great length about how to integrate CSSA in different forms into a Riak project
but we're not going to spend a tremendous amount of time writing out CSSA from scratch.
So does that mean.
Well basically when I looked at this list of blog comments right here there is going to be a fair amount
of CSSA styling that we're going to have to do rather than writing out all these CSSA from scratch.
We're going to instead pull in a very simple in a very handy CSSA library to essentially take care of
all the styling for us.
Like I said we're going to eventually talk at great length about styling Interac project.
But right now I just want to get some default styling put together.
So let's talk about the styling.
We're going to use.
I'm going to open up a new browser tab and navigate to semantic Dasch UI dot com and I'll through that
in my code editor right here so you can see it very plainly.
OK don't semantic UI is an open source styling or CSSA framework.
You can click on this many button on the top left one side and then scroll through all of these different
elements that are provided for you.
You can click on any of them and take a look at some of the default styling that you get if you make
use of this semantic UI library.
Now this library is a simple CSSA file by default.
You don't have to install any javascript or any re-act related stuff whatsoever.
It's just a CSSA file that's going to give us a little bit of default styling on the left hand side
if you scroll down to the views section.
You'll find that there's something inside of here called comment.
Let me zoom in a little bit so you can see that right there there is comment so under the U.S. You can
find comment and if you scroll down a little bit you'll see something that looks very similar to more
or less what we're trying to build a list of comments like so.
So if we make use of semantic UI we can essentially get all the styling that we need for free without
having to waste a lot of time on it.
So with that in mind let's install semantic UI now.
Unfortunately the Getting Started documentation here is not the clearest thing in the world.
They're getting started documentation on semantic UI docs.
It tells you how to kind of put all this stuff together from scratch using build tools.
Now we could definitely go down this path but there's definitely a much easier way for us to install
this.
If you open up a new browser tab you can search for semantic UI CDN and I'll put the search term again
inside my code editor just so you can see it very plainly.
Semantic UI CDN.
And then the first link that you'll see right here will probably be something like CDN J.S. dot com.
So if you click on that bill then take us to a page that lists all the different versions of that semantic
UI library.
Nice and easy to use.
We don't have to do any additional build steps or anything like that.
You'll notice that there's many different versions of this library.
So we're going to scroll down a little bit and a little bit o ways down here.
Maybe a good amount other ways down here towards the bottom end where we go right here.
We're looking for something called semantic Duckman CSX.
If you can't find it on the list you can always hit command F and do a quick search.
Semantic men CSSA like so.
So we're going to copy that link right there.
That's a link to a publicly hosted version of the semantic UI at CSSA file so we can very easily use
that inside of our project.
So I got a quick copy over here for the minute CSSA file and then I'll hook that thing up inside of
the HTL file that is currently used for our project which you'll recall is inside of that public directory.
So inside of public I'll find indexed on HD mail and then we're going to add this new C-s this file
into our head tag as it would any other CSSA file.
So after the Medhat tag right here this looks like a reasonal place or put in link rail equals stylesheet
and then a Tref equals and then I'll paste in the link that I just copied from that CD and Page Mehl
make sure that on the right hand side I close off that tag like so I guess that looks good.
So I'm not going to save this file.
And then if I go back over to my browser and find localhost 3000 we should see that the page has automatically
refresh and you'll know that semantic UI has been loaded up properly.
If you see that the text font right here has changed slightly.
Mine definitely has.
So I know that Symantec is installed correctly.
Another way that you can make sure that it got installed would be to right click anywhere on the page.
Open up your chrome inspect menu then go to the sources tab or sees me not to source the tab at the
Network tab.
You can then click on this CSSA option right here.
Refresh the page and you'll see that semantic man CSSA got loaded up successfully.
OK so now that we've got this styling library for free.
Let's take a quick pause.
We'll come back the next section and start putting together this list of comments.