In the last section we created our first component the app component. 2
And I know I've said this four times my message just one more time. 3
A component is a javascript function that returns some amount of GSX react native is going to take our 4
component and render it to the screen. 5
When I say render it to screen device I mean it will run our component right here. 6
It will take the GSX that gets returned and it will decide based on the GSX returned what the content 7
should appear on the screen. 8
So if this was to run an inside of Riak native I would expect us to see the text on the screen some 9
text just creating a component however doesn't actually do anything for us. 10
We have to undergo Step number three down here which is to actually render it to our device when we 11
create a component to react native. 12
Nothing magic happens. 13
You know there's nothing to say oh they need a component right here. 14
I recognize that I'm going to try to arbitrarily rendered onto the screen one of the very important 15
lessons of re-act is to learn that nothing really gets wired up for you. 16
You have to very purposefully celeriac need of all the different ways that these different parts of 17
our application fit together. 18
And so this component is a fantastic example of that. 19
We have to specifically tell re-act native that we wanted to take this component right here and render 20
it to the screen of our device. 21
So that's going to be step number three. 22
So for Step number three we're going to write a little bit of code here to just tell re-act native hey 23
please take this component and show it on the screen of our device. 24
So let's write out the code and discuss exactly what it's doing. 25
Alright re-act native datt app registry dot register component. 26
And I'm going to pass in a string of albums. 27
And I was getting the really interesting part as the second argument to this function in a place a factor 28
of function and I can return app from it. 29
Note that when I use a federal function without placing any curly braces there is an implicit return 30
of app right here. 31
So if we ran this function it would automatically return app. 32
Even though I don't have the actual return key word in there. 33
OK so let's talk about exactly what's happening here. 34
In any re-act need of application that we create. 35
We have to at least register one component to the application. 36
And that's exactly what we're doing. 37
We're saying hey reac need it. 38
You're about to render an application called albums. 39
So the name of the string right here must match up with our project name when we created our project 40
you're using the re-act need a command line tool. 41
We called it albums. 42
And so therefore as the first argument to this function we passed the string albums second. 43
We passed a function that returns the first component to render for our application. 44
We only have one component right now. 45
So we're just going to return the app component again for every reactive component or for every rock 46
new application we create. 47
We must register at least one component. 48
OK. 49
So this is pretty much it. 50
This is all we need to get at least some amount of content on the screen. 51
But before we run this in the simulator there's one last thing I want to do I want to do just a little 52
bit of a refactored here. 53
You'll notice that I am importing Riak native here and I'm using re-act native app registry which is 54
OK and I've also got seemingly an error about the text tag that we're using right here. 55
We look at the excellent It says that text is not defined. 56
So looks like there's still a little bit of issue that we've got going on here. 57
So let's resolve this air in the next section