MSDN Blog

React Native: Getting Started with Cross-Platform Mobile Development

Jane Doe

Senior Developer Advocate

Welcome to our guide on getting started with React Native! In today's rapidly evolving mobile landscape, the ability to build applications for both iOS and Android from a single codebase is a significant advantage. React Native, powered by Facebook's React library, makes this a reality, allowing web developers to leverage their existing JavaScript skills to create native mobile experiences.

What is React Native?

React Native is an open-source framework for building native mobile applications. Unlike hybrid apps that run in a webview, React Native apps are truly native. This means they compile to native UI components, providing a smooth, responsive, and familiar user experience on both platforms. You write your code in JavaScript and React, and React Native handles the bridging to native APIs and rendering.

Setting Up Your Development Environment

Before you can start coding, you need to set up your development environment. React Native offers two primary approaches:

• Expo CLI: A set of tools and services built around React Native, making it easier to develop, build, debug, and publish native apps. It's a great starting point for beginners and most common use cases.
• React Native CLI: For more advanced control, you can use the React Native CLI. This requires a more involved setup with native build tools like Xcode for iOS and Android Studio for Android.

For this guide, we'll focus on using Expo CLI for a streamlined setup.

Installation Steps (Expo CLI)

First, ensure you have Node.js installed on your machine. You can download it from nodejs.org. Node.js comes with npm (Node Package Manager), which we'll use to install the Expo CLI.

Open your terminal or command prompt and run the following command to install the Expo CLI globally:

npm install -g expo-cli

Once the installation is complete, you can create a new React Native project:

expo init my-awesome-app
cd my-awesome-app
npm start

This will create a new directory named my-awesome-app with a basic project structure. The npm start command will launch the Metro bundler and display a QR code in your terminal.

Running Your First App

To run your application:

• On an iOS device or simulator: Open the Expo Go app (available on the App Store) and scan the QR code from your terminal.
• On an Android device or emulator: Open the Expo Go app (available on the Google Play Store) and scan the QR code.

You should now see the default React Native welcome screen on your device!

Key Concepts

React Native applications are built using React components. Here are a few fundamental concepts:

• Components: The building blocks of your UI. React Native provides core components like View (similar to a div), Text (for displaying text), Image, and Button.
• JSX: A syntax extension for JavaScript that looks similar to HTML, used to describe the structure of your UI.
• Styling: Styles are applied using JavaScript objects, similar to CSS but with camelCase properties (e.g., backgroundColor instead of background-color).

Example: A Simple Counter

Let's modify the default App.js file to create a simple counter:

import React, { useState } from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';

export default function App() {
  const [count, setCount] = useState(0);

  return (
    <View style={styles.container}>
      <Text style={styles.title}>React Native Counter</Text>
      <Text style={styles.countText}>{count}</Text>
      <View style={styles.buttonContainer}>
        <Button
          title="Increment"
          onPress={() => setCount(count + 1)}
          color="#0078d4"
        />
        <Button
          title="Decrement"
          onPress={() => setCount(count - 1)}
          color="#e51e1e"
          disabled={count === 0}
        />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    padding: 20,
  },
  title: {
    fontSize: 28,
    fontWeight: 'bold',
    marginBottom: 20,
    color: '#333',
  },
  countText: {
    fontSize: 64,
    fontWeight: 'bold',
    color: '#0078d4',
    marginBottom: 30,
  },
  buttonContainer: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    width: '80%',
  },
});
            

Save the file, and your app should automatically reload on your device to reflect the changes.