React Native Setup Environment

Prerequisites

Before you begin, make sure your development environment includes Node.js? and an npm package manager.

 

Node.js

React requires a current, active LTS, or maintenance LTS version of Node.js. See the engines key for the specific version requirements in our package.json.

To check your version, run node -v in a terminal/console window.

To install Node.js, go to nodejs.org and download node.js and install on your operating system.

 

npm - Node Package Manager

The React Native CLI, and React apps depend on features and functionality provided by libraries that are available as npm packages. To download and install npm packages, you must have an npm package manager.

This setup guide uses the npm client command line interface, which is installed with Node.js by default.

To check that you have the npm client installed, run npm -v in a terminal/console window.

If You want to see how to install node. Click here

 

Step 1: Install the React Native EXPO-CLI

The Expo CLI to create React Native projects, generate application and library code, and perform a variety of ongoing development tasks such as testing, bundling, and deployment.

Install the Expo CLI globally.

To install the Expo CLI using npm, open a terminal/console window and enter the following command:

npm install -g expo-cli

 

Step 2: Create a workspace and initial application

You develop apps in the context of an React workspace.

To create a new workspace and initial starter app:

1) Run the CLI command expo init and provide the name my-app, as shown here:

expo init AwesomeProject

2) The expo init command prompts you for information about features to include in the initial app. Accept the defaults by pressing the Enter or Return key.

The Expo CLI installs the necessary React Native NPM packages and other dependencies. This can take a few minutes.

The CLI creates a new workspace and a simple Welcome app, ready to run.

3) Open your created app in any your favorite editor, you will find here file structure like this

In that file structure you have bucket of files like this

• TEMPLATESDEMO, This is your create app name.
• assets,This directory is used to store media files or external css, js files
• node_modules,This will store all your necessary library. Like when you install bootstrap 4 library using npm this will store the bootstrap library to use in our app
• App.js, This is main app component js file where your app will start from. You can create your own components we will see later.
• app.json, This will having configuration of your app. Like app name, where assets store, etc etc
• babel.conig.js, This is toolchain toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments.
• package-lock.json & package.json file will store all your necessary library information. And start , test app configuration.

 

Step 3: Run the application

The Expo CLI includes a server, so that you can easily build and serve your app locally and also you can share your app vai email and open to emulator.

Go to the workspace folder (my-app).

Launch the server by using the CLI command npm start

cd my-app
npm start

The npm start command launches the server, watches your files, and rebuilds the app as you make changes to those files.

This will compile your app and run your program