WEBVTT

00:00:01.079 --> 00:00:03.360
in this video we are going to learn

00:00:03.360 --> 00:00:05.190
about adding components to your react

00:00:05.190 --> 00:00:10.830
native app components are the building

00:00:10.830 --> 00:00:12.559
blocks of a react native application

00:00:12.559 --> 00:00:14.879
think of components as the different

00:00:14.879 --> 00:00:16.379
parts of your screen that you can

00:00:16.379 --> 00:00:18.660
interact with and visualize some

00:00:18.660 --> 00:00:19.950
components you might be familiar with

00:00:19.950 --> 00:00:23.580
our text buttons images videos map views

00:00:23.580 --> 00:00:26.400
and more

00:00:26.400 --> 00:00:28.680
react native it makes it really easy to

00:00:28.680 --> 00:00:31.860
add edit and remove components your app

00:00:31.860 --> 00:00:33.840
will start with a simple text component

00:00:33.840 --> 00:00:36.140
that says hello world

00:00:36.140 --> 00:00:38.300
let's check out how to edit this code in

00:00:38.300 --> 00:00:42.620
the code HS text editor here we have our

00:00:42.620 --> 00:00:44.720
code adjust text editor with our react

00:00:44.720 --> 00:00:47.860
native environment setup

00:00:47.860 --> 00:00:52.540
to begin let's press run code and scan

00:00:52.540 --> 00:00:56.290
the QR code on our screen your screen

00:00:56.290 --> 00:01:02.250
probably looks just like this

00:01:02.250 --> 00:01:05.730
if we want to update this text all we

00:01:05.730 --> 00:01:07.560
need to do is delete and retype in

00:01:07.560 --> 00:01:10.980
between the open and closed text

00:01:10.980 --> 00:01:14.340
component tags let's update our text run

00:01:14.340 --> 00:01:18.670
code and scan

00:01:18.670 --> 00:01:21.650
just like that our app has been updated

00:01:21.650 --> 00:01:25.010
to add another component we are going to

00:01:25.010 --> 00:01:27.650
select the components tab in the right

00:01:27.650 --> 00:01:31.640
panel let's add an image component to do

00:01:31.640 --> 00:01:36.170
this click hold and drag below the close

00:01:36.170 --> 00:01:39.400
text tag but before the close view tag

00:01:39.400 --> 00:01:42.050
your image component will be inserted

00:01:42.050 --> 00:01:46.790
automatically for you again let's run

00:01:46.790 --> 00:01:49.369
code scan the QR code and we'll find our

00:01:49.369 --> 00:01:53.630
image right on our screen

00:01:53.630 --> 00:01:56.220
now it's your turn to explore editing

00:01:56.220 --> 00:01:57.900
text and image components in your own

00:01:57.900 --> 00:02:00.200
app