React Native for Windows Applications
React-native is framework (some people call it’s library and some people call it’s Framework, will discuss in another article)by facebook to develop the application irrespective of Operating Systems like Android, IOS and Windows.
In this article we will talk about how we can build application for windows on react-native. This application can install on Windows 10,Windows 10 Mobile, Xbox One, Hololens, and Windows 10 IoT Core.
React Native Setup
→ install JDK (v7 or newer)
→ install Node js (latest Version)
→ Visual Studio Code
React Native Setup for Windows
→ install JDK (v7 or newer)
→ install Node js (latest Version)
→ Visual Studio 2019 (Don’t forget Check Universal Windows Platform development and Desktop development with C++ while installing)
→ Visual Studio Code
Steps to Create Project
- After installing Nodejs and NPM Open command prompt and run
C:\Users\userName> npm install -g create-react-native-app
2. Then create a folder and navigate to path from command prompt, then run the following commands to create a new React Native project called “demoProject”:
C:\Users\userName\Documents\react>create-react-native-app demoProject
3. Navigate to project and install npm
C:\Users\userName\Documents\react\demoProject>npm install
4. Need to install windows extension
C:\Users\userName\Documents\react\demoProject>npx react-native-windows-init
5. In the “demoProject” folder you can see the windows folder is created. In the windows folder write click on demoProject.sln and Open it with Visual Studio 2019.
7. Open the project in Visual studio code
8. Open command prompt and go to the project path run the following command
\Users\userName\Documents\react\demoProject>npm run start
9. if you want to run the project from command promp use following command
\Users\userName\Documents\react\demoProject> npx react-native run-windows
10.If you want to run the project from Visiual studio 2019, Click on debug and click start without debugging.
After Opening demoProject.sln in Visual Studio 2019, In right side go to the solution explorer right click on yourprojectname(Universal Windows) and select Scope to This.
11.Open App.js in Visual Studio Code and start coding, Make some changes and check its reflecting in build or not.
12.To generate build, Go to Visual studio 2019, and click on build and click on build solution. Build will be generated in below path.
C:\Users\userName\Documents\React\demoProject\windows\x64\Release\demoProject.exe
For Windows 8.x and 10, Windows Phone 8.1, Windows 10 Mobile
Note:- APPX is the file format used to distribute and install apps on Windows 8.x and 10, Windows Phone 8.1, Windows 10 Mobile, Xbox One,
Hololens, and Windows 10 IoT Core.[32] Unlike legacy desktop apps, APPX is the only installation system allowed for UWP apps.
It replaces the XAP file format on Windows Phone 8.1, in an attempt to unify the distribution of apps for Windows Phone and Windows 8.
→ Find the APPX file :- C:\Users\userName\Documents\React\demoProject\windows\AppPackages\demoProject\demoProject_1.0.0.0_Win32_Debug_Test.
Happy Coding
