Writing
Article
AI
Art
Angular
Photoshop
Premiere
Animal Crossing
Blog
Story
Android
Android Studio
Davinci Resolve
CSS
Clipchamp
ChatGPT
Crypto
DALL-E
Discord
Davinci Resolve
Davinci Resolve 18
Dream Studio
Express
Filmora
Flutter
PC Games
Git
GPT
GPT3
GPT4
GTA
GTA 6
Ghost Together
Ghost Together
HTML
iOS
iMovie
Illustrator
JavaScript
Mac
Mongo
Midjourney
Minecraft
Node.js
NBA 2k24
OSX
PHP
Palworld
Python
Playground AI
Roblox
React
Recipe (Cooking)
React Native
Semicolon.dev
Starfield PC Game
Snapchat
Steam
Stable Diffusion
SVG
Threads
Text To Image (AI)
VSCode
Vim
Web Development
Windows
WebGL
React Tutorials

    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.

    viewed 45.5K times
    › react › how to run react native in vscode

    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.

    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.

    How to Add NodeJS to Environment Variables

    Go to Start button and type "Environment Variables"

    Hit Enter and on next screen, follow these steps:

    where is environment variable path on windows

    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:

    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.

    How to install React Native Tools extension in VSCode

    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 VSCode

    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:

    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?

    undefined / react native, install, run, vscode, react-native-cli, command line, terminal, windows

    Articles Related To Reactnative Community

      Last 10 Articles Written On Ghost Together

      Last 10 Reactnative Questions Asked On Ghost Overflow

      Write For Us
      Sign Up Now  -  It's Free!

      How To Setup React Native To Run in VSCode on Windows

      Comments (2) New! (You can now post comments on articles!)

      (By posting a comment you are registering a Ghost Together account.)
      Register
      Register
      Post It
      DM Coming Soon
      f f