To view and edit our code, we need an editor and I recommend using Visual Studio Code which is a free
to use, very powerful IDE which is great for Javascript development, which is what we're doing here at
the end.
You can get it from code.visualstudio.com
there you find versions for Mac, Windows and Linux, simply download the one for your operating system
and walk through the installer this gives you. Once you did install it, open up Visual Studio Code and
in there, open your project by going to file open and then simply pick your project,
in my case, rn-first-app. Click open here and this will now open up the project here in Visual Studio
Code. Now my Visual Studio Code looks the way it does look here because I have a special theme enabled
which you can change under preferences, color theme and there I'm using the dark plus theme.
So if you want to have the same look you can use that
and I also installed a special extension which you can do under view extensions, there
I got the material icon theme installed, this one here which is totally optional but you can install
it from there as well
and thereafter go back to view explorer to see your files again
so that you get the same file icons as I have here,
again it's totally optional and with that out of the way, this is our React Native app managed by expo.
Now let me quickly walk you through what we have here and then show you what you can change in code
to change something in your app.
Now we have a couple of folders and files here,
the .expo folder just hold some configuration for expo,
you don't need to touch this. The assets folder, that hold some images in this case, like the icon of your
app and the splash screen image and we'll dive into how you can customize this towards the end of the
course and we'll use other assets like images in general throughout this course of course. The node modules
folder holds all the dependencies of this project, that's for example React and React Native but also
the dependencies of dependencies and this folder is managed automatically for you
so you don't need to touch this and you shouldn't touch it indeed. gitignore is a file that helps us
with git which is a source code management system or a source code management tool and you don't need
to use git, if you do, you probably know what gitignore does and if you don't know what git is, after this
lecture, you'll find a brief introduction to it or some resources that help you get started with it but
you don't need to use git to work with React Native. Watchmenconfig, that's something you can ignore
as you see it's empty here, it's a tool used behind the scenes by expo in the end and the app.js
file then the file which holds the code that is responsible for rendering what we see here on the screen.
We'll dive into this in a second, app.json hold some configuration for our React Native app powered
by expo and we'll dive into this throughout this course as well for now, let's ignore it. Babel config configures
how the Javascript code is optimized and compiled, you can leave the default here as well and the
package.json file manages your dependencies and there you see that you're using expo but also React,
also React DOM because expo actually also supports building React apps for web but then also React
Native here and React Native web because again, expo gives you the option of also building web
apps with the help of React Native, it's not something we'll focus on in this course though.
So that's the setup we have here,
the important file for us at the moment is the app.js file because that's in the end responsible for
getting something onto the screen.
Now the exact file content you're seeing here in your app.js file could change over time though, this
starting project which gets generated automatically simply sometimes is changed.
That does of course not affect what I explain here or this course, it does not mean that anything is
outdated or anything like that,
it's just a different starting project
and if you want to follow along with exactly the same one I got, you'll find it attached, so you can also
use that but of course, you could also continue with viewers if it looks slightly different because as
I mentioned, it's just a starting project
you've got, React Native of course still works the same as I explained it here and therefore you can
absolutely follow along with that and add your app.js file just the way I added it and in there
we see we do import React just as we would do it in a React web app.
We need to import React because here, you can also see we're using jsx which is this special Javascript
syntax that looks like HTML
but in the end is just Javascript
and in case you never saw this, definitely dive into a React app or React tutorial first, I do expect
that you know how React generally works.
We always have another import here and that's the React Native import where we import stylesheet, text
and view from there.
Now these are these special components and features I was talking about earlier, text and view are components
provided by React Native that are compiled to native platform widgets and stylesheet is an extra feature
provided by React Native that helps you with styling.
Now then here, we have a normal React component as we would build it in a React for web app too.
We are having a functional component here and with the help of React hooks, we can work with functional
components only as you probably know and this functional component return some jsx code that is rendered
onto the screen
and here we're using the view widget or the view component provided by React Native and the text component
and the view component is like a div,
it's a good wrapper, also good for applying some styles for some containers and detects is then used
for outputting some text which you put between its opening and closing tags.
And down here, we have some styles defined, React Native does not use CSS but it uses a styling syntax
that is based on CSS or follow a similar naming conventions but we'll dive deeper into how to
style your React Native apps throughout this course of course.
So with that, let's change what we see on the screen and let's actually add a button here.
Now the good thing is, we can import a button from React Native, that's another core component provided
by React Native, so we can add this import and then use a button down there. However we don't use it with an
opening and closing tag
but as a self closing element and then we can add a title prop here to set the text we see on a button,
for example change text.
Now when we tap this button, we might want to change this text here
and for this, we need to manage some state here because I want to change some data which should lead
to this component being re-rendered and for this, you need state.
Now prior to React 16.8 which is supported here though, you would have to convert this to a class
based component to useState, since React 16.8,
we can use React hooks and in case you don't know what hooks are,
you should definitely dive into the basics of hooks, attached you find resources that get you started
with that. Hooks are imported from React and here, we need the useState hook which allows us to manage
state in a functional component.
With that, we can use that hook by calling useState here and giving it a default value which could be
this text here,
let's cut it from down there and add it here as a string and then here we can use array destructuring
to get our output text and get a function to change or reset or override this output text
and that's just how the useState hook works,
it gives you an array with exactly two elements, where the first element is your current state snapshot,
so either our starting state or thereafter for subsequent re-render cycles, whatever we set our state
to
and the second is a function that allows you to set your state to a new value and calling that function
will re-render the entire component and output text will then refer to the latest new state.
So here between text, I want to output output text and upon a press of this button,
I want to change this.
So on the button, we can therefore register onPress which is basically the equivalent to onClick which
we would have in the web,
here it's onPress and then we need to bind this to a function, for example to an anonymous inline function
here with this syntax where we call set output text and we set this to the text changed.
So this will call this function here, override our state, therefore re-render this component,
this will be updated in the next render cycle and therefore since we output output text down there,
this will change. If we now save all of that,
the cool thing is your app which you should still have opened on your phone should have automatically
reloaded,
you don't need to restart it,
you don't need to scan this code here again, just by changing the code and saving this file, it should
automatically reload here. And now if we now tap change text here, you see the text changed and that's
your first React Native app doing its job powered by expo
but again you can build and publish this as a standalone app and we'll do that by the end of the course
and therefore this is an amazing way of getting started and React Native development can be as easy
as that.
Now with that, let's finish up this first module before we then dive way deeper into React Native and
into writing React Native code from the second course module on.