In this video, we're going to take a look at a couple diagrams and understand how this convert component
is going to work.
All right, here we go.
We've got our convert component that we are going to create.
Convert is going to accept two different props.
First off, it's a prop called text.
This is going to be the text that we want to convert into some other language.
We're also going to take a prop called Language, and that is going to be one of the options out of
our dropdown.
So it will be an object with a label and a value property.
In this case, I'm going to imagine that the Hindi language is provided.
So it's an object with a label and a value of H.
I.
We're going to provide those two props into the convert component.
And then here is what the convert components ELF is going to do whenever we provide a new value for
the language, prop or text.
We need to make sure the convert component runs some code automatically.
So if the convert component ever sees a new value for language or text, we're going to make a request
to the Google Translate API.
This API is going to be responsible for translating this text and giving us some translated output back.
Now, the fact that I say here we got a new value for this prop and we should run some code.
Whenever you see something like that.
That is kind of a sign that we want to make use the use effect hook.
So we are going to set up the U.S. fact hook inside of convert.
We're going to make sure that is configured so that anytime we provide a new language or text prop,
we run that use effect took.
Now, the Google Translate API itself is going to take the text and the target language code or essentially
the language we want to convert this text into.
It's going to do the translation internally and then send us back a response inside.
That response will be our translated text.
We're going to take that translated text.
Use it to update some piece of state.
And we're going to show that data on the screen.
And the first thing we really need to do here is get a better understanding of how the Google Translate
API works.
So let's just take a look at another diagram or two and understand how to use that API.
We're going to take a look at the Google Translate API documentation directly, which you could find
out.
This you are L.
Now, a couple of quick notes here.
This is normally a paid API.
In other words, you need to pay money to get your text translated.
It is not a free service.
You do not have to sign up for this API.
I am going to give you an API key that you can use in the next lecture.
So there's going to be a text lecture.
Not really a video.
I'll put in here a text lecture and Scyther.
There will be an API key that you are going to copy paste and just hold on to for a little bit.
Now, really important note here, in order to prevent any abuse of this API key.
And make sure that people aren't using it to translate a ton of text.
The API key is only going to work correctly if you are running your application on local host three
thousand.
So in other words, when you load up your react application, you must see localhost three thousand
right here.
If you are using some other domain, some other port, if you are using an online code editor or anything
like that, this API key will not work correctly.
There are a couple of exceptions to this.
I did put some different domains on a white list.
So in particular, if you're using a built in code editor through Udemy, don't worry, it is going
to work fine in that case.
But in general, if you're running your REACT application through anything else, the request may not
work.
OK, so now we've got some idea of this API key.
Let's go take a look at the documentation.
So here's the docks right here.
We're going to find one of these main buttons on screen that says API is in reference and click it.
And then on the left hand side, we will click on reste reference, then basic and then translate.
But this is the API endpoint that we are going to make, you said to actually translate this text.
We have to make a post request to this exact you URL that you see right there and in the query parameters.
So not the body, the request, but in the query parameters.
We are going to provide a couple of different properties.
First, we'll provide a queue.
He was going to be the actual text that we want to translate.
We'll provide a target, which is going to be a language code.
That is what we want to translate our text into this target property right here, or more specifically,
the language code is essentially going to be one of these values.
So the value F, A, R and HDI are very specific language codes that the Google Translate API understands.
So if we provide a target of.
A GI.
That means we want to translate our text specifically into Hindi.
If you want to add in any other languages on your own, you can open up this language support link right
here.
And inside this, it'll show you all the other languages that are available.
You can add in additional options to that options array and you could, for example, add in about Dutch
one to add in Dutch.
We would look up the language code right here.
It's N.L..
We could then go back over to our translate dot JSF file.
And inside of our options array.
Add in another object with a label of Dutch and a value of an EL.
If you want to add in any more languages, that's how you're gonna do it.
Just look up this document.
Besides Q and Target, we are also going to provide the key, this key parameter is going to be the
Valot API key.
And again, I'm going to provide this to you in the next lecture.
The response we get back is going to have a lot of information about the translated stuff rather than
looking at the docks to understand this.
There'll be a lot easier for us to just make the request and then inspect the response ourselves and
see what comes back.
So all we really need to understand right now is that we need to make a post request to that endpoint
and we're going to include a couple of query parameters.
OK.
Well, I think that we've got a reasonable idea of what this convert component is going to do.
So in the next lecture, make sure you take that API key that I'm going to provide you and just copy
paste it into your editor somewhere.
You can stick it out maybe the top of your translate J.S. file and we'll make use of it in just a little
bit.
Okay.
Pause.
And I'll see you.
In just a moment.