1
00:00:02,620 --> 00:00:08,140
To view and edit our code, we need an editor and I recommend using Visual Studio Code which is a free

2
00:00:08,140 --> 00:00:13,480
to use, very powerful IDE which is great for Javascript development, which is what we're doing here at

3
00:00:13,480 --> 00:00:14,210
the end.

4
00:00:14,290 --> 00:00:16,680
You can get it from code.visualstudio.com

5
00:00:16,720 --> 00:00:21,490
there you find versions for Mac, Windows and Linux, simply download the one for your operating system

6
00:00:21,790 --> 00:00:28,070
and walk through the installer this gives you. Once you did install it, open up Visual Studio Code and

7
00:00:28,070 --> 00:00:34,390
in there, open your project by going to file open and then simply pick your project, 

8
00:00:34,390 --> 00:00:40,200
in my case, rn-first-app. Click open here and this will now open up the project here in Visual Studio

9
00:00:40,220 --> 00:00:47,080
Code. Now my Visual Studio Code looks the way it does look here because I have a special theme enabled

10
00:00:47,380 --> 00:00:51,950
which you can change under preferences, color theme and there I'm using the dark plus theme.

11
00:00:51,970 --> 00:00:54,420
So if you want to have the same look you can use that

12
00:00:54,670 --> 00:01:00,680
and I also installed a special extension which you can do under view extensions, there

13
00:01:00,760 --> 00:01:08,230
I got the material icon theme installed, this one here which is totally optional but you can install

14
00:01:08,230 --> 00:01:09,550
it from there as well

15
00:01:09,580 --> 00:01:13,480
and thereafter go back to view explorer to see your files again

16
00:01:13,510 --> 00:01:16,060
so that you get the same file icons as I have here,

17
00:01:16,060 --> 00:01:24,290
again it's totally optional and with that out of the way, this is our React Native app managed by expo.

18
00:01:24,300 --> 00:01:28,920
Now let me quickly walk you through what we have here and then show you what you can change in code

19
00:01:29,190 --> 00:01:31,470
to change something in your app.

20
00:01:31,470 --> 00:01:34,350
Now we have a couple of folders and files here,

21
00:01:34,380 --> 00:01:37,570
the .expo folder just hold some configuration for expo,

22
00:01:37,590 --> 00:01:43,500
you don't need to touch this. The assets folder, that hold some images in this case, like the icon of your

23
00:01:43,500 --> 00:01:49,470
app and the splash screen image and we'll dive into how you can customize this towards the end of the

24
00:01:49,470 --> 00:01:55,470
course and we'll use other assets like images in general throughout this course of course. The node modules

25
00:01:55,470 --> 00:02:01,120
folder holds all the dependencies of this project, that's for example React and React Native but also

26
00:02:01,120 --> 00:02:05,740
the dependencies of dependencies and this folder is managed automatically for you

27
00:02:05,790 --> 00:02:11,460
so you don't need to touch this and you shouldn't touch it indeed. gitignore is a file that helps us

28
00:02:11,460 --> 00:02:16,920
with git which is a source code management system or a source code management tool and you don't need

29
00:02:16,920 --> 00:02:22,860
to use git, if you do, you probably know what gitignore does and if you don't know what git is, after this

30
00:02:22,860 --> 00:02:29,100
lecture, you'll find a brief introduction to it or some resources that help you get started with it but

31
00:02:29,130 --> 00:02:34,530
you don't need to use git to work with React Native. Watchmenconfig, that's something you can ignore

32
00:02:34,530 --> 00:02:39,750
as you see it's empty here, it's a tool used behind the scenes by expo in the end and the app.js

33
00:02:39,750 --> 00:02:45,930
file then the file which holds the code that is responsible for rendering what we see here on the screen.

34
00:02:46,590 --> 00:02:52,350
We'll dive into this in a second, app.json hold some configuration for our React Native app powered

35
00:02:52,350 --> 00:02:59,140
by expo and we'll dive into this throughout this course as well for now, let's ignore it. Babel config configures

36
00:02:59,140 --> 00:03:04,950
how the Javascript code is optimized and compiled, you can leave the default here as well and the

37
00:03:04,950 --> 00:03:10,380
package.json file manages your dependencies and there you see that you're using expo but also React,

38
00:03:10,700 --> 00:03:17,970
also React DOM because expo actually also supports building React apps for web but then also React

39
00:03:17,970 --> 00:03:23,910
Native here and React Native web because again, expo gives you the option of also building web

40
00:03:23,910 --> 00:03:28,710
apps with the help of React Native, it's not something we'll focus on in this course though.

41
00:03:28,710 --> 00:03:30,600
So that's the setup we have here,

42
00:03:30,600 --> 00:03:35,520
the important file for us at the moment is the app.js file because that's in the end responsible for

43
00:03:35,790 --> 00:03:37,800
getting something onto the screen.

44
00:03:37,800 --> 00:03:43,350
Now the exact file content you're seeing here in your app.js file could change over time though, this

45
00:03:43,410 --> 00:03:48,390
starting project which gets generated automatically simply sometimes is changed.

46
00:03:48,570 --> 00:03:53,520
That does of course not affect what I explain here or this course, it does not mean that anything is

47
00:03:53,520 --> 00:03:55,300
outdated or anything like that,

48
00:03:55,350 --> 00:03:57,580
it's just a different starting project

49
00:03:57,720 --> 00:04:03,130
and if you want to follow along with exactly the same one I got, you'll find it attached, so you can also

50
00:04:03,150 --> 00:04:07,320
use that but of course, you could also continue with viewers if it looks slightly different because as

51
00:04:07,320 --> 00:04:09,870
I mentioned, it's just a starting project

52
00:04:09,870 --> 00:04:14,250
you've got, React Native of course still works the same as I explained it here and therefore you can

53
00:04:14,250 --> 00:04:19,770
absolutely follow along with that and add your app.js file just the way I added it and in there

54
00:04:19,770 --> 00:04:24,290
we see we do import React just as we would do it in a React web app.

55
00:04:24,420 --> 00:04:30,630
We need to import React because here, you can also see we're using jsx which is this special Javascript

56
00:04:30,630 --> 00:04:32,640
syntax that looks like HTML

57
00:04:32,790 --> 00:04:35,390
but in the end is just Javascript

58
00:04:35,460 --> 00:04:42,120
and in case you never saw this, definitely dive into a React app or React tutorial first, I do expect

59
00:04:42,270 --> 00:04:45,720
that you know how React generally works.

60
00:04:45,720 --> 00:04:51,270
We always have another import here and that's the React Native import where we import stylesheet, text

61
00:04:51,360 --> 00:04:53,220
and view from there.

62
00:04:53,220 --> 00:04:59,640
Now these are these special components and features I was talking about earlier, text and view are components

63
00:04:59,640 --> 00:05:06,720
provided by React Native that are compiled to native platform widgets and stylesheet is an extra feature

64
00:05:06,720 --> 00:05:10,290
provided by React Native that helps you with styling.

65
00:05:10,290 --> 00:05:15,820
Now then here, we have a normal React component as we would build it in a React for web app too.

66
00:05:16,120 --> 00:05:21,960
We are having a functional component here and with the help of React hooks, we can work with functional

67
00:05:21,960 --> 00:05:28,110
components only as you probably know and this functional component return some jsx code that is rendered

68
00:05:28,200 --> 00:05:29,270
onto the screen

69
00:05:29,400 --> 00:05:35,550
and here we're using the view widget or the view component provided by React Native and the text component

70
00:05:36,270 --> 00:05:38,790
and the view component is like a div,

71
00:05:38,790 --> 00:05:45,720
it's a good wrapper, also good for applying some styles for some containers and detects is then used

72
00:05:45,870 --> 00:05:50,030
for outputting some text which you put between its opening and closing tags.

73
00:05:50,270 --> 00:05:57,090
And down here, we have some styles defined, React Native does not use CSS but it uses a styling syntax

74
00:05:57,090 --> 00:06:04,890
that is based on CSS or follow a similar naming conventions but we'll dive deeper into how to

75
00:06:04,890 --> 00:06:08,550
style your React Native apps throughout this course of course.

76
00:06:08,550 --> 00:06:14,490
So with that, let's change what we see on the screen and let's actually add a button here.

77
00:06:14,490 --> 00:06:20,730
Now the good thing is, we can import a button from React Native, that's another core component provided

78
00:06:20,730 --> 00:06:26,140
by React Native, so we can add this import and then use a button down there. However we don't use it with an

79
00:06:26,140 --> 00:06:27,280
opening and closing tag

80
00:06:27,280 --> 00:06:33,190
but as a self closing element and then we can add a title prop here to set the text we see on a button,

81
00:06:33,460 --> 00:06:36,620
for example change text.

82
00:06:36,850 --> 00:06:41,010
Now when we tap this button, we might want to change this text here

83
00:06:41,200 --> 00:06:45,970
and for this, we need to manage some state here because I want to change some data which should lead

84
00:06:46,180 --> 00:06:49,680
to this component being re-rendered and for this, you need state.

85
00:06:49,900 --> 00:06:56,110
Now prior to React 16.8 which is supported here though, you would have to convert this to a class

86
00:06:56,110 --> 00:07:00,270
based component to useState, since React 16.8,

87
00:07:00,310 --> 00:07:03,710
we can use React hooks and in case you don't know what hooks are,

88
00:07:03,820 --> 00:07:08,620
you should definitely dive into the basics of hooks, attached you find resources that get you started

89
00:07:08,620 --> 00:07:14,800
with that. Hooks are imported from React and here, we need the useState hook which allows us to manage

90
00:07:14,800 --> 00:07:17,290
state in a functional component.

91
00:07:17,290 --> 00:07:26,230
With that, we can use that hook by calling useState here and giving it a default value which could be

92
00:07:26,230 --> 00:07:27,910
this text here,

93
00:07:27,910 --> 00:07:34,420
let's cut it from down there and add it here as a string and then here we can use array destructuring

94
00:07:34,420 --> 00:07:41,040
to get our output text and get a function to change or reset or override this output text

95
00:07:41,110 --> 00:07:43,800
and that's just how the useState hook works,

96
00:07:43,840 --> 00:07:49,620
it gives you an array with exactly two elements, where the first element is your current state snapshot,

97
00:07:49,660 --> 00:07:55,510
so either our starting state or thereafter for subsequent re-render cycles, whatever we set our state

98
00:07:55,510 --> 00:07:56,120
to

99
00:07:56,220 --> 00:08:01,300
and the second is a function that allows you to set your state to a new value and calling that function

100
00:08:01,530 --> 00:08:07,150
will re-render the entire component and output text will then refer to the latest new state.

101
00:08:07,180 --> 00:08:13,670
So here between text, I want to output output text and upon a press of this button,

102
00:08:13,680 --> 00:08:15,400
I want to change this.

103
00:08:15,400 --> 00:08:21,250
So on the button, we can therefore register onPress which is basically the equivalent to onClick which

104
00:08:21,310 --> 00:08:22,640
we would have in the web,

105
00:08:22,660 --> 00:08:29,020
here it's onPress and then we need to bind this to a function, for example to an anonymous inline function

106
00:08:29,020 --> 00:08:36,740
here with this syntax where we call set output text and we set this to the text changed.

107
00:08:36,820 --> 00:08:42,340
So this will call this function here, override our state, therefore re-render this component,

108
00:08:42,340 --> 00:08:48,100
this will be updated in the next render cycle and therefore since we output output text down there,

109
00:08:48,100 --> 00:08:51,520
this will change. If we now save all of that,

110
00:08:51,520 --> 00:08:58,840
the cool thing is your app which you should still have opened on your phone should have automatically

111
00:08:58,850 --> 00:08:59,390
reloaded,

112
00:08:59,390 --> 00:09:00,830
you don't need to restart it,

113
00:09:00,920 --> 00:09:08,090
you don't need to scan this code here again, just by changing the code and saving this file, it should

114
00:09:08,150 --> 00:09:15,320
automatically reload here. And now if we now tap change text here, you see the text changed and that's

115
00:09:15,320 --> 00:09:19,020
your first React Native app doing its job powered by expo

116
00:09:19,040 --> 00:09:24,590
but again you can build and publish this as a standalone app and we'll do that by the end of the course

117
00:09:24,740 --> 00:09:30,110
and therefore this is an amazing way of getting started and React Native development can be as easy

118
00:09:30,110 --> 00:09:30,850
as that.

119
00:09:31,150 --> 00:09:36,510
Now with that, let's finish up this first module before we then dive way deeper into React Native and

120
00:09:36,590 --> 00:09:40,130
into writing React Native code from the second course module on.