The Complete React Native Mobile Apps Development

This course is an introduction to React Native, Facebook’s JavaScript framework for building mobile applications. Using your existing knowledge of JavaScript and React, you’ll be able to build and deploy fully featured mobile applications for both iOS and Android that truly render natively. Just because it’s JavaScript doesn’t mean we should settle for less. There are plenty of advantages to working with React Native over traditional means of mobile development, and we don’t need to sacrifice the native look and feel.

We’ll start with the basics, and work our way up to deploying a full-fledged application to both the iOS App Store and the Google Play Store, with 100% code reuse between the two platforms. In addition to the essentials of the framework, we’ll discuss how to work beyond it, including how to make use of third-party libraries and even how to write your own Java or Objective-C libraries to extend React Native.If you’re coming to mobile development from the perspective of a frontend software engineer or web developer, this is the course for you. React Native is a pretty amazing thing, and I hope you’re as excited to explore it.

Prerequisites

This course is not an introduction to React, in general. We’ll assume that you have some working knowledge of React. If you’re brand new to React, we suggest reading through a tutorial or two before coming back to take the plunge into mobile development. Specifically, you should be familiar with the role of props and state, the component lifecycle, and how to create React components.

Chapter1. What Is React Native?

React Native is a JavaScript framework for writing real, natively rendering mobile applications for iOS and Android. It’s based on React, Facebook’s JavaScript library for building user interfaces, but instead of targeting the browser, it targets mobile platforms.

Chapter 2. Working with React Native

In this chapter, we’ll cover the “bridge,” and review how React Native works under the hood. Then, we’ll look at how React Native components differ from their web counterparts, and cover what you’ll need to know in order to create and style components for mobile.

Chapter 3. Building Your First Application

In this chapter, we will cover how to set up your local development environment for working with React Native. Then, we will go through the basics of creating a simple application, which you will then be able to deploy to your own iOS or Android device.

Chapter 4. Components for Mobile

In this chapter, we will take a closer look at the mobile-based components used for React Native, and how they compare to basic HTML elements. Mobile interfaces are based on different primitive UI elements than web pages, and thus we need to use different components.

Chapter 5. Styles

It’s great to be able to build functional applications, but if you can’t style them effectively, you won’t get very far! In Chapter 3, we built a simple weather application with some basic styles. While this gave us an overview of how to style React Native components, we glossed over many of the details. In this chapter, we will take a closer look at how styles work in React Native. We’ll cover how to create and manage your stylesheets, as well as the details of React Native’s implementation of CSS rules. By the end of this chapter, you should feel comfortable creating and styling your own React Native components and applications.

Chapter 6. Platform APIs

This chapter covers some of the available platform APIs. For our example, we’ll make some modifications to the Weather application from earlier. We’ll add geolocation to the app, so that it detects the user’s location automatically. We will also add “memory” to the app, so it will remember your previously searched locations. Finally, we’ll use the camera roll to change the background image to one of the user’s photos.

Chapter 7. Modules

In Chapter 6, we looked at some of the APIs that React Native exposes for interacting with the host platform. Things like the camera roll and geolocation are platform-specific, but React Native exposes interfaces for them for our convenience. Because support for those APIs is built into React Native, they’re quite easy to use. What happens when we want to use an API that isn’t supported by React Native? In this chapter, we’ll look at how to install modules written by members of the React Native community using npm. We’ll also take a closer look at one such module for iOS, reactnative video, and learn how the RCTBridgeModule can allow you to add JavaScript interfaces to existing Objective-C APIs. We’ll also look at importing pure JavaScript libraries into your project, and how to manage dependencies.

Chapter 8. Debugging and Developer Tools

As you develop your own applications, chances are that something will go wrong along the way. When it’s time to debug your applications, we happily have some React Native specific tools that will make the job easier. There are also some nasty bugs that can crop up at the intersection of React Native and its host platform, which we’ll take a look at, too. In this chapter, we’ll dig into common pitfalls of React Native development, and the tools you can use to tackle them. And because any discussion of debugging would be incomplete without reference to testing, we’ll also cover the basics of getting automated testing set up for your React Native code.

Chapter 9. Putting It All Together

Now that we’ve covered many of the pieces you’ll need to build your own React Native applications, let’s put everything together. Up until now, we’ve mostly dealt with small examples. In this chapter, we’ll look at the structure of a larger application. We’ll cover the use of Reflux, a library for unidirectional dataflow based on the Flux model. We’ll also see how we can use the Dimensions API to scale text to accommodate different screen sizes. Finally, we’ll end with some homework: tasks that you can undertake to see what it’s like to build out more features in an existing React Native codebase.

Chapter 10. Deploying to the iOS App Store

Now that you have a totally awesome application, you’ll want to get it into the hands of your users. This process will vary by platform. In this chapter, we will focus on the detailed steps for uploading an application to the iOS App Store.