Share and Learn To Write Code!

Programming articles, which help you to build your application. If something you are stuck to code and complete the program, just find here your question-related articles.

Share with   

React Native Installation On Windows Operating System Using Expo CLI

Getting started with react native mobile app development for the Windows operating system. Here we going to install react native using Expo CLI to start mobile app development.
react   react native   android   ios   cross platform  

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 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


0replies
Leave a reply
47
Registerd Users
89
Total Subscribers
59
Total Articles
52633
Total Views