Hello everyone, I'm Beto. I'll be guiding you through this universal app tutorial with Expo. I'm super excited to introduce you to the world of Universal Apps, and can't wait to see the amazing projects you'll create! Don't forget to join our discord community and share your work! Now let's get started! Alright guys. So in this chapter we'll learn how to create an Expo project and how to get it running. We only need three things. The first thing I would say is a computer. Either a mac, I'll be using a mac or our windows machine or Linux. We also need to install Node.js. Basically, that's the only thing we need to install before we can actually start creating Expo apps. And the other thing is to install Expo in your iPhone or Android device. Now, as you can see here in the right, I am in the App Store using my real iPhone and I already downloaded Expo Go, but you can simply search for Expo Go and download the app. Okay, so we have a mac. We have Expo Go in our device. Now we need to make sure that we have node installed in our computer. It's actually very likely that you already have node in your computer. And to check if you already have node, you can simply open that terminal and simply type node - v. This will throw out the version of nodes that you are using. So in this case I already have the 20. But if you don't have node you can simply search for Node.js. Go ahead and click on the download and install node. We have the version 22 which is a current version, but I would recommend that you use the latest stable version, which is 20. At the time that I'm recording, this video is 20, but if it's 22 at the time that you are watching this video, it's totally fine. So make sure that you select the LTS. You can install it by just pasting this command in your terminal or using nvm. Once you have installed it, you can simply run again node. We do see the version and in this case you should see the 20. All right so we have all the prerequisites. And we are ready to start creating our first app. Now it would be nice if you already have some experience with TypeScript and React. But if you are not very familiar with TypeScript or React, don't worry, just try to follow along with me. Okay, so now we're ready to initialize our first application. I'll just navigate into my terminal to the folder that I want to create this project. So in my desktop I have a test folder. And now inside this test folder I want to create my app. And we can create a new Expo app by running this command. So let's go ahead and copy and paste it here and hit enter. Okay so this command will create a new project. Now this is a folder inside my test folder that I'm already in. So I can say CD sticker smash. And now I'm inside this folder and I can open this in VS code. VS code is going to be my ID. If you don't have VS code in your computer, you can install it by googling VS code and it's going to be the first result. And then from here you can download it. VS code is just a code editor that allows you to edit the files that we just created by running this command. So I already have VS code in my computer, and I can open VS code and then open this folder in VS code. So let's do that. So in my case I have this code dot which is a shortcut that I can run in my terminal. And this will open the project in VS code. All right. Now we are inside VS code using the default template. Now this template has essentially boilerplate code and libraries like Expo Router to build our app we'll continue to add more libraries throughout this tutorial. Before we start editing the code. In the guide you'll find these download assets. So let's go ahead and click here. This will download some assets. So let me open my downloads. So I'll double click on this zip. And here we have some assets. So what I'll do is just copy the content of this folder I'll do command C and then go to VS code. And inside assets we have these images folder. And what I'll do is just delete what we have in here and paste the ones that I just copied. So let's say paste. Now we have these images. Let's close this. Now this template comes with some boilerplate code. But because we want to really understand what's going on and create everything from scratch so that we have a better understanding. Let's go ahead and remove these, boilerplate code by running the following command. Let's say npm run reset project and hit enter. And as you can see here in the output, it says that the app was moved to the app example. And the new app directory created, you know, contains, you know, just a very simple layout. So our previous app, now it's here, we didn't lose it. But we have now a simple application, a simpler application that we can start developing ourselves inside this app folder. Okay. So what I'll do now is just delete this app example because we are not going to be using it. So let's move it to the trash. We also have some components and some navigation that comes inside this folder. So I'll go ahead and delete everything because we want to start from scratch. So I'll delete these two folders as well. We will be creating our components and delete these colors as well. And inside hooks I’ll delete these three files. Okay. So now or app it's cleaner. Let's go ahead and run this project in our real device. To run your Expo app, you can simply say npx Expo start in the terminal. Okay so let's hit enter. Okay. So now we have our development server running. And what I'll do is just scroll down to see this QR code. And from here I'll open my camera and scan this QR code and then open in Expo Go. This is going to if you, if you, if I scroll down, you can see that this is bundling or running this application on my real device and it's loading. Okay. And this is the application. Super simple. We only have a text now that we have the app running on our device. We can go to the app. The app is going to be where our app leaves. And the entry point of our application is going to be the layout. So as you can see here we are defining a stack and a stack screen. And we will learn more about stacks later. But the only important thing to note here is that we are defining a screen, that is pointing to this index file on the left. So these index file is the content of my screen index. On the top it says index right. So if we come here and let me close my explorer for now and just change this to be hello Expo and hit save. We get library loading in my real device. How cool is that? Now it's also worth noting, guys, that this is a universal app, of course, which means we can run this on the web or on an Android device. So if I want to run this on web, I can simply press W is going to start building my application for web. I can also do the same for Android, but in this case you would need to have Android Studio installed in your computer. So let's go ahead and just see how this will work on web. So if I go to the left, it opened this huge window and I can, make it a bit smaller. Maybe there's some zoom in here and we have the same result. So we'll be coming back to this screen. But for now, let's go and add our first style. Now, I don't want to have this background white. Right. It's very strong. So let's go ahead and import something called stylesheets from React Native. And this style sheet allows us to create styles that we can use in our views. Okay. So we have a view. And then inside this view we have a text. Now let's go down here and define our styles. I'll create a variable const styles. And this variable is using the stylesheet that we imported from React Native to create some styles. So inside here we can add create a new style called container. Now these container style is going to be an object. And we are using this style to replace this style that we have in here because this is an inline style and it's it's great, it works fine, but it's taking a lot of space. That's why we're using this style sheet dot create. So I define here a background color. And the background color that I want to use is this one. Now let me just remove these styles x and then paste them here. And then instead of using this object in here with styles we can simply say styles dot container. And now at this point where using this style that we created down here. And if I press command S to save the changes, you can see that now the changes are reflected on my device. Now the text is hard to see. Let's go down here and create a text, text style and then come to the tags and said that the style is going to be equal to text. So let's hit save. And now it's white. Now React Native uses the same color format as a web. It supports hex, RGB, a HSL, and a set of name colors like red, green, and even white, as you can see down here. Okay. And that's it for chapter one. We have successfully created an Expo project. We use React Native core components and we are ready to start developing our Sticker Smash app. I'll see you in the next one.