Skip to content

getting-started.md

Latest commit

 

History

History
217 lines (164 loc) · 8.02 KB

getting-started.md

File metadata and controls

217 lines (164 loc) · 8.02 KB
id version-0.60-getting-started
title Getting Started
original_id getting-started
<style> .invisible { visibility: hidden; display: none; } .visible { visibility: visible; } .toggler { margin-bottom: 1em; } .toggler ul { width: 100%; display: inline-block; list-style-type: none; padding: 0; margin: 0; border-bottom: 1px solid #6d6d6d; cursor: default; } .toggleActive{ font-weight: 700; } .toggleInactive{ font-weight: 400; } </style> <script> function displayTab(tabType) { if (tabType === 'stable') { document.getElementById("stableTab").className = "toggleActive"; document.getElementById("betaTab").className = "toggleInactive"; document.getElementById("beta").className = "invisible"; document.getElementById("stable").className = "visible"; } else { document.getElementById("stableTab").className = "toggleInactive"; document.getElementById("betaTab").className = "toggleActive"; document.getElementById("beta").className = "visible"; document.getElementById("stable").className = "invisible"; } } </script>

This guide will help you get started on setting up your very first React Native for Windows app.

Make sure you have installed all of the development dependencies.

If you're looking to build directly from the repo or you want to make contributions to the react-native-windows, check out the guide for building the react-native-windows repo.

For information around how to set up React Native, see the React Native Getting Started Guide.

  • Stable
  • Beta
The latest and recommended release to use.

Install React Native for Windows

Remember to call react-native init from the place you want your project directory to live.

npx react-native init <project name> --version ^0.60.0

Navigate into this newly created directory

Once your project has been initialized, React Native will have created a new sub directory where all your generated files live.

cd <project name>

Install the React Native Windows CLI

Now you'll want to install all the Windows React Native command line instructions.

yarn add rnpm-plugin-windows --dev

If using NPM

npm install --save rnpm-plugin-windows

Install the Windows extension

Lastly, install the React Native for Windows packages.

npx react-native windows

You will be asked during this last installation to accept and overwrite your preexisting metro.config.js file. If you are starting a new app, this should have no impact. If you are adding Windows to your existing app and you have modified the metro.config.js file, please back up your changes, run the command and copy over to take effect. We are tracking this issue here.

The newest release guaranteed to get the features and content first; however, not all bugs or framework quirks have been fixed.

Once Beta has been completely vetted for bugs and has been out long enough to be considered fit for mass consumption, it will become the new Stable.

Install React Native for Windows (beta)

Remember to call react-native init from the place you want your project directory to live.

npx react-native init <project name> --version ^0.61.5

Navigate into this newly created directory

Once your project has been initialized, React Native will have created a new sub directory where all your generated files live.

cd <project name>

Install the React Native Windows CLI

Now you'll want to install all the Windows React Native command line instructions.

yarn add rnpm-plugin-windows --dev

If using NPM

npm install --save rnpm-plugin-windows

Install the Windows extension

Lastly, install the React Native for Windows packages.

npx react-native windows --template beta

You will be asked during this last installation to accept and overwrite your preexisting metro.config.js file. If you are starting a new app, this should have no impact. If you are adding Windows to your existing app and you have modified the metro.config.js file, please back up your changes, run the command and copy over to take effect. We are tracking this issue here.

Running a React Native Windows App

Make sure a browser is launched and running before running a React Native Windows app. Also ensure your system meets all the requirements to build a Windows app as well.

  • Without Using Visual Studio

    In your React Native Windows project directory, run:

    npx react-native run-windows

    A new Command Prompt window will open with the React packager as well as a react-native-windows app. This step may take a while during first run since it involves building the entire project and all dependencies. You can now start developing! 🎉

  • Using Visual Studio

    • Open the solution file in the application folder in Visual Studio (e.g., AwesomeProject/windows/AwesomeProject.sln)
    • Select the Debug configuration and the x64 platform from the combo box controls to the left of the Run button and underneath the Team and Tools menu item.
    • Run yarn start from your project directory, and wait for the React Native packager to report success.
    • Click the Run button to the right of the platform combo box control in VS, or select the Debug->Start without Debugging menu item. You now see your new app and Chrome should have loaded http://localhost:8081/debugger-ui/ in a new tab. Press F12 or Ctrl+Shift+I in Chrome to open its Developer Tools. 🎉

  • With VS Code

    • Open your applications folder in VS Code.
    • Install the React Native Tools plugin for VS Code.
    • Create a new file in the applications root directory, .vscode/launch.json and paste the following configuration:
    {
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Debug Windows",
            "cwd": "${workspaceFolder}",
            "type": "reactnative",
            "request": "launch",
            "platform": "windows"
        }
    ]
}
    • Press F5 or navigate to the debug menu (alternatively press Ctrl+Shift+D) and in the Debug drop-down select "Debug Windows" and press the green arrow to run the application.

Authoring Native Modules

See Native Modules and React Native Windows.

Building a standalone React Native Windows App

Follow these steps to build a version of your app that you can install or publish to the store. This version will package your bundle and assets into the APPX package so you don't need to run Metro.

  • Open the solution in Visual Studio
  • Select the DebugBundle or ReleaseBundle configuration from the Configuration Manager drop-down. DebugBundle is similar to Debug in that it adds more debugging info to the native code. Use this if you want to debug the native code. ReleaseBundle is similar to Release, you'll typically use this when producing a final package to publish to the store.
  • Build the solution. You can now launch without first launching Metro.
  • If you want to build an APPX package to share or publish, use the Project => Publish => Create App Packages... option.