React Native Introduction
React Native Introduction
Lecture notes generated by Aura • 14 June 2026, 03:54 AM • Duration: ~37 min
React-Native: Introduction
📋 Overview
This lecture introduces React Native, a cross-platform framework for building mobile apps
using JavaScript/TypeScript. It covers core concepts like native components, styling, project
setup, and tools like Expo Router. The material emphasizes practical setup, component
structure, and integration with backend services like Appwrite. Understanding these
fundamentals is critical for building scalable, native-like apps without writing platform-
specific code.
🔑 Key Concepts
**Cross-Platform Development**
React Native enables developers to write a single codebase for iOS, Android, and the web.
This reduces development time and maintenance costs by avoiding platform-specific
languages (e.g., Swift for iOS, Kotlin for Android).
This approach allows dynamic styling and avoids the limitations of CSS-in-JS.
**Project Structure**
Initial Setup: A minimal project includes [Link] (root component) and [Link]
(entry point).
Expo Router Restructuring:
Delete [Link] and [Link].
Create an app/ folder with app/[Link] as the homepage.
Add [Link] to configure routing and deep linking (e.g., shelf-app://dashboard).
📝 Summary
React Native uses native components (View, Text) instead of HTML.
Expo Router replaces [Link] and [Link] with a modular app/ folder structure.
Styling is done via StyleSheet objects, not CSS.
Appwrite simplifies backend integration with pre-built services.
Live reload and QR code preview streamline development.
Deep linking enables direct navigation to app features.
VS Code snippets (e.g., RNFES) accelerate component creation.
❓ Practice Questions
**Easy Recall**
8. What is the primary language used in React Native?
9. What command starts the Expo development server?
10. Which file is the entry point after setting up Expo Router?
**Conceptual**
11. Why does React Native use native components instead of HTML?
12. How does Expo Router simplify navigation compared to traditional routing?
13. What is the purpose of [Link] in a React Native project?
**Hard Application**
14. How would you structure a React Native app with two pages (Home and About) using
Expo Router?
15. Explain the steps to integrate Appwrite authentication into a React Native app.
**Answers**
16. JavaScript/TypeScript.
17. `npx expo start`.
18. `app/[Link]`.
19. Native components ensure performance and access to device hardware, while HTML is
limited to web environments.
20. Expo Router uses a file-based structure (app/ folder) to define routes, eliminating the
need for complex routing libraries.
21. [Link] configures app metadata (name, orientation) and deep linking settings.
7.
8.
Screen at 01:40
Screen at 04:42
Screen at 08:03
Screen at 13:25
Screen at 18:26
Screen at 23:28
Screen at 25:29
Screen at 28:30
Screen at 30:51
Appendix: Raw Transcript
Rear Native is Tiv is a cross-platform framework that lets us So build applications for iOS and Android iOS,
Android and even the web using just a single code base and that means And that means we don't need to switch
between different languages and tools to tag and tools to target different devices. Instead we can just write
everything in just just write everything in JavaScript or TypeScript alongside React. Just like... act just like we
would for the web using components, states and hooks. and hooks. However, instead of using regular HTML like
like diff tags, headings and anchor tags to build those components template. those components templates, we
would use native components like view tech. like view, text and image. React Native Translates those
components. links those components into real native elements for iOS and for iOS and Android. All of this means
we can easily write apps that easily write apps that run multiple platforms with a single language. language,
single code base and if you've ever used React before a familiar out before a familiar developer experience. We
can even style React needs. and even style react native apps using style sheet objects, which is very very similar.
very very similar to using regular CSS rules and classes like... classes like we would for the web. In this course
then we're going to learn course then we're going to learn react native from the ground up starting with the very
basics. with the very basics and we'll be working our way up to making this iOS application. iOS application,
which includes authentication location, light and dark themes, state management and navigation. and navigation
features like tabs plus a lot of other stuff as well. for the stuff as well. By the end of the course you should be
confident enough to stand It's confident enough to start making your very own react native applications from
scratch. from scratch. So, let's dive in and spit up a brand new react native Renew React Native Project. Okay, so
before we begin I will say that it would be highly say that it would be highly beneficial if, at this point, you
already have some basic knowledge. basic knowledge of react for the web because that basic knowledge And
that basic knowledge of React will definitely carry over into React Native. to react native. That's not to say it's
absolutely essential and you can- sure and you can carry on with this course if you don't have that prior
knowledge but if you do But if you do want to learn the basics of React first, then you can check out my then you
can check out my React course, which I'll leave the link to down below this video. down below this video. You're
also going to need no JS installed on your installed on your computer to develop react native applications.
application. So if you don't already then head to [Link]. [Link] to download and install the current
version before going any further. before going any further. Anyway, now let's get started by making a new re-
making a new react native application, and the recommended way to currently do this to currently do this is by
using something called Expo, which is a which is a framework built on top of React Native that provides extra
tooling. provides extra tooling and features. It's a little bit like what next generation is to react to suppose, and if
we go to the exposed site... to the exposed sight and then to the docks. You're going to see You're gonna see there
is a quick start guide right here which is here, which is to use this command npx create x create expo app at
latest so this So, this command that boilerplates a new react native site and it comes fully site and it comes fully
baked with the Expo Router TapScript support. TypeScript support and an example project with multiple pages
component pages, components and other stuff already set up. Now for this course, I... course, I don't want all of
that extra boilerplate code because if you're new to because if you're new to react native, it just kind of makes
things more confusing. of using. And instead, I want to start from scratch with a blank scratch with a blank setup
so we can add code of features as we go through the as we go through the course. So I'm going to click on this
create this create a project link right over here and here. And on this page, we can see the same command NPX.
and px create expo app up latest But it also says down here we can use a template. a template using the template
option. So let's click on the So let's click on that to have a quick look at what templates we can use. we can use.
Now the first one default is the default template. the default template that gets used when we just use the
command on its own. on its own and like I said before that comes with a whole start a project and configure
project and configuration which we don't want or need. The one that we The one that we want is the next one
down called blank and this to blank and this generates a completely blank react native project with no your
project with no additional setup or boilerplate code, just a bad button. just the bare bones. You could also use
blank type script. blank TypeScript as well to get a blank project with TypeScript configured. script configured. If
you prefer using that, I want to keep the entry bar I want to keep the entry barrier low for this course so I'm
going to be using JavaScript. javascript, but you can also follow along with blank typescript if you TypeScript if
you prefer. Anyway, let's scroll. Let's scroll back up to the top and we're going to copy that initial command for
now. your command for now. And one more thing before we start, I'll be using VS Code be using VS Code as my
editor of choice for this course. So if you want to follow So if you want to follow along exactly with me, then you
can download it for free. You can download it for free at [Link]. Okay then, so I've already got VS
Code Open right here inside of right here inside a folder called ShellFitUnderscoreApp, which is going to be the
name which is going to be the name of the project that we make. Now, there's nothing currently inside this- And
currently inside this folder, but now we're going to generate a new React native project. native project using that
command we just copied so let's open up a chairman Let's open up a terminal by going to View and then
choosing Terminal. terminal and inside this terminal you need to make sure that you're in the correct that you're
in the correct directory. In my case, that's inside the shelf it this shelf it underscore app directory and then I'm
going to paste in that command which is in that command, which is npx create expo app at latest at latest, then
we're going to follow that with a double dash. double dash template and the template that we the template that
we want to use is going to be the blank one. After this... After this, I'm also going to add a dot forward slash to say
make to say make this project in the current direct, we don't generate a new one. generate a new one and when
we press enter expose going to scaffold that scaffold that new project for us. Now while that's going on, I just
want to going on, I just want to come back to the expo site so that we can set up a development development
environment where we can preview the app as we develop it on a phone. it on a phone. So let's head back to the
homepage first. on page first and then we're going to click on setting up your environment. up your environment
right here. So the first thing The first thing to do is choose the platform we want to develop and test on which
you- and test on which in my case is going to be an iOS device because I'll be using my mobile I'll be using my
mobile to test the application. You can use an Android device if that's Android device if that's what you have all
you can use an Android emulator or iOS emulator or iOS simulator. If you prefer instead, however, I would
record However, I would recommend using a real device where possible because you can because you can then
more easily use native features and gestures. and gestures. So once you selected one of those, you need to
choose you need to choose a way to preview the application as we build it. Now, bye. build it. Now by far the
easiest way is to use Expo Go which allows Expo Go, which allows us to spin up a version of the app directly on
our device. directly on our device, complete with live reload. So that's what we'll be using. So that's what we'll
be using. And I would suggest that you do the same thing. that you do the same thing. It does mean that you'll
have to install the Expo Go- install the Expo Go app on your device though which you can do by scanning this Q
by scanning this QR code right here. And that's going to take you to the download page. download page for expo
go on the app store so make sure you do So make sure you do that first of all and then we can hit this next button
right next button right here to see what the next step is and it says that and it says that we can use this
command, npxExpoStart, to spin up the development server and start the application. the application. When we
do that, Expo generates a QR code in the terminal QR code in the terminal for us, which we can then scan to
preview the project. preview the project inside the Expo Go app that you hopefully just... that you hopefully just
downloaded. So let's copy this command later. command later. Right then, so while we did all that, Expo
Generating that expo generated this react native blank project for us which still comes which still comes with a
little bit of set-up and finals, but not that much. but not that much. We've got an assets folder for any static assets
like image like images we've got node modules folder for any dependency For any dependencies plus the
package files down here as well to track all those dependencies track all those dependencies. We've got a Git
Ignore file in case you want to use Git for location, want to use Git for version control. We've also got this app dot
Jason. [Link] file which is a config file for the application. You can register the app name, orientation, a splash
screen. a splash screen and also an icon for the app inside here, plus a few other things. plus a few other things
too. And then finally, we've got an [Link] file. an [Link] file which is the current entry point for the
application. and also the [Link] file which is the root component of the app. component of the app. Now, we'll
actually be getting rid of these two JavaScript files. two JavaScript files shortly because we'll be structuring the
app slightly differently. slightly differently, but before we do that, let's try previewing this new project on project
on our device. So to do that open up the terminal up the terminal and we're going to paste in that command that
we just copied npx npxxpho start and then press enter then after a few But then, after a few seconds, you should
see a QR code in the terminal, which code in the terminal, which we can then scan with our device camera to
preview. camera to preview the application in Expo Go. All right. All right, so I've just cast my phone screen over
here on my computer so that you can see so that you can see what I'm doing and also so you can see the app on
my phone on my phone as we develop it through the course. Right now I've got my Now I've got my camera
open, I'm just going to use it to scan that QR code. QR code in the terminal, which then provides me with a link
that I can click. the link I can click on. When I do that, it should open up to open up the Expo app and run our
project inside it so inside it so that we can preview it. Okay cool, so there it is, it always So there it is in all this
glory, just a very simple design with a little bit of text, but the of text but that's good because we don't want all of
that boilerplate project code and project code and we want to start from scratch. So then right now we're seeing
the And right now we're seeing the content from inside the root component, which is the which is the [Link] file,
right? And that root component gets registered. gets registered from the entry point of the application inside
the index.j the [Link] file. Now if we quickly change the change the text inside the root component and then
save the file. then save the file, you're going to see a live reload in the device load in the device preview instantly
which is really nice so as we make So, as we make changes to the application, we get to see those in real-time-
those in real time without having to rest out the server. And by the way, don't worry too much Don't worry too
much about all of this content inside the file for now. We're gonna be talking for now. We're going to be talking
about what all of this kind of stuff is later probably later, probably in the next lesson. But anyway, now we've
made a new... Now we've made a new React native application using Expo and Expo and we've run the
application so we can preview it inside the Expo inside the Expo Go app on our phone. The next thing I'd like to
The next thing I'd like to do is just tidy this project up a little bit. it up a little bit and prepare it for the next
lesson. So let- So like I said before, the current entry point to the application is the application is this [Link] file
which registers the app. registers the app file as the root component, right? And that's why we see it on this
screen. And that's why we see it on the screen. But when we use Expo to build to build native apps. We typically
use something called the x. thing called the Expo Router to set up routes and navigation between and navigation
between different pages in the application. an Expo router makes it really simple to do all of that kind of stuff.
kind of stuff but when we use expo router it expects us to It expects us to stretch the application in a slightly
different way than this. different way than this. So we can actually delete these two files. these two files, [Link]
and [Link] because we're not going to because we're not going to be needing them anymore and instead we're
going to create we're going to create an app folder in the root directory of the pro of the project, which is where
the Expo router expects to find all to find all of the page components. Now inside that folder inside that folder we
should create an [Link] file to represent the to represent the home page component of the application. And it's
this component that generally gets rendered when we rendered when we run the application. Also, any
additional pages additional pages that we want the app to have in the future, they're all going to go inside the
going to go inside this up folder. If you've ever made a site with ever made a sight with a recent version of next
JS, this kind of... This kind of structure should be quite familiar because it's almost the same well all. almost the
same where all the page components go inside the app folder, right? folder, right? Now we'll be talking more
about this app folder and the pages. folder and the pages that go inside it later in the course. But for now, just
know that Now just know that this [Link] file inside it now represents it now represents the homepage
component for the application. I want to just quickly, this should actually be called index dot j. index dot JSX not
JS because this is going to be a is going to be a component, a template in here that we create might be doing.
create like we're doing regular react. Okay so inside this in So inside this index file, I want to create a new React
component which I can component which I can do by using a snippet, which is RNFE. and FES, then it can hit top.
And that generates, and you can... that generates a new component for me with the same name as the file name.
name. Now I'm just going to change the name of this component to home. So home so it's clear that this is the
home page. Now I could use that snippet I could use that snippet because I've got a package install for VS Code
called ESF. called ES7, and new... A new React component which I can do by using a snippet a snippet, which is
RNFES, then it can hit top. Then it can hit tab and that generates a new component for me with the same name as
with the same name as the file name. Now I'm just gonna change the name of this change the name of this
component to Home, so it's clear that this is the Home page. is the homepage. Now I could use that snippet
because I've got a package installed of package install for VS Code called ES7 plus React Reader. react, reduce,
react, native snippets. So you can install So you can install that and you're going to get access to a bunch of
different snippets that you can use. that you can use to by the plate things like components and inputs. So and
inputs. So it's really useful. Anyway, this component This component is just a function right called home, which
we export. which we export down here as well. And that component returns a template. turns a template much
like in a regular React for the way for the work. to see if Snippet's door for the for viewing with this index file, I
want to create a new React component. react component, which I can do by using a snippet, which is R&D which
is R and F E S, then it can hit top and that and that just... Generating you component for me component for me
with the same name as the file name. Now, I'm just going to change Now I'm just going to change the name of this
component to home, so it's clear that this so it's clear that this is the homepage. Now I could use that snippet
because I've got a pack snippet because I've got a package install for VS code called ES7 plus PS7 Plus React
Reader. Oops, react natives. snippets so you can So you can install that and you're gonna get access to a bunch of
different snippets that you can use snippets that you can use to bi-leplate things like components and inputs. and
inputs. So it's really useful. Anyway, this component This component is just a function right called home which
we which we export down here as well and that component returns a tap returns a template much like in a
regular react for the React for the web application. Only this time we're not using a div for the rough a div for the
wrapper or a paragraph tag for the text no we're using Now, we're using native components instead of view and
text. and text, and we're importing both of those native components from components from React Native. We
also have this style sheet object down This style sheet object down here, which is where we can create styles
later on. later on. But again, don't focus too much on all of this for now because we'll of this for now because
we'll be playing around with all of it much more in the next lesson. more in the next lesson for now. Just know
that we've created a file. a file called [Link] inside the app folder which the app folder which is meant to
represent the homepage or the home screen of or the home screen of the application that we're building. Now
that over here... Over here on my phone we can still see the old app. old [Link] content. It's not updated and
that's because And that's because when we add new pages and components, or delete them, or delete them,
sometimes doesn't trigger a reload, but when that happens... load, but when that happens, we can just refresh
the app by shaking the phone. by shaking the phone. When you do that, Expo is gonna throw This bow is going
to throw up a bunch of different options. One of them is to really... is to reload the app so you can press that to
force the reload. the reload. Then it should update and show the new content. Now and now... content. Now in
our case when it reloads we see terror and that's because And that's because we've deleted the old entry point to
the application. to the application as well as the old root component. And well... and when we're loading the app
it's still looking for that entry file in desktop file [Link] inside the root directory now it Now it looks for that file
because inside the package.j [Link] file we say the value of main the entry the entry point to the
application is [Link]. So in order for this to work now we need to do a couple of things. a couple of things. The
first thing we need to do is install the Expo RAP- the Expo Router package because the Expo Router knows to
Browter knows to look inside the app folder for an index page to be that... page, to be that homepage. And the
second thing we need to do is up. we need to do is update the entry point to the application to refer. to reference
the Expo router. Alright, so I'm back. Alright, so I'm back on the Expo Docs here and I just want to have a little
look at how we can at how we can install the X-B all-round. So let's scroll down here. roll down here and on the
navigation there we're going to click on file we're going to click on file-based routing and then we're going to
click on this one. we're going to click on this one. Expo router library manually. manually, so this is how we
install it manually into the project. project. Right here we can see these are the dependencies we need to that
says we need to install these things right here and it includes the the expo around itself, so just copy that. that.
Then also come down here and notice this entry point. this entry point which is expo hyphen router forward
slash forward slash entry so that's what we're going to update the main property to be property to be in the
[Link] file. And also And also, if you come down here, you can see we can add this scheme property as well
in game property as well inside app. dot json so not inside this So, not inside the same file, [Link], this is in
[Link]. And when we have this, a scheme, it allows deep link It allows deep linking into the application using
that scheme. So for example. in that scheme. So for example from another website somewhere off from another
application. another application. Okay, then so let's install the Expo router package. router package and its other
dependencies by opening up the terminal and can... up the terminal and canceling out of the current process
using Control plus C. control plus C. Once you've done that pasting the command that we just copy that we just
copied and press Enter. Now we Well, that's in stock While that's installing we can open up the [Link] file to
add that scheme to add that scheme property which allows deep linking to the application. to the application
from an external source, for example from a website or from a website or another application. So let's So let's
add that scheme property up here somewhere and then And then I'm going to give this a value of shelf app or
the app or on word. And that value means that if someone wants to that if someone wants to deep link to a page
in this application location, they would start the link with the scheme name followed by scheme name followed
by colon, then double forward slash and then a path to the and then a path to the page in the app and explore
router can then router can then handle those deep links from inside as a user gets down. and as a user gets
directed to the app using one of those links. Anyway… Anyway, we also need to update the main property inside
the package. the [Link] file. So let's do that next. And we and we just need to update it according to the
docs which said which said the value should be Expo, hyphen router. in router, forward slash entry. So So right
here we're handing off the entry point of the the entry point of the application to Expo Router, which then
automatically And then automatically shows the index component in the app folder by a D. app folded by a
default. Alright so let's just check everything let's just check everything's installed correctly and then if it's done
then if it's done, we can try previewing this project again. Okay, so Okay, so it looks like everything's done now,
so let's run the app again by saying run the app again by seeing npx expo start and we just need to wait for that
we just need to wait for that QR code to show up. And we had to rerun this start. to rerun this dark manned
again by the way because we just cancelled it out of the counseled out of the whole process to install new
dependencies. Anyway, now we can see that again, I'm just going to scan the QR code. scan the QR code again so
we can open this app in Expo Go. Expo go and when it does eventually load we should see the we should see the
content on the screen. Well, just about anyway. just about anyway. It's all going to be up here in the top left
hidden away. it in a way. And we will style this a little bit better in the next... little bit better in the next lesson, so
we can see more easily. But at least it's work. But at least it's working, right? So now we've created a new Now
we've created a new React native app, we've set up Xbox GO. Expo go on our phones preview the app as we
develop and we And we've also installed the Expo router package which is going to make it which is gonna make
it really easy to have multiple screens and navigate between them later get between them later on. There is just
one more thing I want to do before we... I want to do before we finish this lesson though and that is to quickly
prep a back-end. a back-end for this application. Now when I showed you the proof... When I showed you the
preview of the final app that we're going to be working towards, I mentioned... towards. I mentioned that No, do
you before we Now do before we finish this lesson though, and that is to quickly prep a back end. a back end for
this application. Now, when I showed you the proof... When I showed you the preview of the final app that we're
going to be working towards, I mentioned... towards. I mentioned that it's going to include authentication and a
and a database and to power those services we'll be using a we'll be using a back end as a service called Apprite
which comes with a bush. which comes with a bunch of different back-end services that we can use, including a
data including a date space and authentication and it allows us And it allows us to spin up and use those services
really quickly in these really quickly and easily so we don't have to get bugged out by making a whole back-end
backend infrastructure ourselves. Apprighteous handles all of that. just handles all of that heavy lifting force. So
you can sign up for a free account sign up for a free account using the link down below the video and them and
then we can set up a brand new project for the application for the application by going to the account console.
Now to begin. Now to begin with, you'll need to register a new organization for you. organization for your
account, which it might ask you to do automatically when you... automatically when you sign up. But if not, you
can come up here to your account drop down. your account drop down and then just click on new organization
you just need You just need to fill out the details and choose a free option which free option which comes with
some really generous usage limits. Once you've done Once you've done that you should see a page that looks a
little bit like this for your it like this for your organization. If not, again, you can click Again, you can click on your
account up here and just choose the organization you just organization you just created. Anyway from here we
can create a we can create a new back end project for the application by clicking on this button. click it on this
button right here. We just need to give the project name. the project name which I'm going to call Sheffi and
then we need and then we need to select a deployment location which is location, which is just Frankfurt at the
time of recording this, and then click on and then click on create. And once that's created we end up on the
project we end up on the project overview with a bunch of links to all the different to all the different services
available to us for this project. for this project. Now we're not gonna go any further for now. further for now
because we're not going to be implementing these features until later in the until later in the course. But at least
we now have a back-in project. Set up. Checked. Set up and ready so that when we do add those services, it's
services, it's going to be much easier to get started with them. And just one And just one final thing before we
finish this lesson, I promise the course the course files. So I've uploaded the code for each and every single for
each and every single lesson to this GitHub repo right here which I will leave the which I will leave the link to
down below the video. Each lesson has its own bra- has its own branch so you can select whatever lesson code
you want by coming to this. want by coming to this drop down and then choose one from here From here you
can browse the code or download a zip file off download a zip file of the lesson by coming to the code button and
selecting to down. and selecting to download a zip. All right. Okay, then going. Okay then gang, so I know that
was quite a big and hefty introduction to the series. production to the series, but I feel like we needed to get all of
the setup and preparation from preparation out of the way so that for the rest of the course We can just focus on
developer on developing the application. Hopefully now though, you know what though, you know what React
Native is, how to set up a new native project. native project and how to preview it on your phone. In the next... In
the next lesson, we're going to head back to the code and talk a little bit more a little bit more about some of the
basic native components and building blocks building blocks in React Native. By the way, if you want, earlier. If
you want early access to the entire course now without YouTube Adverture you can do first you can do you can
get it on the [Link] website so we'll sites. So I will leave this link down below. You can buy it for $2. for $2
or if you want access to the entire course library. course library including exclusive NetNinja Pro courses. Pro
courses and master classes then you can sign up to a Net Ninja Pro netting your pro subscription which is just $9
a month or so it now or $79 for the entire year and if you use this promo code promo code then you will get your
first