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:

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.

This is what enables VSCode (or your computer in general) to run JavaScript from command line.

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.

Hit Enter and on next screen, follow these steps:

Just to round up, in order to add C:\nodejs to PATH variable follow these steps:

1. Click on Start button and just start typing "environment variables"
2. Hit enter and on next screen click "Environment Variables" button
3. On next window go to second box below ("System Variables") and locate PATH variable
4. Click on PATH variable to select it, and click "Edit..." button
5. Click "Add" button and type C:\nodejs (or location where you actually installed Node)
6. Click Ok button on each window as they close to confirm changes.
7. 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.

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:

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:

cd MyProject

Replace "MyProject" with the name of your project.

Then run the following command to start the React Native packager:

react-native start

In a separate terminal window, run the following command to run the app on an Android emulator:

react-native run-android

Alternatively, you can run the app on an iOS emulator by running the following command:

react-native run-ios

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:

1. Genymotion
2. BlueStacks
3. Nox
4. MEmu
5. LDPlayer
6. Andy
7. Remix OS Player

Keywords you might be entering in search to find this setup guide:

1. how to run a react native app in android studio
2. run react native app in visual studio code
3. how to run react native project in visual studio code
4. how to run react native app in visual studio code mac
5. how to run react native app from visual studio code
6. command to run react native app in visual studio code
7. how to run react native code in visual studio code
8. how to install react native in visual studio code
9. how to run react native app in visual studio
10. how to run react native app in visual studio code
11. how to run emulator in visual studio code react native
12. how to run react native program in visual studio code
13. how to run react native app in visual studio code on windows
14. 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?