React Native установка, настройка инструментария и первый запуск
Доброе время суток, друзья! В этой статье я бы хотел поделиться опытом создания и настройки своего первого приложения на React Native. Зачем вообще может понадобиться React Native, мне кажется объяснять не стоит, но все же хотелось бы сказать пару слов, зачем это понадобилось мне.
В процессе работы у меня появилась вынужденная необходимость создания несложного мобильного приложения, и, с учетом того, что я все время занимаюсь разработкой приложений и сайтов в сети интернет и использую в своей работе, как правило, PHP и Javascript, то создание мобильного приложения для смартфона, да еще к тому же сразу для двух платформ: IOS и Android, для меня показалось сомнительной, хоть и интересной задачей. И, как не удивительно, React Native в моем случае показался единственным реальным и рабочим инструментом, который к тому же осуществляет поддержку достаточно большого количества мобильных устройств. Заявленная поддержка – это Android 4.1 (API 16) и >= iOS 8.0. А это порядка 98% пользователей Android и более 90% пользователей IOS.
Что потребуется для установки React Native, запуска и работы с приложением?
К счастью, запуск и настройка инструментария для создания своего приложения достаточно просты. Все что, потребуется – это скачать приложение для вашего телефона, которое называется Expo, редактор кода и терминал. Данное приложение доступно в Google Play и App Store для скачивания. Если вы не хотите устанавливать данное приложение на ваш телефон, то вы также можете зарегистрироваться на сайте expo.io, где у вас будет возможность разрабатывать ваше приложение через ваш браузер.
Сразу хочу сказать, что когда я скачал данное приложение для IPhone, то для его запуска потребовалось добавить проект в «мои проекты» на expo.io. На Android все было проще, поскольку было достаточно просканировать QR код, который любезно сгенерировала мне утилита create-react-native-app.
Важно: требуется понимать, что у вас должен быть установлен node.js на вашем компьютере и npm.
Наши дальнейшие действия таковы:
- 1 — заходим в терминал и устанавливаем create-react-native-app глобально, если он не установлен, командой: npm install -g create-react-native-app
- 2 — затем создаем проект вводом команды: create-react-native-app MyApp
- 3 — переходим в папку проекта: cd MyApp
- 4 — запускаем проект: npm start
Примерный результат запуска приложения на вашем устройстве (рис.1)
Рис.1 
Все готово. Теперь можно сгенерировать QR код для вашего телефона, просканировать его и можно писать нативное приложение на Javascript для ваших мобильных устройств.
Install React Native On Windows
Prasad Jivane
Apr 3, 2019 · 3 min read
Hello All, Here is the fastest and easiest way to set up a react native on the Windows machine. This will help you to install react-native on windows 10.
Step 1:- Install Visual Studio Code.
Visual Studio Code — Code Editing. Redefined
Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud…
code.visualstudio.com
Step 2:- Install Node.
Node.js
Node.js® is a JavaScript runtime built on Chrome’s V8 JavaScript engine.
nodejs.org
Step 3:- Install JDK8.
Java SE Development Kit 8 — Downloads
Download JDK 8, a development environment for building applications and components using the Java programming language.
www.oracle.com
Step 4:- Install Python 2.7.16.
Python Release Python 2.7.16
The official home of the Python Programming Language
www.python.org
Step 5:- Install Android Studio, SDK and AVD Setup as follows.
Download Android Studio and SDK tools
Download the official Android IDE and developer tools to build apps for Android phones, tablets, wearables, TVs, and…
developer.android.com
Make sure to install the latest SDK with the default setting and also check the project structure JDK location should be provided. For reference check snaps.
Step 6:- Open t h e terminal either in visual studio code or cmd prompt and type
> react-native init prasad
This will create the ready to use project folder structure with all the necessary packages installed.
Open the folder in visual studio code and type npm install.
Install React-Native CLI from terminal >npm install -g react-native-cli
The easiest way to run a react-native app is by connecting your mobile phone with USB to the system (Start developer option on and USB debugging on).
Go to terminal and type > adb devices it will list the device connected.
If there is an error in listing the devices go to Control Panel > System and Security > System click on Advance System Setting > Environment Variable > System Variable > Edit > New
Add the path i.e C:\Users\username\AppData\Local\Android\Sdk\platform-tools and click ok.
Step 7:- Set the ANDROID_HOME and JAVA_HOME path go to Control Panel > System and Security > System click on Advance System Setting > Environment Variable > User Variable > New
Step 8:- Go to terminal type >react-native run-android
All Done …!! You will get the following output screen on your mobile phone.
Hope you like this feel free to comment if you are facing any issues while setting up a development environment for react-native with windows.
You can also run the app for ios with >react-native run-ios (with Xcode).
🚀Getting started with React Native on Windows 7, 8,10 💻🔖🔥
✍ This article is about how to install React Native Configure with Android Studio on Windows Machine 💻Guide.
Ashraf Hatia
Nov 20, 2019 · 4 min read
1. Download and install Android Studio.
2. Create an Android Virtual Device.
3. Set up the environment variable.
5. Install React-native.
6. Change in root App.js file.
1. Download and install Android Studio
▶ Download the android studio from this link .🔖
↪ Install android studio,
↪Also, install java on your machine.
2. C reate an Android Virtual Device ( A.V.D. ) 📱
For open the AVD Manager :
- Select Tools > AVD Manager.
- 🖱Click AVD Manager in the toolbar.
↪ Click here for more information about AVD installation
3. Set up the environment variable :
📝 note : if u already setup java environment variable ignore this step.
Go to:↪ 💻 Control Panel\System and Security\System
↪ 💻🖱Click on Advanced System Settings
Then ↪ Advanced System Settings → Environment variables → New, then enter the path to your Android SDK.
➡ Click on New User variable
Variable Value : C:\Users\user\AppData\Local\Android\Sdk
Note: in value enter the path to your Android SDK. you can get/copy from your SDK manager of Android Studio.
4. Install Node.JS on you machine 💻
↪🔖Click here to download Node.js
Chec k NodeJS is installed properly or not
⏩ Run node -v , npm -v command on command prompt.
💬 If your screen show results as above you install node successfully, if not then re-install node.
5. Install React-native
- Create the React native Project
- To create a project by running the below command in the terminal from the folder 📂 where you want to create the application.
- ⏩ Next, run the command to start package, BUT make sure you started the emulator.
📝 Note: This start command run in different prompt like Git-bash or cmd
Run in a different prompt like first you open your app directory in visual studio and then react-native run-android command at the same time start cmd need to still run in different prompts like Git bash or cmd.
📝 extra note: by time you may get error of Invalid regular expression❗
✅ solution: It appears in your project directory folder \node_modules\metro-config\src\defaults\blacklist.js there is an invalid regular expression that needed to be changed. change the first expression under sharedBlacklist from:
▶🔖You can also refer to this link for this error solution video tutorial.