Get Started with React Native Desktop Development

React Native vs React Key Differences cover

Read Time:2 Minute, 49 Second

If you’re a React Native developer, you may be interested in learning how to create desktop apps with React Native. With the release of React Native desktop development tools, it’s now easier than ever to create cross-platform desktop apps. In this blog post, we will show you how to get started with React Native desktop development.

If you’re not familiar with React Native, it’s a JavaScript framework for building native mobile apps. React Native uses the same core concepts as React, but instead of targeting the web, it targets mobile platforms. This means that you can use React Native to create cross-platform apps that run on both iOS and Android.

React Native desktop is a new tool in the toolbox that allows you to create desktop apps with React Native. With React Native desktop, you can use all the same React Native components, APIs, and features that you’re used to, but now you can target the desktop as well. That means you can take your apps across PC, Xbox, Surface Tablets, and dual-screens with the robust Windows extension to React Native. React Native by default, fully support the macOS Catalina (10.15) or newer. This makes it easy to create cross-platform desktop apps with React Native.

Get Started on React Native Desktops

To get started with React Native desktop, you will need to install the React Native CLI, or if you have npm version 5.2 or greater installed you can use npx, a very powerful command.

The React Native CLI is a command line interface for React Native projects. Make sure you have Node.js and npm installed on your computer.

You can create a new React Native desktop project by running the following command:

npx react-native init <projectName> --template react-native@^0.69.0

react-native init my-app

This will create a new directory called my-app that contains the boilerplate for a new React Native desktop app.

Now that you have a new React Native project, you can start adding code. The my-app directory contains a few files that are generated by the react-native init command. These files include an App.js file, which is the entry point for your app, and a package.json file, which contains information about your app.

In the App.js file, you will see the following code:

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

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container} />
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 0,
    backgroundColor: 'white',
  },
});

This is the boilerplate code for a new React Native app. The code imports the react and react-native dependencies and defines a component called App. The App component is the root component of your app, and it is where you will define the UI for your app.

To start building the UI for your Windows desktop app at the same time, you will need to add the React Native desktop extensions. React Native should work by default for macOS apps on Mac devices with versions Catalina (10.15) or newer. If you plan on targeting the Windows desktop, make sure to follow the updated guide at “Getting Started with Windows” in Microsoft’s documentation.

Now you can start building the UI for your cross-platform desktop app with React Native.