Okay, today I'll talk about React Native. React Native is a framework that we can use to build mobile applications using the programming language JavaScript. So if you're familiar with web development with HTML, CSS and JavaScript, this is perfect for you because it's very similar. And especially if you already know how to program using the library React for the front end, React Native just takes a step ahead and makes React available on the mobile app development. So if you already know React or some familiarity with that, it will be very straightforward to you. Here's the website if you're interested, reactnative.dev. In any case, so to get started we have to, first we need a terminal open and make sure you have Node.js installed and have any text editor of your choice. I'm going to use Visual Studio Code. Make sure you have a smartphone in hand because we will be sending the development application to the smartphone. On the smartphone you have to download an app called Expo and then basically you scan a QR code and that QR code loads the application in your phone. Okay, so let's open a terminal here. And I'm sharing. So in this terminal, we're going to start off saying npx space create dash expo dash app space and then give it any name you want for this project. I'm going to call it using dash react dash name to press enter. It will generate a project for us with everything already set up and it's done via something called Expo. Expo has a set of tools that makes it very easy for us to develop mobile applications with reactnative. Okay, everybody got here so far? Were you able to install or generate the project with reactnative? All good. Okay, I'm going to go on. So if you do a listing of the directories, I'm going to use ls because I'm on Mac now, but if you're on Linux, it's the same thing. And on Windows it's dirdir. So we have a directory called using dash react dash native. I'm going to cd to that. cd should be across any platform. It's to change directory command. Now I'm inside the folder or directory using reactnative. What I'm going to do is say npm space start. But before that, I want to actually open this folder in Visual Studio Code, which is my editor. So make sure you open that. Let's backtrack. I'm going to say code space dot dot mini card directory. So I open my Visual Studio Code, which is the ID that I use. Now I can do npm space start. Okay, so what we're interested here right now is this QR code. Oops, this might happen to you too many open files. So if that happens, maybe let's see if we can try again. Maybe it's because I'm doing some stuff here with one drive, one moment, let me close that. Let me know if everybody got here so far and was able to do npm start. Okay. I stopped my thing that I was doing on the side. Let me see if it doesn't crash. All right. Let's hope. Oh my gosh. Okay. I did not expect that to be crashing now. Let's see what I can do. Too many files to watch. Quit. Just one moment. I'm going to see what's wrong. Nobody has this problem, right? Just making sure. I'm just going to type a command here to see if my problem will go away. In the meantime, let me share my Visual Studio Code. So at that terminal window, if you scroll up, you'll see a QR code. That's what we're going to use to load the app in your phone. But for now, let's go to Visual Studio Code here to see what the source code looks like. Okay. So I hope you can see it. If you cannot see it, let me know. So the most important part right now, ignore everything except app.js. This is what we're going to change. And this is basically a React component, this function app here. So you have to know a little bit of React for this class. So app is a function in this context is a React component. So we always return a template or what we see as the view. And these look like HTML tags, except it's just actually called JSX, which is synthetic sugar for JavaScript. It's in React. It calls React create element function, but it's better for us to visualize like declarative way. Like HTML. So what we got here is an HTML we call element, but in the React world we call component. So we have a view component here, and we have a text component here, status bar and so on. Now, the attributes, as they are known in HTML, in the React world, they're called props. So style here in HTML being attribute is called a prop in React world. So the prop style is used to give some styling to this component. And this style is coming from this object right here. That's defined in line 13. We have a style sheet.create that passes an object like that. But actually this call is not really necessary to do, as we'll see later we can just pass an object right away there. Okay, so let's see. What I wanted to do is, my thing is still running here on the terminal, but you can do it yourselves. So in the terminal, you have npm start command running. You should see the QR code if you scroll up. So you're going to take your smartphone and you're going to open the camera application. For example, iOS is the camera. And you're going to point it towards the QR code until you see a label that you can click so it goes to the expo app. Let me see if I can share with you one moment here. My phone. Share. I hope you can see my phone here. So I'm sharing my phone camera app. So in the terminal here, I'm going to scroll, see that open an expo go. I click that, okay. And then it should open expo application. You should already have that installed. If you don't, you have to download for the store. So it's going to load the application there. And there you go. This is what it looks like. So the code that we saw, let me stop and share the visual studio code. Here you see the text is this open up app.js to start working on your app. I want you to try to change this text and see and save the file and see a change immediately on your phone. So say hello world, for example, and I'm going to say commands as to save in my case. If you're on Windows, it's control S, or you can click the menu file save. You're going to see in your phone. The message stands to hello world here. Okay. Now if you need for some reason, see some reload this application, you can always take your phone and shake it. And a manual should appear. Okay. And you can click reload here. See that reload and it will reload the application should you have any problems. And you can shake it again to open that menu. And there are other options like show element inspector, open JS debugger, very useful and other things. So whenever you need this menu, shake your phone. How's everybody doing so far? Were you able to load the application in your phone and see a change when you made a change to the code? Were you able to shake your phone? Just let me know if everything is okay so far. I'm getting an error. Something went wrong. Okay. At what point did you get an error? You have the terminal open with npm start. First, we need the npm start running here. Make sure it's running. It's not failed like mine. Because I had a problem with too many files open. So I had to install Watchman. I had to install Watchman to make that go away. And I was doing some stuff on the side. So I closed that as well. That we're doing too many file processing. But do you have your npm start running without any failed message here? You're not going to see your prompt here. And then make sure that's the case. What is Watchman doing? Updating npm? So Watchman is like a program to watch for file changes. And the problem that I had was because my operating system was overloaded with the watching of files. Because it had so many files that I was watching or listening to changes. That it crashed this server development server. Anyway, but I fixed that. Okay, after the QR code scan. Okay, what problem do you get? Were you able to use your smartphone to scan this QR code? Does it go to the expo application? Johnny, can you let me know? Okay, we got many questions here. Let's go one by one. Okay, Ojan said, I did the same thing and installed Watchman. And it's skipping upload and downloading something to my term. Ojan, the reason I brew install Watchman was because I was having trouble with the watch files thing. I assumed none of you had that problem. So you didn't have to run brew install Watchman. That's only if you have problems with watching the files. I was doing some file processing on the side as well. I don't know if that was the problem because I stopped. But as long as you don't have that should be fine. Now for the brew install Watchman, that takes a while to complete. But if you did that anyway, just wait for it to complete and then your prompt will appear again. And then you should type npm space start. Ojan, you don't need to stop the installing of Watchman. Just let it go through so you don't have any issues. After it finishes, just type npm start. Now, Johnny said you get the error when you scan the QR code. Now, do you get the error in Expo? Does the Expo application load at all when you scan the QR code, Johnny? If it does, what does it say? Okay, no, I had to open Expo and scan the QR code. Do you have Android phone? Okay, that's probably why because iOS you can scan through the camera directly. Maybe Android you cannot. No, you don't have to use iOS. So you're on Android, so you open Expo app and chose to scan the QR code. Now it works. So everything's fine now. No, it doesn't work. So you're using Expo on Android. You choose to scan the QR code. And what does it say? Let me know what it says for the error. What specifically is it saying? Because we need to know specifically the message and everything so we can address the problem. Something went wrong. That's not very helpful either. Okay, what can we do here? Sorry about that. You can go back to Expo home try reloading the project. Okay. Remember what I said before a while ago before I started recording. Make sure that your phone is connected to the same internet network like Wi-Fi network as your computer. Because if they're not on the same network, you're probably not going to reach. Make sure you're connected to the same Wi-Fi as your computer. Please try that and let me know and I have to keep going. But I'll ask you again. All right, everybody. So you learn to change this and see hello world. Now this component called text is the most basic one we can use. This is like span in HTML. If you want to show any kind of text, just type the tag text, type whatever you want to show and close it like that. Always the same syntax, right? If you know HTML, last then name of the component greater than if you have anything to place between the tags, the opening closing tags. But the closing tags last then slash name of the component and greater than. Now the thing between the opening and closing tag is also called the children that's passed to this text. So it's a sexually special kind of prop. Remember props or attributes. If you ever see props.children, it's actually what comes, what is placed between the opening and closing tag. Okay. Now this other components, the view is like a container, you can think of it as being a div in HTML. It's just to group some box with things together with no particular. So you can add style to any component. For example, let's start off with text here. Let's make the text color red. To do that, we add a prop, right? That's HTML attribute to the text. The component here, style. Now the syntax is HTML would be quotes, but here is react. So we have to do curly braces. Now this property expects an object, JavaScript object. So you have to open curly braces again and close it. This is an object. So don't confuse the double curly braces. The first one is for the syntax of JSX for the value of some property. Now the thing inside is an actual JavaScript object. So this object, we pass properties there like CSS. They're very similar to CSS except we use camel case. For example, line 16, you see background color is not background dash color, but rather background capital C color because it's camel case naming convention. So if you want to change the color of this text, right? Just remember from CSS that's just color and then colon because it's an object. Now this value is a string. Use either quotes, single or double. Let's say it's red and then save it. Now let's see our phone again. You can see the color or tell a world has been changed to red if you can see red. Okay. Now I want to challenge you to change the font size. If you know CSS, how would you change the font size so the text is bigger here? Let's add another property to this object. Let's start off with font. Oh no, this is cheating because my IDE auto suggests everything for you. But anyway, you guessed it font size. Now let's try a number here. No need for strings. Let's try 24. Save that and see your phone change. And the text has become bigger. And there you go. Now you can keep going, try different stylings. Just keep adding to that object as you see fit. Now to conclude about styles, there is this thing called style sheet object. Create here. Why use that? Well, if you want to reuse styles like CSS, you can reuse with classes. You define a class and you can apply to many different elements if you want to adhere to that style. That's the same thing here. This style sheet thing. You can just, okay, I like this style a lot and I want to be able to, maybe I had three things. I don't want to repeat myself because, okay, all these three messages of hello world should have the same style. But I don't have to repeat the same thing here. So I'm going to take this and I'm going to say define a new property in this object here that's passed to stylesheet.create. And I'm just going to say text style colon and then paste that object. Whenever I need to use this specific style of having color red and font size 24, I would just reference this style sheet here, which is storing the variable styles. So here I would say, for the attribute style of the hello world, I would say styles because that means this variable here in line 15. And then if I want to access text style, this object here, I must reference this property text style. So I say dot text style. That way I take this object, imagine it was replaced here like that. Okay, so we take this and do the same for all the others that add here to the same style. So once we do that, all these three hello worlds will have the same style. And the advantage of using this is that you centralize everything in a single place. So whenever I need, oh, I don't like them to have color red, maybe I want them to green. You can just change it here and all of them that have this style will change accordingly. There's no need to go one by one and find out where they are. So if I share again my phone, you're going to see the text hello world three times because we have three instances of the component text, each having the same style which applies color green and the font size of 24. Okay, everybody, how's it so far? I know Johnny has a little bit of trouble. Johnny, did you try using the same network? Are you having the same problem still? How's everybody else doing? Were you able to get here so far? Okay, Johnny, the bit difficult for us to help you out with this since you're having trouble. You seem to be using Android but there's other ways of running this application. For example, if you're on iOS with Mac, you can install Xcode and then install the simulator for iOS and use that for development. But that takes a while and you need a Mac. In the case of Android, you would have to download Android Studio and then you would have to create a new emulator and that would also take time and it's not covered in this lesson. But those are other options if you cannot load on your phone. If you want, go to our Discord. I want you to post a screenshot of that error and maybe we can try to figure out together there after this lecture. So go to our Discord there. Let me post the link for you. And I hope you understand we have to continue. It's hard to debug right now. Everybody else seems to be doing fine because I didn't hear anything from them, so I'm going to continue. Okay, so far so good. We learned how to style things, learn by the text and view. Now, let me see what we can do now. Let's learn about... Why not? Learn about a button. So let's learn how to add a simple button so you can press or click in this. Go here to the line two where you have import from React Native. You have the curly braces. You can either add before or after in between. Doesn't matter, but make sure to separate of the comma. You're going to type button with the first letter B capitalized. So that way we are able to use the button component within this file. So import the button there. Now we're going to go here and I'm going to place an instance of the button and itself closing in the sense it doesn't need a closing tag. So I close it right away by adding a slash before the greater than. Now I'm going to add a prop to this that's called title and this is the label that the button will show. Let's say I just show text because I'm going to teach you how you can click this button and some text will show up, some hidden text. Now if you save that, you'll see a button that's very simple and if you press it on your phone, nothing's going to happen. Now to make sure something happens with that button, I need a non-press, prop or property. The value is going to be a function that we will define here. Let's say on button press. Now let's go here before return but still within the body of the function app. We're going to say function keyword on button press, the same name I used for the value for on press here. Notice there's no parentheses here in the pair of on press and on button press there. Now going back to the definition of the function, that's when we need parentheses. Now I don't really care about the parameter right now so I omit that. Now on button press I want to do the following. Let's take this hello world text here. I want to hide them all initially but when I press the button I want to show these hello world. How can we do that? We need to keep track of whether this is shown or not so I'm going to need to keep track of state. From react, if you want to store anything that can be changed, we're storing the state. I'm going to use a hook from react called react use state. Now to do that let's import react here at the top import react from react. So I can use react.useState here. Now the use state here would be a value false initially because this would be a value that will be used whether we show this text or not. So let's call this show text. Remember when we call use state hook from react we pass the initial value of whatever we're storing. And then this will return an array of two things the first being the value that's stored in this case will be initially false, a boolean. And the second is a function that we can use to modify or update that value. So we can use the destructuring notation syntax from JavaScript to extract those two elements into two separate variables here. If we use the const square brackets like this with two things separated by comma. So the second one is the function to change it. I always write the same name here but with the set prefix and everything should be camel case. So this variable show text will determine whether the hello world messages will be shown or not. Initially it was false meaning do not show the messages. Now for another for them to disappear I must have a call here. Now I have to have curly braces because I want to interpolate the value of this variable instead of saying the literal characters show text. So the value for show text here will appear here. Now if that's true I want a short circuit with this double ampersand to show these text here. Now notice I use parentheses because I want to put them in a new line. So be careful what you type there. Now I have three things I need to return here but that's not really possible. So I have to group these into a single entity and there are different ways of doing that. You can use a react fragment or you can use a view either way. If you want to use a react fragment simply do react dot fragment here and then enclose everything you want so that they are now placed into one thing. Some people are lazy they don't like typing react dot fragment so they just type the empty angle brackets like that. That's the same thing as react fragment. Okay so when we save that you should not no longer see the text shown by default. Here's the phone. I only see the button show text that when I click nothing happens. Now let's make sure when I touch the button that the text hello world will show again. Let's go back to visual studio code. What's going to happen when I on button press we want to change the value show text that's initially false to true. Once the value is true here it will short circuit here. Okay this value is true therefore I must go to the right hand side of the double ampersand and also evaluate this. Before we had a false which means okay when you have this double ampersand if the left hand side is false that's everything is already false therefore nothing will be rendered. That's how this logic works here. So this double ampersand requires that the left hand side be true in order to evaluate the right hand side otherwise it would just ignore it and just return false right away. Now we must go when we call on button press we're going to say set show text call that now the new value be true because we want to show the text. Let's try it out. Save that. Look at the phone. Press show text now you can see hello world is there. If you press it again nothing happens right it just keeps resetting show text to true true true true over and over. What the next exercise will do is to when you press it again it will hide the text. But before we do that I want to see if everybody is doing well so far. Anybody have any trouble or questions? So far so good okay. Now when we press the button again we want to hide the text. Now before I do that it would be nice if the show text label changed to hide text right because the first time I press. Okay I need to show but if I press hello world is shown and I still see this label saying show but it should actually show hide right because that's the action that will happen when you press. How can we change this text to be dynamic. If it's not shown it will show show. But if it's shown it will render hide. Well there are different ways to go about that they use this one maybe you can go here. Use curly brace now you might have noticed I had no curly brace here. And that's because if you have a string. You can optionally drop the curly braces from this syntax but actually there should be a curly brace there. Now we're going to do the following we're going to check show text and use a ternary operator. ternary is like a shorthand for if show text else something else. If you know programming if this value is true execute whatever is here otherwise if this value is false execute what's in the else block. Now the shorthand for this with ternary is like this. We use the value we want to evaluate we ask the question is this true. If that is true we execute what's to the right hand side of the question mark. If this value is false we execute what's to the right hand side of the colon. So I'm going to use this here. So show text if true meaning the text is shown right now I want to show high text. Otherwise colon I want to show show text because if show text is false it will show. What's to the right hand side of the colon. Let me enable my word wrap so you we don't have to scroll there. Okay now save that. It should show high text now when it's shown but still it doesn't do anything when it press. Now let's do on button press here know it's setting show text to true no matter what so we have to follow the same logic we did for this text. But in this case I'm going to use if and else to show you how we do the same thing instead of using ternary. So if show text we're going to do something if it's true else we're going to do something else if it's not. So if show text is true meaning it's shown we want to be able to hide it right so we're going to say set show text to false. Now else if show text is false meaning it's already hidden we want to be able to show it when we press. So set show text true put it inside the else block there. Now let's verify if it's working let's test. Have my phone here it's in show text is true right now so if I press hide text show text becomes false therefore hello world is not shown. So if I press again up here so if I press again it hides. Okay now why is this happening in the sense of react. So it is assumed you have some react knowledge but we can always review it. So react here is keeping track of a state variable for the show text initially false. So the first time this component or app renders it's going to be rendered with show text having the value false therefore here in the return. It will use show text because show text is false. Imagine false was replaced here therefore show text will appear. Now the moment we press on button press it calls this function that we define and it checks okay what's the value show text right now. We know it's false so imagine there's a false there. If there's a false it means the block for else is executed and the if block is ignored. Therefore we call set show text online 13 with the value true. What does this do well it changes the value of the state variable for show text to the value true. The moment you change the value in state react will react literally it will re render this component app meaning this function will be called again. Now it will be called again with the value for show tax being true. Therefore in line 20 show tax imagined as a true there replaced it will show high taxed because it's true. And then because it's true here as well show tax it will short circuit to the right hand side of the double ampersand and render this fragment. With the three tax components saying hello world. How's everybody doing so far. All good. Okay. We still got some time. So let's have some fun with some image. How do we add images. Well, let's first import the image component from react native at the top. You could place anywhere. Let's do after the comma for the button image first letter I capitalized. Now we can use it in the return. So let's add an image here. Let's do it before show text right before the button I'll add image. Now this is also self closing. It means you don't need to have a separate closing tag so you can just say slash greater than right away. Now it needs to know what what image you want to show. Now we need a source prop. Now HTML is SRC. But here is literally spelled out source. The word with every letter. Now for that we add the syntax curly brace. Now the value here. Let's show an image from the internet out there. I want you to go to any search engine like being calm. Search for the image of whatever you want. I'll search for a dog. And I'll click images and I will click view image and I'll copy the address bar to this. Okay, let's try that. Just show you in case you haven't ever done that. So I'm here and look for dog. Click images. Oh I don't like Google much because it doesn't have bill image. I'm going to Bing. Let's type dog. Click images. Maybe this one and I'll click view image here and I'll copy this. See that in the address bar. I'll copy that. Going back to React Native in the source, the value here. So we have to actually pass an object. So write the curly braces again and inside you're going to say URI property. And then finally you paste that within quotes either single or double. Paste that URL for your image of choice. Before we go on, let's also make sure to specify the width and height for the image. And we're going to add a style here, attribute. Remember, it has to be an object for the value. The syntax first requires us to type curly braces. Then we type the value which is an object. You can add to the style sheet later if you want. Now that's the fine width. Let's say 150 comma and then height. Let's say 150 as well. You can change it whatever. See how it changes in your application. Now let's test it out. You can see there's an image of the dog there with 150 by 150. Okay. So that's React Native. It's very convenient to make mobile apps that are class-spread form, meaning this can run in Android or they can run on iOS. And the code is written in JavaScript programming languages, which is different from the actual native way of doing either Android or iOS, right? Because usually Android, traditionally you would write in the Java language, which now is more like Kotlin language. If you only make an app for Android and it cannot run on iOS, you would have to make a separate iOS app written traditionally in Objective-C. Now it's more written in Swift language. And then you have two separate things going on. So React Native came in and, okay, let's write JavaScript code that will make it run both Android and iOS at the same time. And it's nice because web developers who know HTML, CSS, and JavaScript can just jump in and it's very easy to learn. And it's using React library. It's the same way you write React for the web, except the component names are different. Here we have view, we have image, we have button, text. That's pretty much the only difference and some intricacies of the mobile platform that are not present in the browser environment. But for the most part, it's very easy to get started like you saw. You just have to generate an app with Exple, run the npm start command, and you can, if you have a smartphone, just scan the QR code and you've got the app already loaded there. Like I mentioned before, you can also run in the simulator for iOS or you can run the app also in the emulator for Android if you don't like running on your phone while you develop it. If you want more information about that, access the website for React Native. And you should be able to learn more stuff there, including new components that you can use. Here's the website. You can always, they have many guides and stuff that you can click there and see environment setup, different components and so on. So if you're curious, go there and check it out. Play around with this app that we have. Change things around and see it change on your phone right away and so on. Okay. So that's it.