React Native CLI explained for beginners
I know you guys are here not to read the long theory about React Native and its history but to get your hand dirty by doing some code. So let’s move directly to the React Native Step-by-Step program oriented tutorial. I hope you guys already know how to build a React Native application using EXPO.
Here I am going to use react-native-cli for initiating a project and further running it. In later tutorials I will cover other major topics in React Native that a beginner must know about.
I hope you have already installed node.js and npm. You can make it sure by the commands ‘node –v’ and ‘npm –v’.
1. Install react-native-cli
npm install –g react-native-cli
· This line installs the npm package react-native-cli along with its dependencies(from the npm repository host) inside the globally shared node_modules folder.
· Global install (with -g): puts stuff in /usr/local or wherever node is installed. This will also allow you to access the module from the command-line, as the bin is symlinked into a PATH folder (usually usr/local/bin).
· In Windows, you can find the package in %AppData%\npm.
· You can use npm list –g to list out all the globally installed packages and its dependencies.
2. Initiate the project
react-native init MyFirstRNTutorial
· It contains the actual React Native framework code and is installed locally into your project when you run
react-native init calls
npm install react-native, simply linking your local github clone into npm is not enough to test local changes.
· It will install all new react-native packages and create the project structure for us including iOS and android folders.
3. Running the project on Simulator/Emulator
· In windows, windows+R->appdata->Local->Android->sdk->emulator. Open this path in cmd and execute below command
· emulator -avd <name>
· To view available emulators: emulator –list-avds
· react-native run-android
· react-native run-ios — simulator=”iPhone X”
This run command will open a React Native packager/Server.
If you are working behind a proxy network, then you have to set up the npm for that. You have to run below 2 commands replaced with your data.
$ npm config set proxy http://<username>:<password>@<proxy-server-url>:<port>
$ npm config set https-proxy http://<username>:<password>@<proxy-server-url>:<port>
I hope you found this tutorial helpful! If you want step-by-step explanation of any React Native topic, please let me know in comments. And be sure to “clap” for this article so that others can find this and get benefit. Let’s begin together.