Steps to create and build first react native application in mac using vscode ide - arnabutilities/rbac-frontend GitHub Wiki

Creating and building your first React Native application on a Mac using Visual Studio Code (VS Code) involves several steps. Here's a comprehensive guide:

Step 1: Install Homebrew (if not already installed)

Homebrew is a package manager for macOS that simplifies the installation of software.

Open Terminal.

Run the following command to install Homebrew:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Step 2: Install Node.js and Watchman

Node.js is required to run the React Native command-line interface, and Watchman is a tool that watches files for changes.

Run the following commands in Terminal:

brew install node
brew install watchman

Step 3: Install the React Native CLI

The React Native CLI (Command Line Interface) is a tool for creating and managing React Native projects.

Run the following command in Terminal:
```
npm install -g react-native-cli
```

Step 4: Set Up Xcode

Xcode is required to build and run your React Native app on iOS.

Install Xcode from the Mac App Store.
Open Xcode and follow the instructions to complete the installation.
Install Xcode command line tools by running the following command in Terminal:
```
xcode-select --install
```

Step 5: Create a New React Native Project

Open Terminal.
Run the following command to create a new React Native project:
```
npx react-native init MyFirstApp
```
Replace "MyFirstApp" with your desired project name.

Step 6: Open the Project in VS Code

Open VS Code.
Navigate to File > Open and select the newly created project directory (MyFirstApp).

Step 7: Start the Metro Bundler

The Metro Bundler is a JavaScript bundler that ships with React Native and is used to manage the JavaScript code of your app.

In Terminal, navigate to your project directory:
```
cd MyFirstApp
```
Start the Metro Bundler:
```
npx react-native start
```

Step 8: Run the App on an iOS Simulator

Open a new Terminal window or tab.
Navigate to your project directory if you're not already there:
```
cd MyFirstApp
```
Run the app on an iOS simulator:
```
npx react-native run-ios
```

Step 9: Edit Your App in VS Code

In VS Code, open the App.js file located in the root of your project.
Make changes to the file and save them.
The Metro Bundler will detect the changes and automatically reload the app on the simulator.

Optional Step: Install Expo CLI (if you prefer Expo)

Expo is a framework and a platform for universal React applications. It offers a lot of tools and services that simplify the development process.

Run the following command to install Expo CLI globally:
```
npm install -g expo-cli
```
Create a new Expo project:
```
expo init MyFirstApp
```
Navigate to the project directory and start the development server:
```
cd MyFirstApp
expo start
```
Follow the on-screen instructions to open the app on an iOS simulator or a physical device using the Expo Go app.

Conclusion

By following these steps, you will have set up your development environment, created your first React Native project, and run it on an iOS simulator. You can now start building your app using the powerful tools and features provided by React Native and VS Code.