Unless section we put together our first little comment.
But we still do not have a little profile image on here.
Now we could definitely go through the process of trying to find some image out there of someone else
and insert it into our application.
But that would involve a little bit more work than we probably want to go through because we would have
to download the image dragged into this public directory which is where we place images that we want
to use inside of our project and then somehow linked up to the image tag inside of our app component
rather than going through all that trouble.
We're going to use a little library that makes development of tiny little applications like the one
we're working on right here very easy and straightforward.
So let me tell you about this library because we're going to use it a decent amount throughout this
course and it's something that you might want to use on your own personal projects.
I'm going to open up a new browser tab and I go in to do a search for faker.
Yes A.J. Yes like so and then I should see a result right here for the Get help page for this project.
This is an open source library they can help you automatically generate a ton of data to use inside
of your own personal projects.
This is all going to be completely fake data but nonetheless it's very useful for when you're doing
some initial development of a re-act project when you might not have some actual data to work with.
You can scroll down and take a look at the documentation.
Now some of the documentation here is a little bit hard to read.
You'll find a section labeled API methods.
So this is essentially all the different types of data that we can generate with this module.
We can make fake addresses.
We can make a companies make dates and fake finance data fake just about everything and including what's
most important for us right now.
Fake images so we can use this library to make a fake image specifically an avatar or a profile image.
So essentially again rather than going through all that hassle of trying to find a profile image download
it and use it inside of our project.
We're going to instead use this faker J.S. library to just do it for us automatically.
Like I said I really expect you might want to use this own or this library on your own personal projects.
So how do we use this library.
Well it's going to be pretty straightforward.
We're going to flip back over toward terminal.
I'm going to find the terminal with my running re-act server and I'm going to start this thing by hitting
Control-C like so.
Then inside of here I'm going to install that library by running NPM install dash dash save Baker.
Like so this is using that same NPM install a command that we saw previously but this time rather than
dash gee we had this dash dash save flag.
That means that we want to save this thing in our local project.
And when we save it to the local project it's going to create a new entry inside of our package not
just on file and record the fact that we installed this thing into our project.
So if we ever tried to install the dependencies for our project again we'll automatically install F.A.
as well.
OK it's going to run that command.
Then we should have to only wait a couple of seconds for the thing to install.
It is a somewhat small module in actual size.
The thing ends up being pretty big and you probably don't want to use this thing inside of a professional
project.
But as far as installing it goes it's just one single package by itself.
So now that that is installed I'm going to start my re-act server backup with NPM start OK.
So now we're back to good as we were before and now we can use that Fakhry library inside of our indexed
file.
So to use that library I want to first add an import statement at the very top of the file.
Remember anytime that we want to use some code from another file or a another open source project or
dependency we have to add an import statement.
So I'm going to say import faker from faker like the it's now we can make use of this library to get
a image.
So I'm going to add on that as sarcy which we usually designate in image.
Now in this case we do not have a hard coded image.
You are able to put in here.
So we're not going to put in a set of double quotes like so instead we're going to use that GSX interpellation
where we are going to refer to some javascript variable or the result of some javascript function from
the body of our GSX.
So I'm going to delete those double quotes and I'm going to replace it with that set of double curly
braces like so or single curly braces so then inside of here we're going to reference that Fakhri library.
And then the next part is where things get just a little bit hairy.
Remember back over here inside the documentation there was a section called Image and inside this image
section there was something called Aviator.
So in order to generate a fake image or a fake guitar we're going to call faker dot image.
Ava.
That's how you read these documentation.
If you wanted to make say a fake let's say a fake company name we would call fake or dumb company dot
company name and then call that as a function.
So with that in mind let's flip back over on the say faker that image Eva tar and then are called like
a function by putting on those parentheses like so it's not going to save this file.
I'm going to flip back over to my application in the browser.
I'll see the automatic refresh cookin and then we see the image appear right there.
Awesome.
Now above all the image itself looks pretty darn nice it looks like a real profile image.
The nice thing about faker or maybe the not nice thing.
Let me rephrase that any time you refresh the page the image is going to be automatically regenerated
and you're going to get a new one inserted in there.
So every time that you refresh the page you'll see a new one.
Now sometimes Baker is going to give you a broken image every now and then.
And so you'll see a broken image like this appear.
If that happens you can just refresh the page and he should see a normal image appear again.
OK it says looks fantastic.
Let's take another pause right here and we'll get back on track and figure out how to replicate these
comments and get a couple more down here.