• Update Create React App
• Install Create React App
• How To Create React App
• Install Create React App Yarn

Creating a React App Introduction. React is a user interface framework developed by Facebook. It has a quickly growing developer adoption rate and was ranked as the most loved web framework in the 2019 Stack Overflow developer survey.This article will walk you through setting up your first React app and assumes you are familiar with text editors and command line navigation. This package includes the global command for Create React App. Please refer to its documentation: Getting Started – How to create a new app.; User Guide – How to develop apps bootstrapped with Create React App. Rather than having people eventually find this issue and waste time, be more helpful and provide a note in the readme so people are aware this is an issue and don't waste time. Create-react-app is great for people that are learning react and this issue affects them negatively. This note can be removed once the issue is fixed. Install create-react-native-app. Go to the official react native docs here. “Create React Native App does not currently work with npm v5. We strongly recommend using npm v3, v4, or a recent version of Yarn”. Install Yarn: Follow the official Yarn doc here.

Npx create-react-app my-app. The installation process may take a few minutes. After it is done, you should see a folder that appears in your workspace with the name you gave to your app. Note: If you're on Mac and receiving permission errors, don't forget to be a super user first with the sudo command. Running the App. After the installation is.

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.

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

Install React Native for Windows

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

To create TypeScript template, run npx react-native init <projectName> --template react-native-template-typescript@6.5.*.
If you've installed react native globally in the past, via npm install -g react-native, and are having issues with the new instructions, try adding --ignore-existing to your npx command:
npx --ignore-existing react-native init <projectName> --template react-native@^0.63.2 instead.

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.

Install the Windows extension

Lastly, install the React Native for Windows packages.

The --overwrite flag is a temporary measure that ensures the correct files are copied to metro.config.js for the metro bundler to work with Windows. 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.

Here are the options that react-native-windows-init takes:

This sends non-personal telemetry to Microsoft by default. You can prevent the telemetry from being sent by using the --no-telemetry command line option. See the react-native-windows-init README for more details.

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:

  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! :tada:

  This sends non-personal telemetry to Microsoft by default. You can prevent the telemetry from being sent by using the --no-telemetry command line option. See the @react-native-windows/cli README for more details.

• Using Visual Studio

  • Open the solution file in the application folder in Visual Studio (e.g., AwesomeProject/windows/AwesomeProject.sln if you used AwesomeProject as <projectName>)
  • 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. :tada:

• 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:
  • Press F5 or navigate to the debug menu (alternatively press Ctrl+Shift+D) and in the Debug dropdown select 'Debug Windows' and press the green arrow to run the application.

Update Create React App

Authoring Native Modules

See Native Modules and React Native Windows.

Building a standalone React Native Windows App

Install Create React 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.

How To Create React App

• Open the solution in Visual Studio
• Select the Release configuration from the Configuration Manager dropdown.
• 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.

Install Create React App Yarn

See also this article for additional details: https://techcommunity.microsoft.com/t5/windows-dev-appconsult/getting-started-with-react-native-for-windows/ba-p/912093#