WEBVTT

1
00:00:00.320 --> 00:00:03.100
Hi, and welcome to our video
course on React native.

2
00:00:03.120 --> 00:00:04.810
In this lesson, we're going to be talking

3
00:00:04.840 --> 00:00:07.820
about components and how
they're used in React native.

4
00:00:07.850 --> 00:00:09.820
A component in React native is a piece

5
00:00:09.850 --> 00:00:13.740
of code that represents a piece
of UI or a specific functionality.

6
00:00:13.760 --> 00:00:15.860
It's essentially a small reusable building

7
00:00:15.890 --> 00:00:20.260
block that can be used to create
larger, more complex UIs.

8
00:00:20.280 --> 00:00:22.500
Components are the building blocks
of React native,

9
00:00:22.530 --> 00:00:26.780
and they're used to manage and organize
the different parts of your application.

10
00:00:26.810 --> 00:00:29.460
They're responsible for rendering the UI,

11
00:00:29.490 --> 00:00:33.820
handling user interactions, and managing
the application's state and data.

12
00:00:33.850 --> 00:00:35.820
One of the main benefits of using

13
00:00:35.850 --> 00:00:39.500
components in React native
is that they are reusable.

14
00:00:39.530 --> 00:00:41.860
A single component can be used in multiple

15
00:00:41.890 --> 00:00:46.300
places throughout your app, making it
easy to manage and maintain your code.

16
00:00:46.330 --> 00:00:50.820
Additionally, components make it easy
to test and debug your app as you can

17
00:00:50.850 --> 00:00:55.220
focus on testing a specific component
rather than testing the entire app.

18
00:00:55.250 --> 00:00:57.820
Hold on tight.
We're about to embark on a journey

19
00:00:57.850 --> 00:01:01.220
of building our first
React native component.

20
00:01:01.240 --> 00:01:03.020
This is just the beginning of creating

21
00:01:03.050 --> 00:01:06.260
a beautiful, responsive,
and interactive mobile apps.

22
00:01:06.290 --> 00:01:07.660
So let's get to work.

23
00:01:07.690 --> 00:01:09.740
You're now looking at My screen where you

24
00:01:09.770 --> 00:01:14.570
see a simulator open with the Hello World
application that we worked on before.

25
00:01:14.600 --> 00:01:18.180
This is the App.js file just
displaying hello, world text.

26
00:01:18.210 --> 00:01:22.380
Please open your editor up as well
and get started to code with me.

27
00:01:22.410 --> 00:01:26.290
Run your application and don't forget
to have the Metro bundler running,

28
00:01:26.320 --> 00:01:31.140
otherwise you are not going to be
seeing any updates in your simulator.

29
00:01:31.170 --> 00:01:34.780
Are you ready to take your React
native skills to the next level?

30
00:01:34.810 --> 00:01:36.740
Then let's get organized.

31
00:01:36.770 --> 00:01:39.930
We're going to create a new folder called

32
00:01:39.960 --> 00:01:43.780
components to store all of our
custom components in.

33
00:01:43.810 --> 00:01:50.280
This is going to make your code clean,
organized, and easy to navigate.

34
00:01:52.120 --> 00:01:54.340
Next, we're going to create a new folder

35
00:01:54.370 --> 00:01:59.780
inside of components and name
it after our first component.

36
00:01:59.810 --> 00:02:03.570
Our first component's name
is going to be Mytext.

37
00:02:03.600 --> 00:02:09.720
So this directory will be
named in a similar way.

38
00:02:09.840 --> 00:02:19.100
Now let's create a new Mytext JS file,
and this is where we'll write the code

39
00:02:19.130 --> 00:02:23.100
that will make our custom
text component come to life.

40
00:02:23.130 --> 00:02:28.940
For this, we're going to need to import
React from React.

41
00:02:28.970 --> 00:02:35.220
Then we're going to be needing
the text component from React native.

42
00:02:35.250 --> 00:02:41.720
And then let's create a functional
component called Mytext.

43
00:02:41.960 --> 00:02:52.220
And let's make it return a text component
with Hello React native World inside it.

44
00:02:52.250 --> 00:02:56.980
To make this usable,
we're going to have to export it.

45
00:02:57.010 --> 00:02:59.880
So let's do that.

46
00:03:00.080 --> 00:03:02.020
And now let's save it.

47
00:03:02.050 --> 00:03:05.700
And we're ready to use My text component.

48
00:03:05.730 --> 00:03:07.900
With just a few lines of code,

49
00:03:07.930 --> 00:03:10.980
you'll be able to display any
text you want on the screen.

50
00:03:11.010 --> 00:03:12.700
Imagine the possibilities.

51
00:03:12.730 --> 00:03:17.220
You can use this component to add
a personalized touch to your app or even

52
00:03:17.250 --> 00:03:20.580
to display important
information to the user.

53
00:03:20.610 --> 00:03:24.100
The best part, it's super easy to use.

54
00:03:24.130 --> 00:03:31.220
Simply import the Mytext component into
your main app file and edit as a tag.

55
00:03:31.250 --> 00:03:32.900
Let's save this.

56
00:03:32.930 --> 00:03:34.460
It's still not in use.

57
00:03:34.490 --> 00:03:36.820
So all we need to do is delete this text

58
00:03:36.850 --> 00:03:44.220
component and then we're just
going to use My text component.

59
00:03:44.250 --> 00:03:47.180
We don't need this anymore and we can just

60
00:03:47.210 --> 00:03:52.220
save this file and we're going
to see the text in the simulator.

61
00:03:52.250 --> 00:03:53.700
So before you know it,

62
00:03:53.730 --> 00:03:58.660
you already have your own very custom
text component rendering on the screen.

63
00:03:58.690 --> 00:04:02.740
This is the basic structure of a component
in React native and is the perfect

64
00:04:02.770 --> 00:04:06.180
starting point for building
your own custom components.

65
00:04:06.210 --> 00:04:09.220
In this lesson we've learned what
a component is,

66
00:04:09.250 --> 00:04:13.020
how it's used React native
and the benefits of using components.

67
00:04:13.050 --> 00:04:16.860
And we've also seen an example
of a simple text component.

68
00:04:16.880 --> 00:04:19.160
Thank you for watching and see
you in the next video.