Installing React Native Windows | React Native

Installing React Native on Windows Tutorial

Seperti yang kita semua tahu bahwa pengembangan aplikasi Mobile baru-baru ini adalah pasar yang sangat besar dan semua orang menggunakan ponsel Android atau iOS mereka sendiri. Tetapi bagi perusahaan yang telah mengembangkan aplikasi Android dan iOS bersama-sama mendapatkan biaya yang sangat tinggi untuk pelanggan mereka, karena mereka harus mengembangkan aplikasi individual untuk setiap platform dan itu membuat biaya aplikasi mereka tinggi.


Jadi di sini kami datang dengan React Native. React Native adalah bahasa pengembangan aplikasi seluler yang sepenuhnya responsif yang memberi kita lingkungan pengkodean untuk mengkodekan dalam JavaScript, HTML dan CSS. Anda dapat menemukan lebih banyak tentang Bereaksi Bawaan di sini.

Dalam tutorial ini, kami akan menginstal, menjalankan, dan membuat proyek pertama pengembangan aplikasi Android menggunakan React Native pada mesin windows. Jadi ikuti saja langkah-langkah di bawah ini. Jika Anda suka tutorial saya, tolong bagikan dengan yang lain.

Langkah 1. Instal Perangkat Lunak yang Diperlukan:

Langkah pertama untuk menginstal React Native adalah Unduh dan Instal di bawah ini paket perangkat lunak yang diperlukan.

NodeJS: Unduh dan instal paket perangkat lunak penginstal mesin Windows NodeJS terbaru dari nodejs.org.

Python: Unduh dan instal paket penginstal windows Python terbaru dari Python.org.

Langkah 2. Instal React Native:

Setelah menginstal NodeJS kita dapat mengakses paket nmp melalui Command Line Interface (DOS) di windows. Jadi buka Command prompt ketik perintah di bawah ini untuk menginstal Bereaksi Asli

Langkah 3. Instal JDK (Java Development Kit)

Step 4. Install Android Studio + SDK Manager :

Download the Android Studio latest version from Google Android Developers official Page developer.android.com .

Step 5. Add Environment Variable ANDROID_HOME in Windows :

React Native required ANDROID_HOME variable to compile and run apps. So define the ANDROID_HOME variable.

1. Right Click on My Computer.
2. Goto Properties.
   
3. Click on Advanced System Settings. 
   
4. Click on Environment Variables.
   
5. Under System Variables click on New .
   
6. Set variable name as ANDROID_HOME and variable value as your SDK Manager’s Path.
   
7. Here you go now your ANDROID_HOME variable has been successfully set. 

6. Start Android Virtual Device (AVD) :

1. Android virtual device is used to see the test result of our coding inside a virtual android machine just like a real android mobile phone. To setup AVD Open Android Studio -> Tools -> Android -> AVD Manager.

2. Click on Create New Virtual Device.
3. Select your device.

4. Select Android OS version System Image.

5. Name the AVD and hit the Finish button.

6. After done creating AVD just hit the Run button to start the AVD.

Step 7. Create your first React Native project :

1. Once you have finish all the installing than Create a folder in your drive in which you will store your all React Native projects. Than start command prompt and goto that folder inside command prompt. You can use cd.. command to go back individually from folder to folder.
2. Now type react-native init FirstProject and press enter.

3. Now it will start downloading the React Native app support libraries from internet.

4. The final output will like below screenshot.

5. Now build the created app and run it into Android Emulator  using below command.

E:\>cd reactnativeprojects

E:\ReactNativeProjects>cd firstproject

E:\ReactNativeProjects\FirstProject>react-native run-android

6. If your project build successfully then you can see a message on your command prompt screen BUILD SUCCESSFUL .

E:\ReactNativeProjects\FirstProject>react-native run-android

Scanning 555 folders for symlinks in E:\ReactNativeProjects\FirstProject\node_mo

dules (134ms)

Starting JS server...

Building and installing the app on the device (cd android && gradlew.bat install

Debug)...

Download https://jcenter.bintray.com/com/facebook/react/react-native/0.42.3-atla

ssian-1/react-native-0.42.3-atlassian-1.pom

Incremental java compilation is an incubating feature.

:app:preBuild UP-TO-DATE

:app:preDebugBuild UP-TO-DATE

:app:checkDebugManifest

:app:preReleaseBuild UP-TO-DATE

:app:prepareComAndroidSupportAppcompatV72301Library

:app:prepareComAndroidSupportSupportV42301Library

:app:prepareComFacebookFbuiTextlayoutbuilderTextlayoutbuilder100Library

:app:prepareComFacebookFrescoDrawee101Library

:app:prepareComFacebookFrescoFbcore101Library

:app:prepareComFacebookFrescoFresco101Library

:app:prepareComFacebookFrescoImagepipeline101Library

:app:prepareComFacebookFrescoImagepipelineBase101Library

:app:prepareComFacebookFrescoImagepipelineOkhttp3101Library

:app:prepareComFacebookReactReactNative0442Library

:app:prepareComFacebookSoloaderSoloader010Library

:app:prepareOrgWebkitAndroidJscR174650Library

:app:prepareDebugDependencies

:app:compileDebugAidl

:app:compileDebugRenderscript

:app:generateDebugBuildConfig

:app:mergeDebugShaders

:app:compileDebugShaders

:app:generateDebugAssets

:app:mergeDebugAssets

:app:generateDebugResValues

:app:generateDebugResources

:app:mergeDebugResources

:app:bundleDebugJsAndAssets SKIPPED

:app:processDebugManifest

:app:processDebugResources

:app:generateDebugSources

:app:incrementalDebugJavaCompilationSafeguard

:app:compileDebugJavaWithJavac

:app:compileDebugJavaWithJavac - is not incremental (e.g. outputs have changed,

no previous execution, etc.).

:app:compileDebugNdk UP-TO-DATE

:app:compileDebugSources

:app:transformClassesWithDexForDebug

Running dex in-process requires build tools 23.0.2.

For faster builds update this project to use the latest build tools.

:app:mergeDebugJniLibFolders

:app:transformNative_libsWithMergeJniLibsForDebug

:app:processDebugJavaRes UP-TO-DATE

:app:transformResourcesWithMergeJavaResForDebug

:app:validateSigningDebug

:app:packageDebug

:app:assembleDebug

:app:installDebug

Installing APK 'app-debug.apk' on 'Marshmallow(AVD) - 6.0' for app:debug

Installed on 1 device.

<strong>BUILD SUCCESSFUL</strong>

Total time: 4 mins 53.489 secs

'adb' is not recognized as an internal or external command,

operable program or batch file.

Starting the app (E:\AndroidAppDevelopment\SDKManagerForAndroidStudio/platform-t

ools/adb shell am start -n com.firstproject/.MainActivity...

Starting: Intent { cmp=com.firstproject/.MainActivity }