In the last video we started talking about the differences between the props system and the contex system
in react.
So remember the prop system is about communicating information from a parent to a direct child whereas
the context system is about communicating information from a parent to a deeply nested child in order
to get a better idea of how the system works.
We're going to start talking about an application that we're going to be building in this video.
OK.
So here's a mockup of the application we're going to make in the next couple of coming videos in our
application which is going to be very simple and very straightforward.
We are going to show a little language selector at the top of the screen next to the text select a language
we are going to show an American flag and a Dutch flag or a Netherlands flag.
Any time the user clicks on the American flag right here we're going to render a form underneath it
in plain English.
So we're going to have a English label and a English text button.
If the user then clicks on the other flag the Dutch flag right here we are going to rerun the form in
the Dutch language instead.
So the label right here of name will go to Nahm and the submit button will go to vore leggin.
Now I'm sorry if you are a native Dutch speaker and I just butchered those pronunciations.
I don't actually speech speak Dutch I just picked that language at random.
Now if you do not want to use the English language or the Dutch language that is totally fine.
When we build this application you can use any languages you want to.
The form itself is not going to have any actual behavior.
So we are really just focused about building in some translation or internationalization to this application.
That's it.
Nothing else.
Now we could definitely build out this application using a single component but we're going to split
this into multiple different components instead just to have a better idea of how the context system
behaves.
So here's how we're going to split this out into separate components.
We're still going to have an overall app component.
The app component is going to have the language selector built into it.
The app component is also going to create a user create component as well.
The user create is going to show a field and a button components inside of it.
The field component is going to render a label and a text input underneath that and the button is going
to be a very simple very straightforward button.
So for components in total now I first want to imagine how we would build out these four components
and communicate information between them using the prop's system.
So here's how we would probably communicate information using the prop's system.
At the very top we've got our app component that has that language selector inside of it so we might
have the user select a language and then communicate the selected language as a prop down into use or
create a language right here is a prop.
It might have a value of something like English or a value of Dutch or whatever language actually gets
selected.
So then the user create would have to take that language data and communicate it down to the field and
button.
But when you really think about this form that we're putting together you'll very quickly realize that
user create doesn't really care about the language that has been selected all at all.
It's only the fields and the button that care about the language.
So this would be a good candidate or a good place to use the context system because we essentially want
to communicate some information from a parent down to a deeply nested child and no intermediate component
cares about the value of that data.
So what we are going to actually do by using the context system is something like this right here.
The app component is going to communicate the selected language directly down to the field and the button
and the user create component is going to have no idea of what the current language is.
OK so that's the idea that so we're going to do now the very last thing I want to do very quickly is
generate a new Riak project so we can get started on this project in the next video.
So I going to flip on over to my terminal.
You'll notice that I've stopped all the running terminal windows from the last application we worked
on and I'm back at a workspace directory of sorts and so inside of this workspace directory are all
the different projects that we've worked on throughout this course.
So once I'm out here I'm going to generate a new project by running create react up and I'll call this
thing about translates like so.
So that's going to start generating our project.
Let's take a quick pause right here and we'll start working on our application in the next video.