In the less section we explored our project structure a little bit and clear out the contents of the
index file.
In this section we're going to start with the absolute basics which is to attempt to get some content
on the screen of our mobile device whenever we want to place and content on the screen in any type of
app we built.
We are always going to do so by creating a component a component is a widget of sorts.
It's a thing that produces some text or a shape or an image that can be rendered onto the screen of
our mobile device.
The apps that you and I build are going to be composed by collections of these different components
that we are going to make.
So our job right now inside of this index file is to create a component and then somehow render it onto
the screen of our mobile device.
So to help us in this first task we're going to add some comments to guide us along.
So up on the first line here I'm going to add one comment.
I'm going to say the first thing we need to do is to import a library to help create a component then
a little bit underneath that I'm going to say that we are going to attempt to create a component and
then a little bit further underneath that we're going to say that we are going to attempt to render
that component to render it to the device.
So let's talk about these three steps here and a little bit greater detail.
So the first thing we're going to attempt to do is to create or see import a couple of libraries to
help us make it component components or intelligent objects that have a lot of InnerWorkings associated
with them.
So we don't want to have to implement all that fancy pants code every time we make a component.
So instead we use a few functions provided by reac native to make the process of generating a new component
much easier for us.
The next thing that we're going to do is use that library that we just imported to create a new component.
Now I keep using this term component over and over again.
Remember this is a thing for lack of a better term that produces some content that's going to appear
on her mobile device.
Finally the act of just creating an component doesn't actually do anything.
We have to specifically tell Riak needed to take the component we just created and place it onto the
screen in all of the different apps that we are going to create and of course we'll have to deal with
a dozen or so different components and at every step along the way we always have to be very specific
in telling our device exactly when to display each of these different components to our users.
So let's begin with step one up here at the top.
We're going to add a little bit of code to import to libraries into this file.
So let's write it out and say import react Wouk's import re-act from react and import re-act native
from re-act dash native like so.
So already some crazy looking code because all this time we've been talking about this library called
re-act native but now it appears that we are importing two separate libraries here.
One that's called react and the other that's called re-act native.
Let's take a short break right here and then we'll figure out exactly what the differences between these
two libraries in the next section.