To set up React Native in Visual Studio Code (VS Code), you'll need to follow a series of steps that involve installing Node.js, the React Native CLI, Android Studio (for Android development), and VS Code itself.
Step 1: Install Node.js and npm
Download Node.js
Go to the Node.js official website.
Download the LTS version for your operating system and install it.
Verify installation:
Open a terminal or command prompt.
Run node -v to check the Node.js version.
Run npm -v to check the npm version.
Step 2: Install React Native CLI
Open a terminal or command prompt.
Run npm install -g react-native-cli
Step 3: Install and Set Up Visual Studio Code
Download and install VS Code:
Go to the Visual Studio Code official website.
Download and install VS Code.
Install React Native Tools extension:
Open VS Code.
Go to the Extensions view by clicking the Extensions icon in the Activity Bar on the side of the window or by pressing Ctrl+Shift+X.
Search for "React Native Tools" and install it.
Step 4: Create a New React Native Project
Open a terminal or command prompt:
Navigate to the directory where you want to create your project.
Run npx react-native init MyNewProject.
Step 5: Open the Project in VS Code
Open VS Code:
Click on File > Open Folder.
Navigate to your newly created React Native project folder (MyNewProject) and open it.
Step:6 Run the React Native Application
Start Metro Bundler:
Open a terminal in VS Code (you can use the integrated terminal with Ctrl+` ).
Navigate to your project folder if not already there.
Run npx react-native start.
Step:7 Run the application on an emulator or a physical device:
For Android:
Open a new terminal in VS Code.
Run npx react-native run-android.
For iOS (macOS only):
Open a new terminal in VS Code.
Run npx react-native run-ios.
Step :8 Debugging React Native in VS Code
Set up debugging configuration:
Open the Debug view by clicking the Debug icon in the Activity Bar or by pressing Ctrl+Shift+D.
Click on the gear icon to open the launch.json file.
Start debugging:
Set breakpoints in your code.
Select the desired debug configuration (e.g., Debug Android) and click the play button.