Hello React Native on iOS - React Native Tutorial

- [Instructor] To use React Native for iOS without expo, you can use this command. npx React-native init, and then the name of your applications. And I'm not running this command yet. This command will download the temporary copy of the React Native CLI and then use it to initialize a React Native project. However, since we're going to be using the React Native command many times, let's just install it permanently with npm installed-global React-native. The only downside to this method is that when React Native releases a new version, you need to update this local of the CLI if you want to use the new version. While the NPX way will always use the latest available released version, but download it every time. When this package is installed, it will make the React Native command available globally like this. So let's go ahead and use it. We do React-native init, the name of the project. So we'll do HelloRN here. And this command is going to take some time. It does a few things. Just like expo, it'll create a directory on this level with the same name that we pass through it, and it will then install the packages required for React Native to work. When the command is done, it will give you some instructions on how to run the application for both iOS and Android. We'll test it for iOS first and then we'll do Android. So you can run it for iOS, either directly using the React Native command run iOS, or you can open it up in X code and run it from X code as well. So let me go to HelloRN and run the React Native run iOS command. So this will launch up the iPhone simulator. And once it building, it will run the React Native application directly on the simulator without an expo client. At some point, while this project is building, it will open up another terminal for the Metro bundler, and then it will launch the application on the simulator. And this is the screen that you get. Which you can edit in the project. So in here, let's open up a code editor on this directory and the entry point again, is App.js. And as you can see, the default application comes fully configured with things like ESLint, Prettier, Babbel, Metro bundler, and Flow as well, which is a static type checker, just like TypeScript. This part here is the type of the app function. And let me just remove it in here. We won't be covering flow or TypeScript in this course, but they add great value to any project. Once you get comfortable with React Native's components and APIs, take a look at either flow or TypeScript and learn about what they bring to the table. And this is all the code that you see on the screen here. So you can change anything in here and just like expo, things will auto refresh. So here's step one that you see on the screen so we can change things and save, and it should be auto refreshed in here. And there is also a command + D screens. D is for debug. This is the debug menu in React Native. Or if you're testing on an actual device, you can just shake the device to open it up. So this is the debug menu, which has a few handy things here. You can, for example, disabled, the fast refresh that happens on save. And if you do that, then you'll need to reload every time you save. You can change the configuration for the bundler and the inspector is handy as well. This allows you to inspect a few things. For example, here, you can inspect elements. You can just tap on an element to see what is going on with that element. You can see its box model, you can see some of the styles. And this inspector display is permanent. So when you're done with it, you can hide it again. But the more important line here is really the debug line. If you click it, React Native will open up your browser dev tools, and you can do a few things here. You can, for example, reload the app from here if you need to. And of course you can do everything the developer tools allow you to do. For example, we can just come in here and console log a message and save, and this message will show up in the open developer tools. So it's probably a very good idea to always be in this mode and always keep your eye on the developer tools as you're building your application. And you can use Command + R to reload this application, and this is a regular iPhone application. You can, for example, kill it with a swipe up just like you kill any other application and you see it on the screen right now. You can click it to run it again. And down here, there are some cool links to learn the basics of React Native. These are links to the official React Native documentations. For example, if you click on styles, it will open up the style section of the React Native documentation in here. Let's explore the direct restructure here a little bit further. Starting with package.json. And you can see right here what dependencies this project needs. And it's just React and React Native. The notice that there is no React Dom in here, we're not building for the Dom, we're building for React Native. React Native also comes packaged with Jest. So you can use just to write your tests and things are configured with Babbel and the Metro React Native bundler. The entry point for the whole project is actually this index.js file. Which here imports the app component that we saw, the main component in this example, and it registered this component with the app registry package from React Native. So this is equivalent to the ReactDom.render method that renders a component into the Dom. This app registry registered the component into the React Native flow and make it show up in the simulator. And there's also app.json where you can organize any variables that you need in your application. Then app.js is the main component and this component has a few cool examples of things you can do with React Native. So right out of the box, we get so much value. We're simply writing JavaScript and React, and we're seeing our application in a simulator on an iPhone. And most importantly, we didn't need to do a build step for the application between changes. Things just work. And you have options to control how they work. We also get to debug this application as if it was a web application with the powerful Chrome dev tools. All of these are huge ones for working with React Native. In the next video, we'll test the same React application on Android.