And for this, it makes sense to start here in the app.js file.
Now leave that terminal open here and that process running of course,
so that changes in your code are automatically reflected to the emulators
and now let's see how we can get started with that.
I already mentioned in the first course module that React Native is all about these built-in core components
like text and view. A view would be your div from web development
in case you're a web developer which you probably are if you know React.
So it's a great container component,
you can style it as you see it here and you can wrap other content with it.
Now a text on the other hand is a core component for outputting text,
that's its goal, not there to output an image but there to output text.
Now what you can't do in React Native and that's the first important thing, you can't for example output
text between a view like this.
If we would try to save this without that text wrapper, you see we get an error. That's by the way a screen
you will see from time to time when working with React Native, it gives you an error, it explains what
went wrong. Here for example is a pretty clear error message telling us that text strings must be rendered
within the text component
and why is that so important?
Why am I emphasizing this?
Because that's an important difference to web development, there
you can put text anywhere. In web development,
you could have a div and between the div opening and closing tags, you could have any text and this will
not work on React Native, not only because we're using a div that's not supported there but of course
because on React Native, you really can only output text between text tags, so you need to use that text
component provided by React Native to output text and that's a crucial difference to the web where you
can throw your text anywhere and in React Native, it's way more important that you use the right built-in
component for the job you want to get done and for styling, for setting up a container where you structure
different content, that would be a view, for outputting text, that could be a text. For outputting an image
for example, you will have an image component. So that's how React Native works
and speaking of styling, of layouting, the view has this as a main job, it's mainly there to apply styles
and to layout the content you have in there
and speaking of that, let's get started with layout.
Let's say in our app, we want to have two main areas here on that screen. At the top,
I want to allow the user to enter some text and on the right of that, I want to have a button to confirm
this choice
and below that,
so that's part one, the input area and below that, we have the second part and that's the list of goals
the user entered.
So therefore here in app.js, we can get started by having a wrapping view because just like in normal
React, you need to have one parent component and that will typically be a view in React Native because
that gives you most layouting and styling options and inside of that view,
we could have another view for the input area where we then add our input and below that, yet another
view to have our list of goals and I'll get rid of that text and it's pretty normal in React Native
that you have quite a lot of views nested into each other, so that you can build any layout you want.
Now let's get rid of this container down there by the way and also of this style assignment and let's
start with all of that from scratch.
Important takeaway right now is each component provided by React Native has its own job,
there aren't that many components but the ones that are there have clearly defined roles and you do
then build your UI by nesting these components into each other depending on what you want to achieve,
for example if you want to build a layout, you start with nesting a couple of views and then once you're
at the part where you want to output content, you'll start adding texts and so on and we'll do all of that
over the next lectures. You can also always go to the official React Native docs and there if you click
on Guides, Components and APIs, you'll get an overview over these core building blocks. You'll find
the view here, the text, the image, the text input which I mentioned earlier already and a couple of other
core components and you'll see pretty much all of those or most of those throughout this course and this is
a great place to dive deeper and learn more about them and as you already can tell if you'll leave out
the platform specific ones down there which are more niche focused, then there aren't that many core
components, only about 10 core components and that's how React Native works. Nonetheless, you'll be able to
build any app you want as you will see.