I have made a lot of content around react over the years, and I get asked all the time, what is the
best way to learn react?
The answer to that is to write code, without a doubt.
So let's start off this project, right.
Let's start to work on a very small project right now.
Let me show you a mockup of what we're gonna try to build.
So this is what we're gonna make.
We're going to try to make a little English to just about any other language, text, translator.
So user is going to enter in some English text right here.
They're then going to select a language.
And then we're going to translate their text into that target language and display it at the very bottom.
And just you don't know.
We don't need to know Russian to put this project together.
We're going to use an outside API to actually do the translation for us.
But his very first project, we're going to be working on an online code editor.
This is a link to it right here.
This is the only project in this course where we will be using an online I.D. All the other projects
you work on will be created on your machine.
We're only using this online I.D. to skip over a little bit of setup and also to make use of some code
that I wrote out ahead of time for you.
Gonna take this link right here and open it up inside of a new tab inside my browser.
So right away, we're going to see I have file explorer on the left.
Code editor in the middle.
And then a preview window on the right hand side.
By default, a file should be open called app dot J.S..
If that file is not open and find it inside this SIRC folder and open it right away, we're going to
add all the code for this project directly into this app.
Dot J.S. file.
Inside of here, you're going to see a little bit of what looks like H.T. mail right away.
This content right here is deciding or determining what gets displayed on the preview window over here.
So if we change this text right here, you say either.
We'll see the output here on the right hand side change as well.
OK, so let's start to write out some code for our project.
I want, you know, just really quickly, we're going to write out a lot of very strange code very quickly
here.
You do not need to memorize any of the code that we're about to write out.
This is just a very quick demonstration and it's just kind of a jumping off point, something to give
us, something to talk about.
For the first part of this course, we're going to discuss just about all the code that we're about
to write in just a moment.
All right.
So here's what we're going to do at the very top of the app Dot James file.
We are going to add in three different import statements.
So I'm going to write in import field.
From then inside of a string, I'll put in dot slash components slash field.
And I'm going to say this many times throughout the course.
Double check your spelling of the word component's right there.
It is a very easy word to make a typo on there.
Just make sure you've got the correct typing.
We're now going to add in two other import statements.
They'll put an import languages.
From component's.
Languages.
And finally, translate from.
Component's.
Then down inside of this function where we've got this d'Hiv right here at present, I'm going to remove
that each one element.
So I going to highlight that whole thing and delete it.
And then going to show these three different components.
That's what these are referred to them as, components inside of this div right here.
And I can do so by writing out what looks like a little bit of each GMO I'm going to put in field.
And then a forward slash and a closing carrot.
I'll then do the same for languages.
And translate.
As soon as I do that, we can start to see some content up here on the right hand side.
And it looks awfully close to what you and I are trying to build.
The only element that's really missing in there is maybe that little kind of horizontal line right there,
which be kind of nice to have just to kind of separate these different elements.
So to put in a horizontal line right above translate, I'm going to write in each our like.
So now give me a very faint little horizontal line.
OK, so now we've got some content appearing on the screen, but you can see right away that nothing
is actually being translated.
And as a matter of fact, if I type something in here, I get a really nasty ear right away.
If you get an error like that, you can always click on this refresh button and you'll see the original
content start to appear.
So we're going to add in a little bit more configuration to each of these components.
And as we add in the configuration, it's going to make our applications start to come to life.
The coda we're about to write is also going to be a very confusing and a little bit weird.
Again, don't sweat it.
We're going to go over all this code in great detail.
But here's what we're gonna do up at the very top.
I'm going to find a import statement for react right after the word react.
I going to add in a coma, really races and then the word use state.
Then inside of my app component.
I going to write in concert a square bracket set of square brackets.
So it kind of looks like an array.
I'll write in language and set language.
Then an equals.
You states, and I'll pass on to that a string of are you?
Then on the next line down, I'm going to put in a very similar looking line.
So the keyword const square brackets.
Text set.
Text.
And I'll say you state now pass in an empty string.
OK, so just one more step here.
We're going to now take these four different variables and pass them to these three different components
that we're showing inside of here, just a little bit more weird code.
And then we'll have something really interesting being put together are actually running here.
The first off on field, I'm going to say label equals double quotes.
Enter English.
I'll then put in on change equals.
Really, braces set.
Text.
And value equals really Brace's text.
OK.
Just two more on languages.
I can write in language equals early races.
Language.
Then right after that will add in on language change equals really Brace's.
Set language.
And then finally, the last little piece of text you're damn on translate.
We're gonna write in text is Liberalises text.
And language is really Brace's language.
And that's it.
Now, at this point time, we're going to test out our application on the right hand side.
If you get any errors, I can guarantee you that there is a typo somewhere inside of this app, dot,
G.S. file.
The code we've written inside of here is 100 percent agnostic against the version of react that we're
using.
In other words, this code is going to work for years and years and years.
If you get any errors whatsoever, I can guarantee you you have a typo inside this file.
All right.
Let's now do a little test over here on the right hand side.
I'm going to enter in a little English brace, so I'll put in something like hi there.
And as soon as I do, I'll then see the equivalent Russian tech start to appear at the very bottom.
We can then change the language, maybe go over to about Swahili.
There is the equivalent about Arabic.
There is the equivalent.
And well, I'd say this works out pretty well.
We can also change the text about how are you?
And there's the equivalent in Japanese.
And, of course, once again, we can change the target language as well.
OK.
So a fun little application, but a lot of very mysterious code here.
Let's take a quick pause and start to examine this code and understand what is going on in just a moment.