How To Setup React Native To Run in VSCode on Windows
The complete guide to installing React Native on Visual Studio Code. Or as some may say VS Code. In this ReactNative tutorial you'll be shown how to install and setup ReactNative to run on localhost and edit the app using VSCode editor.
React Native does not run in VSCode. What. What? It runs in NodeJS environment.
Guys...it took a long time to put together this article and video. Please Share Links.
No ads. No filler content. No 🤡 clownmanship. Just how to setup React Native in VSCode.
If you want to edit React Native in Visual Studio Code, you can.
But nothing compares to first properly setting up React Native app correctly.
First and foremost, I utterly beseech you to watch this React Native installation video:
How to setup React Native in VSCode (with react-native-cli)
But you may want to setup React Native to run in VSCode, instead of Android Studio. That's entirely possible. After all the IDE is used only to edit ReactNative app, not to actually run it. You can still use Android Studio's Android emulator.
Even if, like me, you chose to develop your ReactNative app in VSCode. In my opinion Visual Studio Code is a much better editor for running React Native apps from, because of its React extensions.
To run ReactNative in VSCode, the official instructions may not always be clear. Setting up React Native can be a bit of a hassle. Sn it's always nice to have an official guide from an actual developer who stumbled on its nooks and crannies, and came here to tell you about what to avoid and the gotchas of the setup process.
Instagram was built using React Native. It has a fluid UX and used by millions of users. That's a good enough reason to install React Native locally for editing with your favorite IDE: VSCode. Whether VSCode is an IDE or not, is up for a debate.
In order to build an app like Instagram, you can use React Native. In this tutorial we'll set it up for running in VSCode editor.
To setup React Native in VSCode follow these instructions:
Here are the steps to set up React Native for running in Visual Studio Code on a Windows machine:
Step 1. Install Node.js
React Native requires Node.js to be installed on your computer.
You can download the latest version of Node.js from the official website (https://nodejs.org/) and follow the instructions to install it.
Now if you're on Windows we also need to add NodeJS to PATH in Environment Variables.
Some NodeJS installers will do this step for you, but it's still best to make sure. Lots of people complain about why basic things are not working, if this step is somehow overlooked.
Go to Start button and type "Environment Variables"
Hit Enter and on next screen, follow these steps:
How to find "Environment Variables" and change PATH variable
Just to round up, in order to add C:\nodejs to PATH variable follow these steps:
- Click on Start button and just start typing "environment variables"
- Hit enter and on next screen click "Environment Variables" button
- On next window go to second box below ("System Variables") and locate PATH variable
- Click on PATH variable to select it, and click "Edit..." button
- Click "Add" button and type C:\nodejs (or location where you actually installed Node)
- Click Ok button on each window as they close to confirm changes.
- That's it! You've just added NodeJS installation folder to PATH
Step 2. Install React Native CLI
Install the React Native command line interface (CLI): Open a terminal window and run the following command to install the React Native CLI:
npm install -g react-native-cli
Step 3. Install Visual Studio Code
If you don't already have Visual Studio Code installed on your machine, you can download it from the official website (https://code.visualstudio.com/).
Step 4. Install VSCode's "React Native Tools" and "Babel JS" Extensions
Here's a quick screenshot showing how to find React Native Tools in VSCode:
Open Visual Studio Code and click on the Extensions icon on the left sidebar.
How to install React Native Tools extension in Visual Studio Code
Search for "React Native Tools" and click on the "Install" button to install the extension.
Search for "Babel JS" in VSCode's extensions input box, and also install it:
How to install Babel JS extension in Visual Studio Code
Step 5. Create a new React Native project on command line (terminal)
Open Terminal in VSCode or a separate Command Line window and navigate to the location where you want to create your project.
Then run the following command to create a new React Native project:
react-native init MyProject
Replace "MyProject" with the name you want to give to your project. This will create a new folder with the same name as your project, containing all the files needed to run a React Native app.
Step 6: Open the project in Visual Studio Code
Open Visual Studio Code and click on "File > Open Folder" in the menu. Navigate to the folder where you created your project and select it. This will open the project in Visual Studio Code.
Step 7: Run your first React Native app in VSCode
Run the app: In Visual Studio Code, open the terminal window by clicking on "View > Terminal" in the menu. Navigate to the root of your project by running the following command:
Replace "MyProject" with the name of your project.
Then run the following command to start the React Native packager:
In a separate terminal window, run the following command to run the app on an Android emulator:
Alternatively, you can run the app on an iOS emulator by running the following command:
Now it should work! You now have a working React Native app running in Visual Studio Code.
Here is a list of unique Android emulator names that are available in Android Studio:
- Remix OS Player
Keywords you might be entering in search to find this setup guide:
- how to run a react native app in android studio
- run react native app in visual studio code
- how to run react native project in visual studio code
- how to run react native app in visual studio code mac
- how to run react native app from visual studio code
- command to run react native app in visual studio code
- how to run react native code in visual studio code
- how to install react native in visual studio code
- how to run react native app in visual studio
- how to run react native app in visual studio code
- how to run emulator in visual studio code react native
- how to run react native program in visual studio code
- how to run react native app in visual studio code on windows
- how to use react native in visual studio code
React Native is a popular framework for building mobile applications that work on both iOS and Android. This makes it easy to build the application once, and have it run on multiple platforms, but how do you set it up to run in VSCode editor?
Articles Related To Reactnative Community
Last 10 Articles Written On Ghost Together
- adad on 29 Feb 2024 by Myriad585
- test on 26 Feb 2024 by Await762
- مقاله کامل راهنمای کامل خرید و استفاده از کیف کمری و تاریخچه مزایا ومعایب انوا... on 23 Feb 2024 by Async667
- complaint about MPD dispenser at petrol pump not working on 23 Feb 2024 by Layout222
- new here, on 21 Feb 2024 by Rainbow726
- hello on 19 Feb 2024 by Bracket393
- GT COIN Draft on 14 Feb 2024 by A. Stranger
- Effective Techniques For Working With Filesystem Streams, Events And Common Objec... on 9 Feb 2024 by Ghost Together
- First Post on 8 Feb 2024 by Semicolon199.40131659899873
- The Top 10 Concerns About Donald Trump's Reelection on 6 Feb 2024 by Myriad429
Last 10 Reactnative Questions Asked On Ghost Overflow
- Ask your first Reactnative question! (Help us build the largest database of questions on any subject)