In the last section we install dependencies for our new project and spoke about some features of the
app that we're going to built now that our project is all ready to go.
I'm going to start up my code editor inside the auth directory.
And I'm also going to open up my simulator.
Now I've already taken the liberty of starting my simulator up.
You'll see it right here.
It's already running.
I encourage you to pause a video right now.
Remember you can startup your simulator by running the command react.
React dash native run ins or run Android Android.
If you are on Android so let it do its thing and start up the simulator or emulator.
All right.
If you're still here I'm going to assume you have your simulator running.
So let's keep going inside my code editor.
Notice all those same files and folders that we had on the last app that we generated.
So we still have the Android and iOS folders.
We've got the node modules directory.
We've got a bunch of configuration stuff and then we've also got our route file the index does J.S.
file.
Now one thing that you might notice about this default re-act native project is that it doesn't really
give us a lot of project structure.
In other words let's imagine that at some point in time if we are working with a ton of different components
there's not really any clear location on where we should stuff all those components or where we should
really place them inside of our application.
So I'm going to suggest that maybe we should create a new folder to house all the different components
that you and I need to create for this project.
So going to do that right now inside my office directory I'm going to make a new folder called SIRC
and we're going to say that we're going to put all of the custom code that we write for our application
inside the SIRC directory.
The only thing that's going to stay outside will be the index file because re-act native requires there
to be an index dot file in our project directory in order to start up correctly.
Now you will notice when we first generated our project there is a default component that is made for
us and is placed inside this.
J.S. file.
So by default the index dodgiest file imports that app and then attempts to show it on the screen.
So I don't really want to make use of this default app that JSA file.
I'm going to delete it and we're going to make our own but this time we're going to place it inside
of the S or C directory.
So inside the Cercy directory I'm going to make a new file and I'm going to call it app dot J.S. as
well.
Inside if you're going to place some import statements and a new component to generate some content
that we can show on the screen.
So just a very simple little component something to just get us started inside the app.
Jazz file.
I mean first start off by importing react and component from the re-act library.
And I'll also import the view and text tags from re-act native as well.
Then I will create my new app component I'll say class app extends component I'll define my render method
inside of here and inside there I will return a little bit of just boilerplate tags.
So I put a view and inside the view I'll place a text tag and will say that this text tag says something
like an app whatever you want it to say and then don't forget at the bottom of the file.
We need to export this component as well.
So export default app OK.
Last thing we have to do is make sure that we import the correct file into our index dot js file.
So back inside of index dot J.S. Right now this file is assuming that it can import the component from
a file in the same root directory and that's not the case anymore.
We are now placing this app component inside of the SIRC directory.
So I'm going to fix up the path here by saying SIRC slash app like so we should now be able to save
this file and then refresh our simulator.
And we should see that new content appear on the screen.
All right so it is up here at the top left.
We do have a little bit of an overlap issue but it looks like it definitely works.
So let's keep going in the next video.