In the last section, we generated a new project, I'm not going to change into that new project directory
and then I'll start up my react server inside there with NPM Start.
All right, so there we go, we've now got a fresh reality application up and running.
I'm now going to also make sure that I open up my coat, Ed, on that new project directory.
So I'm going to find that component's folder components project directory we just put together and I'm
going to open that thing up like so.
Then finally, inside my Sarsae directory, I'm going to find all the automatically generated files
inside of here and I'm going to delete all them so we 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 jousts 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 SIRC directory, I'm going to create
a new file called Index Dutchie Celexa.
Then at the top of this file, we'll put in a little bit of familiar coat, so we'll say import react
from react Ilda import, react from react dash dom.
I'll then make a new.
App component.
And inside there, for 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 render.
I'll say I want to render an instance of my app component and I want to render it into document query
selector.
I'm 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 in to our last project, and 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.
I'm going to save this file and then we should be able to flip back over to our browser and see the
text high there appear on the screen.
OK, so it looks good.
So now we need to start replacing the simple divide that we have inside of here with the list of comments
instead.
Now I'm going to be honest with you, this is not really a course about basic styling and excess and
stuff like that.
We are going to talk at great length about how to integrate success in different forms into a reac project.
But we're not going to spend a tremendous amount of time writing out systems from scratch.
So what 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 restyling that we're going to have to do rather than writing out all these costs from scratch.
We're going to instead pull in a very simple in a very handy access 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 in a 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 dash UI dotcom, and I'll throw that
into my code editor right here so you can see it very plainly.
OK, semantic UI.
Is an open source, styling or access framework, you can click on this menu button on the top Left-Hand
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 lever.
Now, this library is a simple access file.
By default, you don't have to install any JavaScript or any react related stuff whatsoever.
It's just a case file that's going to give us a little bit of default styling.
On the left hand side, if you scroll down to The View 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's comment, so under The View section, you could 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 Swedien J.S. Dotcom.
So if you click on that.
They'll 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 built step 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 aways down here.
Maybe a good amount of the ways down here towards the bottom.
There we go right here.
We're looking for something called semantic dustmen access.
If you can't find it on this list, you can always hit command F and do a quick search semantic mendax
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 CSS file, so we can very easily use that
inside of our project.
So I'm going to click copy over here for the Mendax file and then I'll hook that thing up inside of
the HTML 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 HTML and then we're going to add this new CSS file into our head
tag, as we would any other access file.
So after the meta tag right here, this looks like a reasonable place, I'll put it and link rel equals
stylesheet and then H.F. equals, and then I'll paste in the link that I just copied from that CDN page.
I'll make sure that on the right hand side, I close off that tag like so.
OK, so that looks good, so I'm not going to save this file.
And then if I go back over to my browser.
And find local history.
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 semantic 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.
Excuse me, not the source of tab at the network tab, you can then click on this access option right
here.
Refresh the page and you'll see that semantic minsk's 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.