In this section we're going to start making a couple of changes to our project.
I'm inside of my code editor and I'm going to open up my SIRC directory.
Remember our goal right now is to get a better idea of how GSX works.
So I want to delete all the code inside this SIRC directory and we're going to replace it with one or
two files in which we're going to experiment to in just a little bit and we'll get a better idea of
exactly how GSX works.
So I'm going to highlight everything inside of the SIRC folder just the sarcy folder and I'm going to
delete all of it.
All right so now the Cercy directory is empty once it's empty on then going to create a new file inside
they're called index Dot.
Yes.
Now the name of this file is very special.
So make sure you call your file index Staci as well I'll tell you a little bit later on why this file
is so special.
Now when I create this new file I can flip back over to my browser where I have my re-act application
running at localhost 3000.
If I refreshed the page you'll notice that it's now completely white.
Nothing at all shows up.
So right now let's set a very small short term goal.
Let's say that we want to figure out how to use react to get some content to appear on the screen once
we figure out how to get some content to appear on screen using react.
We'll then be able to start to play around with GSX a little bit and get a better idea of the rules
around it.
So in order to get some content to appear I'm going to put some comments into my index G-S file that
I just created.
I'm going to place three comments inside of here that are going to guide me through the process of getting
content to show on the screen when using re-act.
So the first comment I'm going to put in here I'm going to say import the react and react Dom libraries.
Remember back when we were using code pen we had to actually add it react and react Dom as dependencies
to our project.
So we essentially have to go through a similar step here as well.
I'll then give myself a little bit space and I'll put down my next step.
So the second step will be to create a re-act component.
We spoke very briefly about Riadh components back when we worked on code pen.
So we'll talk a little bit more about what Riak components are in just a little bit.
And then finally look at myself all that more space and put on one more comment down here I'll say take
the real component and show it on the screen.
OK so that's it.
It's a three step process to get some content to show up on the screen of our browser.
Let's begin right now with Step number one.
I want to import the react in react Dom libraries in order to do so.
I'm going to write out import re-act from re-act and then import reac Dom from re-act dash Dom.
OK.
So just right there with these two lines of code we've got a lot of crazy stuff going on.
I want to talk to you a little bit about exactly what import statements are and why we have to use them
at all.
But before I do I want you to take special note and make sure that you put capital D.O.A. in in your
import statement as well.
OK so what's with the import statement.
You'll recall that back over on the other project we worked on over on pen.
We didn't have to write an import statement.
We just added react and react Dohm to our project.
And that was pretty much it.
Well now that we're using it create re-act up.
We're using a bundler system called web pack.
Well talk about what web pack is and why we're using it.
But for right now all we need to understand is that every file that we create inside of our project
is essentially its own tiny little universe.
Any code that we write inside this file is not going to be automatically shared or made available with
other files and vice versa.
So in other words if we want to get access to any libraries or any other code that we write inside of
our project we have to write a import statement like the one you see right here.
Now import statements have a lot of different rules around the syntax of them.
We'll investigate a lot of the different syntax rules a little bit later on.
But right now let's just kind of examine the import statement that we're making use of.
All right.
So a quick diagram.
So first we place the import keyword.
This tells javascript that we want to reach out to either a dependency or a another file inside of our
project.
So import statements like this can be used to import either dependencies or packages that we install
to our project such as react and react dom or files that you an author.
The second word is going to the name of a variable that we want to take all the code from that dependency
or file and assign to.
Now I said that kind of awkwardly.
Essentially what's going on here is we're going to reach out to the re-act dependency.
We're going to take all the code inside that dependency and then assign it to this re-act variable.
Now one thing to be aware of is that the name of this variable right here does not have to be exactly
react.
We could very easily rename it to something like my react if we wanted to but in general we follow a
convention where we name our variable along with the name of the library itself.
So it's a library name it's react.
We assign it to a variable called react if the name of the variable of the library is random we assign
it to a variable called react.
And so on.
Next up the from keyword.
Pretty much says we want to pull code from a file or a dependency and then finally we list either the
dependency that we want to import from or a path to the file that we want to import.
In the case that we are importing a file that you and I create ourselves now if we list out a dependency
right here what's going to happen is javascript is going to say OK I see you want react.
It's then going to look inside of the node modules directory and it's going to try to find a folder
inside of your called react.
So if you scroll way down inside that node modules folder all the way to the Ares you're going to see
that we have a folder called re-act right here.
So when we say import re-act from react that means go and find the re-act folder inside the node modules
directory and get all the code from inside there.
And then the same thing with react on as well.
You'll see the react on folder is right there.
So if we wanted to we could technically import any of the different folders that you see inside of our
node modules directory.
We could also install more modules into the stone modules directory and import those as well.
But in general obviously we only import the dependencies we actually want to use and really care about
OK.
Now quick thing I want to mention here you're seeing the import syntax for pulling code from another
file or a dependency.
If you've ever worked with they know J.S. project before you might have seen a slightly different way
of requiring in other files or dependencies one which uses something called the require function.
So just as a quick example you might have seen code in the past that looks something like this.
Re-act equals require react.
You don't have to write that I want to show you a quick example.
Tony very quickly tell you about the difference between a required statement and an import statement.
We make use of an import statement that is a reference to a module system called.
Yes 2015 modules this module system is essentially a set of rules that describes how code can be shared
between different javascript files.
There is a different Woggles system called common.
Yes this is a different set of rules that also governs how to share code between different files.
If we're using yes 2015 modules and that's what you and I are using we use the import syntax in order
to import other files or other code.
But if we make use of the common G-S module system we make use of the require syntax instead.
So if you've ever seen these two different types of import or require statements essentially they're
just making use of different module systems.
So I think that's pretty good for this first step right here.
Just two lines of code but there's a lot of knowledge to be had.
Let's take a quick pause right here.
We'll come back in the next section and we're going to start to create our re-act component.