1
00:00:02,410 --> 00:00:05,440
So what are our alternatives to the managed workflow?

2
00:00:05,440 --> 00:00:08,450
One alternative is to use the React Native CLI,

3
00:00:08,470 --> 00:00:10,950
you can learn about this on the official React Native page

4
00:00:10,960 --> 00:00:15,430
if you visit that, you can simply google for React Native to find it and there if you click on get started,

5
00:00:15,880 --> 00:00:22,120
you actually are greeted with two different ways of getting started and the preselected ways to use the

6
00:00:22,130 --> 00:00:23,080
Expo CLI,

7
00:00:23,080 --> 00:00:24,700
it is the approach we used,

8
00:00:24,730 --> 00:00:24,960
right?

9
00:00:24,970 --> 00:00:30,220
So there is nothing too fancy about this, this gives you a React Native app using expo, it's what we

10
00:00:30,220 --> 00:00:31,720
used in this course.

11
00:00:31,750 --> 00:00:35,410
You can also click however on the React Native CLI quick start

12
00:00:35,410 --> 00:00:41,170
and now here you first of all need to set your system up in a certain way and then you can install a

13
00:00:41,170 --> 00:00:47,530
separate package, the React Native CLI which you now need to create a project and to run it and

14
00:00:47,530 --> 00:00:55,060
so on. Now important, here you'll find the detailed installation instructions for different operating systems

15
00:00:55,300 --> 00:00:57,070
and apps you want to build.

16
00:00:57,100 --> 00:01:02,680
Now be aware that on Windows as it says here, you can't build iOS apps, the same on Linux, you can only

17
00:01:02,680 --> 00:01:07,870
build Android apps there and you'll find installation instructions if you select the specific options.

18
00:01:08,590 --> 00:01:09,730
On macOS you can build

19
00:01:09,760 --> 00:01:14,170
iOS and Android and you also will need to follow through these installation instructions.

20
00:01:14,170 --> 00:01:19,030
Now I'll not do this in detail here because you'll find them all written here of course if you want

21
00:01:19,030 --> 00:01:20,110
to follow along,

22
00:01:20,110 --> 00:01:25,960
in the end you will need to install a couple of packages, not npm packages but system wide packages and

23
00:01:25,960 --> 00:01:30,490
the exact installation process differs regarding on which platform you're running on.

24
00:01:30,580 --> 00:01:36,670
You will need to install Android Studio or Xcode, so Xcode for iOS apps, Android Studio for Android

25
00:01:36,670 --> 00:01:39,130
apps and you need to install that now,

26
00:01:39,160 --> 00:01:40,610
previously it was optional,

27
00:01:40,630 --> 00:01:42,840
I just did it to get a simulator,

28
00:01:42,850 --> 00:01:47,020
now you need it because now these tools will be used to build your app.

29
00:01:47,080 --> 00:01:52,750
Previously that was not required because the expo wrapper basically kind of read our code and hosted

30
00:01:52,750 --> 00:01:56,780
it and you can build a standalone app with expo in the managed workflow as well,

31
00:01:56,810 --> 00:01:59,030
there that will happen in the cloud.

32
00:01:59,320 --> 00:02:04,780
Now that all happens locally, so you will need to install Android Studio and so on and install it with all the

33
00:02:04,780 --> 00:02:07,540
options you find here.

34
00:02:07,550 --> 00:02:14,130
Now you also no matter for which platform you're working, you also need to install the React Native CLI,

35
00:02:14,140 --> 00:02:22,420
you can do this in your normal command prompt or terminal, on Mac or Linux you might need to add sudo

36
00:02:22,420 --> 00:02:27,670
in front of this to get the right permissions and this will now globally install the React Native

37
00:02:27,670 --> 00:02:28,050
CLI,

38
00:02:28,060 --> 00:02:32,860
for that you also need NodeJS installed because this uses npm which is node's package manager,

39
00:02:32,860 --> 00:02:34,450
so make sure you have that as well.

40
00:02:35,540 --> 00:02:38,330
Now with the React Native CLI installed,

41
00:02:38,330 --> 00:02:44,990
we can start creating a project totally without expo and for that I'll create a brand new project and I

42
00:02:44,990 --> 00:02:49,110
selected a folder for that by running react-native init

43
00:02:49,130 --> 00:02:53,120
and now any name of your choice, for example 

44
00:02:56,120 --> 00:02:59,950
RNWithoutExpo. For the name, it's important that it's written like this,

45
00:02:59,990 --> 00:03:03,380
no dashes or underscores in there but just one word.

46
00:03:03,890 --> 00:03:08,780
So RNWithoutExpo is the name I'll choose and this will now create a brand new React Native project

47
00:03:08,810 --> 00:03:14,450
using the React Native CLI in this place where you ran this command and it will give you this new

48
00:03:14,450 --> 00:03:16,870
folder which contains this new React Native project.

49
00:03:16,970 --> 00:03:18,260
Now important again,

50
00:03:18,260 --> 00:03:24,800
you now need to have Android Studio and Xcode installed and configured as mentioned in the official

51
00:03:24,800 --> 00:03:25,690
docs here,

52
00:03:25,700 --> 00:03:28,520
otherwise what I'm about to show you will now not work,

53
00:03:28,520 --> 00:03:34,100
you need that installed because now these tools will be leveraged by the React Native CLI to build

54
00:03:34,100 --> 00:03:40,820
and run your app. Also spin up some emulators or simulators, can be the same ones used before in

55
00:03:40,820 --> 00:03:46,060
the course but you need to have those running so that we can see our running React Native app there.

56
00:03:46,560 --> 00:03:52,830
So now let's wait for this setup to finish here and once this is done and this process can take a while,

57
00:03:52,860 --> 00:03:59,900
you can follow the instructions here to in the end run your app. So let me navigate into this newly created

58
00:03:59,900 --> 00:04:00,560
folder here

59
00:04:01,640 --> 00:04:04,670
and run react-native run-ios

60
00:04:04,750 --> 00:04:12,260
for example to run it on the iOS simulator which I got. Now this behind the scenes uses Xcode to

61
00:04:12,260 --> 00:04:13,070
built this app,

62
00:04:13,070 --> 00:04:19,180
it does not use expo anymore, you could uninstall the expo client here, you can uninstall the expo CLI

63
00:04:19,220 --> 00:04:20,390
from your system,

64
00:04:20,390 --> 00:04:26,510
this does not leverage expo at all, it just uses Xcode behind the scenes to build your app,

65
00:04:26,540 --> 00:04:33,020
so this native Apple development tool. So let's await for this build to finish and the first time you build

66
00:04:33,020 --> 00:04:33,260
this,

67
00:04:33,260 --> 00:04:34,260
this takes a bit longer,

68
00:04:34,280 --> 00:04:38,960
subsequent rebuilds will be faster. So let's wait for this to finish.

69
00:04:39,870 --> 00:04:43,980
Now throughout this build process, a new tab will be opened or a new window in your terminal,

70
00:04:43,980 --> 00:04:47,430
keep that process running and also keep the build process running of course,

71
00:04:47,430 --> 00:04:48,080
don't quit this,

72
00:04:48,090 --> 00:04:53,610
so keep both these processes up and running here and now this installs the app on the,

73
00:04:53,610 --> 00:04:58,650
in this case, simulator, if you had a real device connected, it would install it there and it launches

74
00:04:58,650 --> 00:05:00,490
the app there and therefore here,

75
00:05:00,580 --> 00:05:03,060
it actually created a new simulator here for me,

76
00:05:03,090 --> 00:05:07,830
doesn't matter though, it now launches the app here in this simulator. Again for the first launch, this

77
00:05:07,830 --> 00:05:14,030
now downloads the built app on this device basically and you have some nice development features there

78
00:05:14,030 --> 00:05:18,270
too, remote debugging can be enabled, so you've got all these nice features in here as well,

79
00:05:18,300 --> 00:05:22,750
that's not expo exclusive and this first launch will take a bit longer as mentioned.

80
00:05:22,770 --> 00:05:30,220
So let's wait for this download to finish here so that the app does launch and here it's coming up. Now

81
00:05:30,250 --> 00:05:32,410
the exact start screen you're seeing here,

82
00:05:32,500 --> 00:05:37,450
that might differ over time because that's just the starting code you get in the project which we'll

83
00:05:37,450 --> 00:05:43,990
have a look at in a second but this is now the app, a native app without expo otherwise the same, running

84
00:05:44,080 --> 00:05:50,740
on iOS. We can also run it on Android and for that, this process which now finished can be cleared,

85
00:05:50,740 --> 00:05:52,330
the other one should be kept running,

86
00:05:52,330 --> 00:05:57,360
that's your development server that talks to the device and which watches for file changes and pushes new

87
00:05:57,360 --> 00:05:58,270
code to the device,

88
00:05:58,270 --> 00:06:03,250
so what you know from expo, that works here as well. So keep the other process running but now we can

89
00:06:03,250 --> 00:06:10,300
also run react-native run-android to also build the app for Android and leverage that same server to

90
00:06:10,300 --> 00:06:16,260
then also build and push the Android app to the Android emulator and then see that as well.

91
00:06:16,270 --> 00:06:17,950
So let's wait for this to finish,

92
00:06:17,950 --> 00:06:22,850
again this first build will take longer, subsequent reloads will be much faster.

93
00:06:22,930 --> 00:06:28,150
This build process now leverages Android Studio which you also need to have installed and configured

94
00:06:28,330 --> 00:06:34,130
as described in the official docs and therefore this now also of course works totally without expo, it

95
00:06:34,140 --> 00:06:37,190
just uses Android Studio.

96
00:06:37,370 --> 00:06:44,030
Now this also launches the Android app here on my Android emulator but just as before, this initial launch

97
00:06:44,030 --> 00:06:45,470
can take a short while,

98
00:06:45,470 --> 00:06:48,600
now it's connecting to this development server which you therefore here of course

99
00:06:48,710 --> 00:06:53,900
also should keep on running, not only whilst it builds this bundle but all the time so that up on

100
00:06:53,900 --> 00:06:59,180
changes in your files, you get a live rebuild and once this is done, let's see the finished app run on

101
00:06:59,180 --> 00:07:00,530
Android.

102
00:07:00,530 --> 00:07:03,500
Now let's have a look at the code that is responsible for that,

103
00:07:03,500 --> 00:07:07,420
does that now look totally different than what we saw thus far?

104
00:07:07,550 --> 00:07:12,620
For that, I loaded the project here again with Visual Studio Code, so the same set up as before and what

105
00:07:12,620 --> 00:07:18,140
you see looks a bit different but mostly, we have a bunch of different configuration files,

106
00:07:18,140 --> 00:07:22,040
fair enough but that doesn't really change the way we write our code.

107
00:07:22,130 --> 00:07:24,960
Very important, we got an Android and an iOS folder,

108
00:07:24,980 --> 00:07:26,320
we didn't have that before,

109
00:07:26,360 --> 00:07:31,270
those folders and on Windows by the way, Linux you don't have iOS, you only have Android there

110
00:07:31,460 --> 00:07:36,740
but those folders contain the real native app projects which are built with the help of Android Studio

111
00:07:36,740 --> 00:07:40,570
and Xcode and your code gets kind of built into that

112
00:07:40,570 --> 00:07:45,710
you could say, React Native does all that for you, the React Native CLI process but if we have

113
00:07:45,710 --> 00:07:51,230
a look at the concrete code in the app.js file, well that is just what we used in this course,

114
00:07:51,230 --> 00:07:58,430
right? There we have a couple of imports and some additional linking which is showing you some some warnings

115
00:07:58,430 --> 00:08:00,180
here regarding the code style.

116
00:08:00,230 --> 00:08:04,160
These are not actual errors, just that I should use double quotes instead of single quotes,

117
00:08:04,170 --> 00:08:08,570
yes some recommendation I don't care about here but if you have a look at what's getting imported here,

118
00:08:08,630 --> 00:08:13,560
react, save area view, stylesheet, scroll view, view, text - 

119
00:08:13,700 --> 00:08:18,520
these are all things we already worked with, so we have the normal components we already worked with

120
00:08:18,710 --> 00:08:26,690
and of course we do because what I said throughout this course, React Native is React Native, expo is a thin

121
00:08:26,690 --> 00:08:27,780
wrapper around it.

122
00:08:27,860 --> 00:08:34,580
We write the same code, we use the same components, they get compiled to native widgets, that all does

123
00:08:34,580 --> 00:08:36,920
not change when we use expo,

124
00:08:36,920 --> 00:08:41,360
the only difference is that with expo, we don't have to set up as much,

125
00:08:41,390 --> 00:08:48,220
the build is a bit faster and adding native modules is super easy, testing on real devices is super easy,

126
00:08:48,230 --> 00:08:49,580
it's simply easier,

127
00:08:49,580 --> 00:08:54,110
we build the app in the same way though and that's something you can see here as well.

128
00:08:54,110 --> 00:08:56,920
Styles are set up in the same way with Stylesheet.create,

129
00:08:56,990 --> 00:09:00,530
that's all just as we did it throughout this course

130
00:09:01,570 --> 00:09:02,960
and that's important for you.

131
00:09:03,020 --> 00:09:05,870
Now one extra thing you'll find here is the index.js file,

132
00:09:05,870 --> 00:09:11,780
we didn't have that in expo, that kind of is the basic configuration file that launches your app you could

133
00:09:11,780 --> 00:09:16,150
say, that makes sure that this app component gets rendered to the screen,

134
00:09:16,160 --> 00:09:22,160
that's something expo did for you in the React Native expo app but other than that, it's really just

135
00:09:22,160 --> 00:09:24,460
the same and you would build an app in the same way.