Get Started with React Native

Learning Objectives

After completing this unit, you’ll be able to:

• Understand what React Native is.
  
• Understand how React Native supports popular programming languages.
  
• Install required software for Mobile SDK with React Native.
  

What Is React Native?

If you’ve been through the other modules in the Mobile SDK trail, you know by now that Mobile SDK gives you many development options. You can create native apps in Android and iOS, using native programming languages to write your code. Or, you can create hybrid apps that can run in both Android and iOS, written in JavaScript, CSS, HTML, or even in Visualforce. Hybrid apps, based on Apache Cordova, run in a web view container that provides the translation bridge to native code. This approach exacts a bit of a performance penalty and doesn’t always have the true look and feel of native apps.

Enter React Native. Facebook introduced React as an open-source development framework in 2013 and followed it with React Native in 2015. Nowadays, the React technology is divided into two parts: ReactJS and React Native. ReactJS is a JavaScript library for creating web-based UIs. React Native is a framework that uses the ReactJS library to build native components for mobile apps. Like Cordova, React Native is cross-platform, supporting Android and iOS.

Although you write React Native components in special flavors of JavaScript, CSS, and markup, the underlying objects are native device objects that access the operating system directly. As a result, the performance and look and feel of React Native components rise to native standards.

The standard React Native languages come with a few benign asterisks:

• JavaScript in React implements ES2015, an emerging standard, so hybrid developers might encounter some unfamiliar code constructs in React samples. To learn more about ES2015, see the Resources section at the end of this unit.
  
• CSS in React is actually JavaScript code that mimics CSS and usually works like CSS on the web. One notable difference is that you use camelcase, unhyphenated names for identifiers rather than lowercase, hyphenated names. Even if you know CSS, you might find that you prefer React’s styling mechanism.
  
• The XML markup used in React apps is known as JSX. JSX is a syntax that lets you embed XML markup in JavaScript, rather than the traditional method of embedding JavaScript in markup. So, instead of being housed in a text file separate from JavaScript source, you write the markup directly in the JavaScript code. For example, you can return JSX markup from a component’s render() function.
  
• In Mobile SDK 9.0 or later, you can write code in either standard ES2015 JavaScript, as before, or in TypeScript. You can code using no TypeScript, a little TypeScript, or as much as you can define. TypeScript uses its own compiler to do static type-checking as you code. Errors found by the compiler are informative but not prohibitive--your JavaScript code will still run as before. Mobile SDK libraries for React Native incorporate TypeScript types.
  

A popular reason for using React Native is that you don’t have to recompile your apps with Xcode or Gradle to test changes. Once you’ve got the app running on a real or virtual device, you just edit and save the code, and then refresh your emulator or simulator to see your changes.

Although the underlying Facebook framework remains in pre-release mode, Mobile SDK treats React Native as a full SDK citizen. You can build React Native apps with our command line tools and use Mobile SDK components such as authentication, SmartStore, and Mobile Sync to create full-fledged Mobile SDK apps.

Install Forcereact

Have you completed Set Up Your Mobile SDK Developer Tools? If not, now would be a good time to work through it and make sure your developer tools are up to date. Although React Native coding is done in JavaScript, you still need to install native platform development tools––Android Studio, Xcode, or both. To create React Native apps for Mobile SDK, you use the forcereact npm utility.

Creating a Connected App

The Salesforce Mobile SDK Basics module, which includes connected app instructions, is a prerequisite to this module. You can’t perform this unit’s exercises without creating a connected app.

To connect to the Salesforce service, every mobile app requires a Salesforce connected app. A connected app authorizes your app to communicate with Salesforce and securely access Salesforce APIs.

After you create and save your connected app, notice its details.

• Copy the Callback URL and Consumer Key values. You use these values to set up authentication in your app.
  
• Mobile SDK apps do not use the consumer secret, so you can ignore this value.
  

Resources

• External Link: TypeScript: Typed JavaScript at Any Scale
  
• External Link: List of ECMAScript 2015 features
  
• External Link: ECMAScript 2015 Language Specification
  
• External Link: Writing Markup with JSX