Join Samer Buna for an in-depth discussion in this video Hello React Native on iOS, part of React Native Essential Training.
- [Instructor] We're ready to create our first React Native app. To do so we first need to install the React Native CLI which is an NPM package. We can do NPM install. It's a global install because this is just the CLI that provides the React Native command that we're going to use to create our React Native applications. And the name of the package is React Native CLI. When this package is installed it will create a React Native command that's available globally, so we can use that command next.
Let's do React Native, and to initialize a new application we use the imit command and give it the name of the application usually in title case here. So let's call this first application HelloRN. This command is going to take some time. It does a few things: it'll create a directory on this level with the exact same name that we passed it with and it will install all the packages required for React Native to work. When it's done it will give you instructions on how to run the application. So let's CD into helloRN and go ahead and run React Native run-iOS.
I'll first test this on iOS and then we'll test it on Android. This command will take some time too because it will package the initial application and prepare it with the runtime in Xcode. And it will also launch the iOS simulator. So let's make space for that. So as you see, my simulator was run with an iPhone 6 simulator, and the React Native run iOS command just opened another terminal which is the packager that's running on port 8081. So this is the server that's going to repackage our code when we do any modifications to the application.
It's still doing it's thing, so just wait on it. And there you go, when everything is successful you'll get this build successful message, and you'll also get the bumbling index iOS js and the application will automatically launch in the simulator and you'll get this welcome to React Native. Let's take a look at the application structure. When I open up atom on this directory, let's navigate this. There is a package.json and packagelock.json., this is NPM. And you'll notice two main dependencies for this application, React and React Native.
The start script if you just want to do NPM start, it will simply just run the local CLI from the node modules. React Native also comes prepackaged with jest for testing. And things seem to be configured with babble as well. You have two main directories; an Android application and an iOS application. The iOS application is actually the Xcode project that we can just open in Xcode. We can actually run this application from Xcode if we want to. And the Android application is the equivalent.
The starting point for the application is an index.js file on the top level. Now, in my project that was generated with React Native 046, I have an index.android.js and an index.ios.js. This has been changed since React Native 049 which would generate a single file that ran on both platforms. So you'll probably have that single index.js file, so edit that. These two files in older versions of React Native applications were always the same, so this is a good change.
And the app registry is used to register this component that we just created. Think about the app registry as the React dom render method, but instead of rendering to the dom, we're registering this component with React Native. So we can now start making changes. Let's simplify this. I'm just going to do hello world. And to refresh I need to do Command + R. Command + R is going to reload the application. So we have hello world. Command + D bring up this menu of things we can do, and we'll go over them.
But for now let's enable live reload. If you enable live reload then any change you make here, when you save that change that change will be automatically reloaded in the simulator, which is really handy. The other very handy thing on this menu is the debug js remotely option, go ahead and click that. And this will open up a Chrome debugger window. So open up the console on that window. And you'll see a few debugging things here, but the most important thing to learn is that you can use console log statements and they will show up in that console.
In the next video we'll test this hello application on Android.
- Hello React Native on iOS and Android
- Styling React Native components
- Platform APIs
- Building a simple game app and a data-driven app
- Using the Fetch API
- Creating an animation loop
- Testing on Android
- Changing an app logo and a splash screen
- Using TestFlight with internal testers