All language subtitles for 4. asdjflasdjf

Oh, boy, that was a lot of slides and talking on my part, but I think you're getting excited.

So let's start building our very first react native app just like that.

Now, throughout the course, I'm going to keep referencing the React Native Dock's because I don't

want to just teach you things that you only learn by looking at what we do as instructors.

But I want to show you the process so that after you're done with the course, you know how to go off

on your own, because at the end of the day, the best resources are right here on the Riak native dock's.

While we try to teach you is the process of what are the best practices, how do we learn these things?

How do we find out about things that maybe we're confused about?

So you're going to see us use their react native dock's constantly because that is the process that

we use when we build Riak native apps.

So the first thing is when we go to introduction, if you scroll all the way down, there's an interactive

example section which are linked to now in here.

Even if you've never seen Riak native code or even react code, don't worry.

Just see if we can follow along or we're going to do is click on this little icon over here.

And this is going to open up a new tab where we have some code, an interactive online code, Ed, that

we can use.

And this is our app over here to the right that says try editing me.

Nothing too crazy.

You see here that we also have the Web version.

So right now I'm just seeing it on my Chrome browser, but I can also do Android.

I can do AOS.

And emulate it.

So if I do tap to play on iOS, sometimes you might get this prompt now because this is a free service,

sometimes you get placed in a queue that is a line up where other people are using it.

So you just have to wait your turn, which takes a bit of time, or you can just say run on your device

and it actually gives you a QR code to run on your phone.

Now, we're going to get into this a little bit later on, because in order for this to work on your

phone, you're going to need to download something called the Expo app, which we're going to talk about.

We're going to run through how to download that through the Google Play store and also for the App Store

before now, because we're just getting started.

We're going to just stick with the Web.

And just to see that we can code anything we want in here, let's just write a nice hello message in

here if I save.

You see that my app now says hello, congratulations, that's your very first react native app, but

Brunos not going to be impressed with this.

This is pretty basic.

But what I want to do is talk about the principles, the building blocks of reac native.

So we actually understand what this code does, whether, you know, react or not.

We can actually understand what the building blocks are of react native.

Now in the Riak native dock's, the second part after the introduction is this idea of core components

and native components, because if you remember, what Riak native does is compile whatever code we

write into native views.

What do I mean by that?

You see, in Android and iOS, a view is the building block of UI or of the user interface.

That is these rectangular elements on the screen, whether it's an image, a Nerf bar, a title, a

text, all of these are called views.

A line of text is a view.

A button is a view.

A list is of you.

A view can contain a view, for example, here, this big thing is a view that contains another view

that contains this view, as you can see over here, and that's how you can think about native development.

You're just building these rectangles all over the place.

Free scroll all the way down over here, we see that react native has something called core components

and what core components are are these building blocks that react native gives us?

You see over here that we have view, text image, scroll view and text input.

What we act native does is it allows us to use these components.

As you can see in our code here, we're using view and text and we're importing it from the React Native

Library and react native automatically converts these into native Android view, which is called view

group IOS.

It's UI view.

The tax will become a TextView in Android and a UI TextView in iOS.

So react native inside the hood is actually converting it, compiling this into a native view so that

it's performant.

That's what really native is.

It lets you build your own components for Android and iOS to build those rectangular boxes of view.

And these rectangular boxes of you is right here.

A view is wrapped.

And inside of it is a text and there's the text.

That's a view.

So react native gives us two things, it gives us the components we can use.

Right here and you can see here we have basic components like view, tax, text, input and image that

we can use.

It has user interface.

So if you go to user interface, we have things like switch and button that we can use.

We have list views that we can use.

And then we also have iOS and Android specific components like action sheets, like back handler, because

on Android you have the back button.

And you have some other ones, like alert dimensions, so react native gives us these components, plus

it gives us something called APIs.

These are tools that we can use inside of Riak native.

For example, let's say I want to figure out the dimensions of a user's phone.

It gives us the dimensions API so that we can measure the dimensions of a phone.

That's it.

React native.

All it does, it gives us these components and the app eyes.

And that's why when we go to our code here, we see that from REAC Native.

We're simply importing a text component and a view component.

So if we go back and review, what we've learned is that react native, the library and the framework

gives us a bunch of components that we can use.

And these components are compiled to native code, both on iOS and Android, depending on what phone

we're using, so that they're super performant and fast.

And it also gives us APIs.

That is, it gives us information that we can interact with about the phone like phone dimension's.

And you saw on the documentation that there's two TAPS components and API and those are the tools that

we get to use to build our apps.

And here's the exciting part.

We have these two things from React Native, but then we need another piece.

And this other piece is this Famous libris react.

And in this course, there's going to be a path for you to take if you're brand new to react so you

can get caught up.

So don't worry, we'll get into that.

But because we act native only gives us the components and the APIs, we then use their react library

to then know what to display on our phones.

What do I mean?

You see here that we also import the REACT Library because without the react library react native doesn't

know react specific things.

For example, later on, we're going to use concepts like state and props and react components that

isn't necessarily JavaScript there, react specific, and we need this library in order for us to combine

all these things into a view.

Now, we'll dive deeper into that later on in the course.

But that's the building block.

The building block is that we need to react and react native for us to display the views that we want.

And if we go back to the docks and go to core components and native components at the very bottom,

there's a really good diagram that shows us the entire idea behind React Native.

That is react native gives you a bunch of components which are called core components.

It also has something called community components, so people can build these components and share them.

For example, there's.

A native directory to find out.

At React Native Directory to see what other people have built.

So you can use these native components that you want.

From the outside world, there's your own native components that you can build, and then there's this

idea of react components and the react components is something that, again, you'll build yourself.

In our case, in our snack, this your app is our own component that will be building again, if you're

new to react, don't get too overwhelmed because we'll go through this as well.

But just through this, you've learned something important that we're going to do throughout the course,

we're going to follow a simple four step process as we build out our UI, we're going to be writing

JavaScript code with the REACT Library to essentially do four things.

One is we usually import the tools that we need, so we import react and then we import whatever react

native components or APIs that we need.

We then create our own components.

Let's call this one zero to mastery and there's zero to mastery, will have some views, will have some

style and we'll have some text.

And then we usually can do some fun things like creating styles for our component, and this stylesheet

is an API that Riak native gives us so we can import that right over here.

And import stylesheet.

To create styles in this styles now, instead of writing it in line like this, we might be able to.

Write it like so so the steps are important, whatever tools we need, create our components, add our

styles, and then finally we export this component so we can use it in other parts of the app.

You remember what I said?

Rectangles and rectangles.

It's all views.

We're just building out these views so that in the end it looks like a screen on the phone.

So to finish off, go and play around with this online Reppel, see if you can look at some of the core

components and modify some of these things to display different information on your app.

And I'll see you in the next video.