Creating Universal Windows Apps With React Native – Smashing Magazine

Creating Universal Windows Apps With #reactjs Native – Smashing Magazine

  • The Windows plugin for RNPM will automatically install the react-native and react peer dependencies for react-native-windows if they have not been installed.
  • Adding React Native for Windows to Existing Projects Link
  • npm install –save-dev rnpm-plugin-windows rnpm windows
  • E.g., if you have files MyComponent.windows.js and MyComponent.js , node-haste will choose MyComponent.js for Android and iOS and MyComponent.windows.js for Windows.
  • Installing the React Native Universal Windows platform extension is easy, whether you want to add the Windows platform to your existing app, or you want to start from scratch building an app just for Windows.

React.js is a popular JavaScript library for building reusable UI components. React Native takes all the great features of React, from the one-way binding and virtual DOM to debugging tools, and applies them to mobile app development on iOS and Android. With the React Native Universal Windows platform extension, you can now make your React Native applications run on the Universal Windows families of devices, including desktop, mobile, and Xbox, as well as Windows IoT, Surface Hub, and HoloLens.

@survivejs: Creating Universal Windows Apps With #reactjs Native – Smashing Magazine

React.js 1 is a popular JavaScript library for building reusable UI components. React Native 2 takes all the great features of React, from the one-way binding and virtual DOM to debugging tools 3, and applies them to mobile app development on iOS and Android.

With the React Native Universal Windows platform extension, you can now make your React Native applications run on the Universal Windows families of devices, including desktop, mobile, and Xbox, as well as Windows IoT, Surface Hub, and HoloLens.

In this code story, we will walk through the process of setting up a Universal Windows project for React Native, importing core Windows-specific modules to your JavaScript components, and running the app with Visual Studio.

Installing the React Native Universal Windows platform extension is easy, whether you want to add the Windows platform to your existing app, or you want to start from scratch building an app just for Windows.

React Native developers may be familiar with RNPM 5, a tool initially built to simplify the process of adding native dependencies to React Native projects. RNPM has a great plugin architecture upon which the React Native for Windows command line tools were built.

To start, make sure you have RNPM installed globally.

Once RNPM is installed, install the Windows plugin for RNPM and initialize your project.

command will do the following:

above.

You have a few different options to create a React Native Universal Windows project from scratch. If your eventual intent is to also build apps for iOS and Android in the same code base, then the recommendation is to first use the existing tutorial 9 to set up your React Native project, and then follow the steps above. E.g.,

, from version 0.27 onwards.

if they have not yet been installed.

There are a few boilerplate files that get generated for the Universal Windows App. The important ones include:

Here’s the full output:

support to make dependency management as simple as possible. Instructions for how to link dependencies are available on GitHub 10.

The core components and modules for React Native are imported as follows:

The instructions for running React Native UWP apps, both from Visual Studio and from the CLI, will be evolving on GitHub 15. If you have any problems getting started with building or running your React Windows application, reach out on Discord 16 or open an issue 17. We look forward to hearing your feedback and reviewing your contributions 18!

For further updates on the topic and new features, please view the original documentation 25.

Creating Universal Windows Apps With React Native – Smashing Magazine