Cara Install React Native + Full Setup [2024]
Summary
TLDRThis instructional video script guides viewers through the process of installing React Native for app development. It covers the initial setup, including the installation of Node.js, JDK, and the React Native CLI using Chocolatey, a package manager. The script proceeds to explain the installation of Android Studio, emphasizing the SDK and emulator setup. It also touches on configuring environment variables and installing essential tools like Windows Terminal, Git, GitHub, and Visual Studio Code with various extensions to enhance coding efficiency. The tutorial concludes with creating a new React Native project and running it on an Android emulator, providing a comprehensive start-to-end guide for beginners in mobile app development.
Takeaways
- 😀 Install React Native by visiting reactnative.dev and following the 'Get Started' guide.
- 🔧 Install Node.js and JDK as prerequisites using a package manager like Chocolatey for easier setup.
- 📥 Download and install Chocolatey by running commands in PowerShell as an administrator.
- 💻 Use Chocolatey to install Node.js LTS and Microsoft Open JDK 17 with simple command line instructions.
- 📱 Install Android Studio to access the SDK and emulator, which are necessary for Android app development.
- 🛠️ Configure environment variables for Android development by setting 'ANDROID_HOME' to the Android SDK path.
- 📝 Install Windows Terminal for an enhanced command line experience with better features and customization.
- 🔄 Download and install Git and GitHub Desktop for version control and collaboration.
- 💡 Install Visual Studio Code, a popular code editor, and configure it with necessary extensions for development.
- 🎨 Install themes, icons, and formatting extensions in Visual Studio Code to improve the coding experience.
- 🚀 Create a new React Native project using the 'npx react-native init' command in the command prompt.
Q & A
What is the first step in learning how to install React Native?
-The first step is to search for 'React Native' on Google and visit the official website at reactnative.dev.
Which section on the React Native website should you click to start the installation process?
-You should click on the 'Get Started' section and then select 'React Native CLI Quickstart'.
What are the prerequisites for installing React Native?
-The prerequisites include installing Node.js, JDK, and a package manager like Chocolatey.
Why is Chocolatey recommended for installing Node.js and JDK?
-Chocolatey simplifies the installation process by allowing you to install software with a single command in the Command Prompt, eliminating the need for manual downloads and installations.
How do you install Chocolatey on Windows?
-You can install Chocolatey by opening PowerShell as an administrator, pasting the installation command provided by the Chocolatey website, and pressing Enter.
What is the purpose of installing Android Studio?
-While not necessary for all React Native development, Android Studio is used to access the Android SDK and emulator, which are needed for testing Android apps.
How do you download and install Android Studio?
-Visit the Android Studio download page, select the appropriate version, and follow the installation prompts. After installation, you can download additional components like the SDK Platform and Build Tools through the SDK Manager.
Why is it important to set environment variables for Android development?
-Setting environment variables like 'ANDROID_HOME' helps the system recognize the location of the Android SDK, which is necessary for running Android-related commands and tools.
What is the benefit of using Windows Terminal over the traditional Command Prompt?
-Windows Terminal offers a more modern interface, better support for multiple tabs, and improved text rendering, making it a more user-friendly option for developers.
How do you install Git and GitHub Desktop?
-Download the Git installer from the official website, run the installer, and follow the prompts. For GitHub Desktop, download the installer and run it to complete the installation.
Why is Visual Studio Code recommended for React Native development?
-Visual Studio Code is a popular and versatile code editor developed by Microsoft, offering extensive support for React Native through extensions and a user-friendly interface.
What are some useful extensions for Visual Studio Code in React Native development?
-Some useful extensions include Atom One Dark theme, Material Icon Theme, Prettier for code formatting, Color Highlight, ES7 React/Redux/GraphQL snippets, and React Native Tools.
How do you create a new React Native project?
-Open the Command Prompt, navigate to the desired directory, and run the command 'npx react-native init <ProjectName>' to create a new project.
What is the role of the Android Virtual Device Manager in testing React Native apps?
-The Android Virtual Device Manager in Android Studio is used to create and manage emulators for testing Android apps, which is essential for React Native app development targeting Android devices.
Outlines
🛠️ Installing React Native and Prerequisites
This paragraph outlines the process of installing React Native, starting with a search for 'react native' on Google to find the official site. The instructions guide users to follow the 'Get Started' and 'React Native CLI Quick Start' for Windows and Android. It emphasizes the need to install Node.js and JDK first, recommending the use of a package manager called Chocolatey for an easier installation process. The paragraph details the steps to install Chocolatey, Node.js, and OpenJDK using command prompts and the advantages of using Chocolatey for automatic installations without manual downloads.
📱 Setting Up Android Studio and SDK
The second paragraph focuses on the installation of Android Studio, including downloading it from the official site and going through the installation process. It mentions that only the SDK and emulator are necessary for the React Native setup, not the full Android Studio IDE. The paragraph also covers the installation of SDK Platform 33 and SDK Build Tools 33 through the SDK Manager in Android Studio. It guides users on how to wait for the download and installation of required files for Android Studio and to accept the terms and conditions to proceed.
💻 Configuring Environment Variables and Installing Windows Terminal
This section explains how to configure environment variables for Android development, including setting the 'ANDROID_HOME' variable to the path of the Android SDK. It details the steps to add this variable through the system properties and how to verify the setup by opening the CMD and typing 'ADB'. The paragraph also introduces the installation of Windows Terminal as an enhanced command-line interface, guiding users through downloading, installing, and customizing the terminal settings for better visibility and usability.
🔧 Installing Git, GitHub Desktop, and Visual Studio Code
The fourth paragraph covers the installation of Git, GitHub Desktop, and Visual Studio Code. It provides a step-by-step guide for downloading and installing Git, including choosing the components during the installation process. The paragraph also touches on creating a GitHub account or signing in to an existing one through GitHub Desktop. Furthermore, it details the process of downloading and installing Visual Studio Code, a popular code editor by Microsoft, and adjusting its settings for better coding experience.
🎨 Customizing Visual Studio Code with Extensions
This paragraph discusses enhancing Visual Studio Code's functionality with various extensions. It starts with installing themes like 'Atom One Dark' to customize the editor's appearance. The paragraph continues with the installation of 'Material Icon' for improved file icon visibility. It then moves on to practical extensions such as 'Prettier' for code formatting, 'Color Highlight' for syntax highlighting, and 'Babel JavaScript' for improved JavaScript editing. Additionally, it mentions 'ES7 React/Redux/GraphQL/React-Native snippets' for便捷 code snippets, 'Excel Viewer' for opening Excel files within VS Code, and 'npm Intellisense' and 'Path Intellisense' for better code suggestions and autocompletion.
🚀 Creating a New React Native Project
The final paragraph guides users through creating a new React Native project using the command prompt. It explains the use of 'npx react-native init' to start a new project and how to name it. The paragraph addresses potential errors related to the 'npm' folder and provides a solution by creating a new 'npm' folder and running the command again. It also covers opening the project in Visual Studio Code and running the project on an Android emulator using 'npx react-native run-android'. The paragraph concludes with instructions on launching the emulator manually through Android Studio and observing the project running successfully on the emulator.
Mindmap
Keywords
💡React Native
💡Chocolatey
💡Node.js
💡JDK (Java Development Kit)
💡Android Studio
💡SDK (Software Development Kit)
💡Environment Variables
💡Windows Terminal
💡Git
💡Visual Studio Code
💡Extensions
Highlights
Introduction to installing React Native by searching on Google and visiting reactnative.dev.
Selecting the 'Get started' and 'React Native CLI Quickstart' options for installation.
Automatic selection of Windows and Android for the installation process.
Installing Node.js and JDK as prerequisites for React Native using a package manager.
Using Chocolatey, a package manager, to simplify the installation process.
Instructions on how to install Chocolatey via Command Prompt.
Using Chocolatey to install Node.js LTS and Microsoft Open JDK 17.
Alternative manual installation methods for Node.js LTS and JDK if Chocolatey is not available.
Installing Android Studio and using only the SDK and emulator.
Downloading and installing Android Studio Hedgehog from the official site.
Configuring the Android SDK with SDK platform 33 and SDK build tools 33.
Setting up environment variables for Android development.
Installation of Windows Terminal for an improved command line experience.
Downloading and installing Git and GitHub Desktop.
Installation of Visual Studio Code and its extensions for coding.
Installing themes, icons, and formatting extensions in Visual Studio Code.
Using extensions like Prettier, Color Highlight, and BBEdit to enhance coding efficiency.
Installation of React Native Tools and other useful extensions for React Native development.
Creating a new React Native project using the command line.
Running the React Native project on an Android emulator.
Transcripts
baik pada video kali ini kita akan
belajar tentang bagaimana caranya untuk
menginstal react native kita cari
terlebih dahulu di Google react native
nanti akan muncul sebuah situs yang
namanya
reactnative.dap silakan pilih yang ini
kita Klik di bagian get started setelah
itu klik yang react native CLI quick
start nah ini otomatis terpilih ya kalau
kita pakai Windows maka di sini otomatis
terpilih Windows dan di sini otomatis
Android Oke jadi untuk instal reactnyap
kita harus instal terlebih dahulu note
JS dan JDK cara yang direkomendasikan
oleh R native untuk menginstalnya kita
bisa
menggunakan sebuah package Manager
namanya chocolate chocolate itu apa Jadi
tinggal diklik kanan buka link D baru
yang ini chocola itu adalah bisa
dibangin seperti seperti ini Jadi
biasanya teman-teman itu kan kalau
download software atau aplikasi itu kan
di-download Dul software-nya bentuk XE
atau MSI nanti Diklik dua kali baru klik
next next next dengan menggunakan
cokolate ini kita enggak perlu lakuin
hal tersebut cukup jalanin sebuah komen
dari comand Prom langsung bisa terinstal
Aplikasinya tanpa kita next next lagi
cara instalnya itu cukup mudah Scroll ke
bawah sini ini yang ini kita Klik yang
ini copy ini klik kemudian cari di sini
power Cell ini klik Run S
administrator pilih yes kemudian Klik
Kanan di sini maka dia itu akan ke paste
tulisannya seperti ini lalu di-enter
kita akan tunggu sampai prosesnya
selesai Oke kalau sudah muncul seperti
ini maka kita sudah berhasil untuk
menginstal cocolate-nya kita close power
cell-nya kemudian ini kita close lagi
Kemudian ini kita close juga Setelah itu
kita bisa menggunakan sebuah komen
namanya choko di CMD atau komand Prom
Jadi ini akan menginstal sebuah aplikasi
namanya node jslts dan Microsoft Open
JDK 17 cukup kita klik copy aja ini
Setelah itu kita cari CMD kita klik Run
as admin di sini kemudian ini pilih yes
kemudian pas tekan di sini nah nah kayak
begini di-enter nanti dia itu bakal
instal dua software ini buat teman-teman
yang misalnya enggak bisa instal
chocolate bisa download manual
software-nya cukup cari nama
software-nya di Google misal node jslts
di-download diinstal seperti biasa itu
pun bisa tapi cara yang direkomendasikan
adalah kita instal itu pakai choko ini
kalau kita sudah instal pakai choko
enggak perlu lagi kita download manual
Nanti nantinya jadi itu adalah
keunggulannya kalau misal di masa depan
ini ada perubahan cukup ikutin aja ya
misal instal chokonya lalu tinggal
dicopy aja ini sintx yang ada di sini
dan itu bakalan berhasil instalnya Oke
ini udah berhasil instalnya Setelah itu
kita bisa close ini Oke kita sudah
berhasil untuk menginstal chocolate note
JS dan Open jdk-nya jadi pada video
berikutnya kita akan menginstal sebuah
aplikasi namanya Android studio enggak
usah khawatir kita enggak pakai Android
studionya itu langsung kita hanya
menggunakan SDK dan emulatornya saja
jadi buat teman-teman yang punya PC yang
spesifikasinya itu tidak terlalu tinggi
enggak usah
khawatir pada video kali ini kita akan
belajar tentang bagaimana caranya untuk
menginstal Android studio jadi tinggal
ini dekatkan kursornya ke sini lalu Klik
Kanan buka link di Tab baru kita akan
diarahkan ke sebuah halaman untuk
download Android studionya Nah seperti
ini klik download Android studio
Hedgehog kita Scroll ke bawah kayak
begitu klik ini lalu download ini nanti
dia itu akan men-download Android studio
oke di sini kita bisa tunggu dulu proses
download-nya sampai selesai Oke kalau
tampilannya udah seperti ini berarti
proses download-nya itu itu sudah
selesai tinggal diklik aja kita tunggu
sampai installernya itu muncul Nah di
sini kita pilih yes silakan pilih next
next next install Oke Setelah itu kita
pilih next lalu kita finish kemudian ini
do not import Oke ini bisa pilih send
atau don't bebas ya Oke kalau udah
muncul seperti ini kita pilih next lalu
kita pilih yang stand
next ini klik dulu baru pilih except ini
klik lagi pilih except ini diklik pilih
accept kemudian difinish di sini Android
studio akan m-download beberapa file
yang dibutuhkan untuk instalasi Android
studionya jadi kita tunggu dulu sebentar
sampai prosesnya
selesai ini kita pilih
yes ini pilih yes lagi oke tinggal
difinish aja Setelah itu kita close yang
ini ya di chrome-nya Nah setelah itu
kita bakalan instal SDK platform 33 dan
SDK buil tools 33 yang ini caranya itu
gimana Jadi caranya itu kita buka
Android studionya yang ini klik more
action klik SDK Manager Setelah itu kita
pilih yang nomor 33 ini tiramisu Setelah
itu kita klik SDK tools kita klik show
package detail kita pilih yang tiga-tiga
ini di masa depan ini bakalan mungkin
sedikit berubah ya Jadi teman-teman
silakan disesuaikan lagi setelah itu
sesuai versi yang ada di sini nah ini
kelihatan nah yang ini Oke Setelah itu
kita apply baru dioke setelah itu
silakan
difinish lalu ini tinggal kita oke aja
oke terakhir kita kita
bisa close dulu ya aplikasinya Oke kita
sudah berhasil untuk menginstal Android
studio baik pada video kali ini kita
akan
mengkonfigurasi namanya environment
variableel caranya itu gimana Jadi
caranya itu silakan Klik di sini cari
environment variabel nah yang ini klik
ini Klik yang ini Setelah itu kita klik
new di sini Nah di variabel name-nya
kita akan beri nama Android home nah
seperti ini untuk value-nya ini setiap
laptop atau PC itu berbeda-beda ya jadi
caranya mengisi itu cukup ini copy aja
dicopy lalu kita Buka Explorer Klik di
sini lalu kita pas tekan pakai ctrl V
nah kayak begitu di enter maka di sini
akan muncul kayak begini nah ini kita
klik lagi kita copy kita copy yang ini
lalu kita pastekan di bawahnya nah ini
di PC saya namanya itu adalah C user
gusnando app data local Android SDK
dioke kemudian di sini kita pilih new
lagi di bawahnya pas tekan value-nya
dulu kita akan beri nama sama ya
Android home kayak begitu oke nah
sekarang kita akan ini Ya kita akan
menambahkan platform toolsnya juga sama
seperti tadi tinggal kita copy aja lalu
dipastekan di sini kayak begitu Nah di
sini tinggal kita copy aja
copy lalu di sini kita cari namanya ini
pet klik dua kali new pas tekan oke oke
di sini juga pet new pas Tekan lalu oke
oke Ini dioke lagi Oke sip ini kita
sudah berhasil untuk setting environment
variabelnya untuk memastikan Apakah kita
sudah berhasil atau tidak caranya itu
caranya itu cukup gampang kita buka CMD
di sini ketik ADB kalau teman-teman
muncul seperti ini seperti yang saya
seperti tampilan yang ada di sini maka
dia itu sudah berhasil untuk kita
nambahin ke environment variabelnya
Oke pada video kali ini kita akan
belajar tentang bagaimana caranya untuk
menginstal namanya Windows terminal
jadi kalau kita buka CMD di sini
tampilannya itu masih bawaan dari
cmd-nya seperti ini ini enggak masalah
digunakan Tetapi saya lebih suka
menggunakan namanya Windows terminal
jadi kita bisa cari di sini Windows
Terminal Nah di sini ada ya muncul
Windows Terminal ini silakan teman-teman
unduh terlebih dahulu kita buka ini lalu
dia itu akan men-download aplikasinya
seperti
ini nah Nah ini Udah muncul ya Windows
terminalnya seperti ini jadi kita sudah
berhasil untuk menginstalnya keunggulan
dari Windows Terminal ini kalau misal
ada emoticon kayak begini dia itu akan
muncul di terminalnya jadi kita bisa
lihat lebih mudah gitu dan di sini kita
bisa tambah-tambahin Banyak tab
sekaligus jadinya kita bisa membantu
jadinya bisa membantu proses kita coding
nantinya dan di sini kita untuk
settingnya klik open setting di sini
kalau misal teman-teman belum muncul
tampilan seperti ini teman-teman bisa
update terlebih dahulu Windows
teman-teman agar muncul tampilan seperti
ini karena saya sempat dulu nyoba di
Windows yang lama dia itu enggak muncul
tampilannya yang ini padahal ini itu
penting banget kita klik open setting
untuk update windows-nya itu pakai gini
ya pakai Windows Update aja nanti dia
itu akan ngupdate sendiri setelah itu
untuk default profile-nya Saya akan
menggunakan C MD aja di sini jadi saya
enggak gunakan power Cell defult
Terminal application kita bakalan
memilih di sini Windows Terminal dan di
sini tinggal di-save aja ini tinggal
di-save lalu kita tinggal close aja ini
Oke untuk membesarkan pontnya
teman-teman bisa menggunakan ctrol plus
gini ya ctrol plus kayak begitu maka
pontnya di sini akan jadi lebih besar
jadi lebih mudah untuk dilihat nah
kemudian kita bisa menambahkan di sini
ini baru seperti itu ya Nah kayak begini
kita bisa juga Sama ya besarin kayak
begini supaya bisa lebih mudah untuk
melihatnya kalau teman-teman suka yang
kecil enggak masalah ini lebih ke
suka-suka kita gitu kemudian kita kalau
udah seperti ini close aja dulu close
untuk ngeceknya Apakah ini udah berhasil
di-setting klik ini ketik CMD kita buka
kalau yang muncul udah Windows Terminal
seperti ini maka selamat teman-teman
berhasil untuk menginstal Windows
Terminal pada video kali ini kita akan
belajar tentang bagaimana caranya untuk
menginstal Git dan github jadi kita bisa
download terlebih dahulu Git Di sini
kita download terlebih dahulu kemudian
kita klik yang Windows ini kita Klik di
sini Setelah itu kita klik aja
ini ini pilih yes next next next next
ini saya pakai Visual Studio code next
next next next next next next next next
lagi next next Oke kalau misal sudah
selesai kita bisa finish aja di sini
satu lagi kita harus instal namanya
kitub
desktop yang ini kita terlebih dahulu
kita
Oke kalau sudah muncul seperti ini
teman-teman bisa buat akun github baru
atau sign
in nah ini udah selesai tinggal diclose
aja ini juga
diclose oke pada video kali ini kita
akan belajar tentang bagaimana caranya
untuk menginstal Visual Studio code
silakan terlebih dahulu close dulu yang
ini kita plus di sini cari Visual Studio
code Visual Studio code adalah sebuah
aplikasi buatan Microsoft yang digunakan
untuk menulis kode jadi Visual Studio
code ini akan membantu kita untuk
menulis kode klik ini download kita
tunggu dulu klik ini ini kita accept
next next next ini create aja instal
jadi teman-teman bisa menggunakan editor
yang lain ya jadi code editor itu ada
banyak sekali ada misal studio code ada
atom ada sublim Tex dan lain-lain tetapi
yang kita gunakan di kelas online ini
adalah Visual Studio code karena Visual
Studio code ini banyak sekali digunakan
dan biasanya kalau orang ngeng itu
langsung pakai Visual Studio code
sebagian besarnya klik finish di sini
oke kalau sudah muncul seperti ini kita
bisa perbesar terlebih dahulu jadi saya
akan perbesar tampilannya dulu ya
pakaitrol plus kayak begitu
kemudian kita Klik di bagian sini ini
done aja Mark done close saja Klik di
sini ada namanya extension extension
adalah kumpulan plugin yang bisa kita
gunakan untuk meningkatkan code editor
kita agar lebih canggih kita akan
belajar cara instalnya di video
selanjutnya baik pada video kali ini
kita akan menginstal namanya extension
jadi kita akan instal beberapa apa yang
pertama kita akan instal tema jadi saya
akan menggunakan tema yang baru untuk di
Visual Studio code yang ini saya akan
instal sebuah tema namanya atom one Duck
yang ini klik lalu klik instal nanti
akan berubah jadi seperti ini jadi kita
akan pilih atom one Duck di sini yang
kedua adalah kita akan instal sebuah ion
Kita akan menggunakan icon material
Icon team ini material icon team Jadi
ini akan menambahkan icon di samping
nama file kita kita klik
install pilih material icon oke udah
selesai kemudian kita akan instal
extension
lain yang pertama adalah pretier
pretiier Ini adalah sebuah extension
yang digunakan untuk memformat kode kita
supaya rapi jadi kita akan instal
Kemudian untuk setting-nya kita bisa
pilih file Kemudian
preference Kemudian setting kita akan
cari di sini format
onsap nah ini silakan Ini dicentang jadi
ketika kita menekan shift atau Ctrl S
nantinya maka kode yang kita buat akan
otomatis terformat nanti kita akan coba
pada video kali ini kita akan
instal-instal terlebih dahulu
extension-nya
kemudian kita akan
menginstal color
highlight digunakan untuk memberi warna
kode warna jadi kalau kita punya kode
warna seperti ini maka dia itu otomatis
ada warnanya misal Oh ini kode warnanya
itu 6699 cc maka dia itu akan jadi warna
biru biru kelihatannya Jadi kita itu
bisa dengan mudah melihat Warna apa sih
kode warna ini kemudian kita akan instal
bbel ja ript yang
ini kemudian kita akan instal
es7 yang ini is7 react redux grabql yang
ini snipet jadi ini itu kegunaannya
adalah untuk kalau kita misal ngetik ini
IMP nanti di keyboard dan tekan Tab atau
enter maka akan berubah menjadi kode ini
kalau kita ketik ini maka akan berubah
menjadi kode ini supaya kita itu bisa
lebih cepat untuk menulis kode yang
biasa digunakan Setelah itu kita akan
menginstal juga
Excel
viewer JAdi misal di masa depan
teman-teman itu berurusan dengan file
Excel kita itu kan biasanya buka pakai
aplikasi Microsoft Excel atau bisa pakai
spreintsheet nah dengan menggunakan
extension ini kita bisa buka file Excel
di Visual Studio code-nya jadi
seperti ini ya Jadi kalau kita buka
excel-nya nanti akan muncul
tabel-tabelnya langsung nah kayak begini
kemudian kita akan instal namanya NPM
intelisens yang ini jadi ketika kita
mengimpor sesuatu dari node module maka
akan mendapatkan suggestion seperti ini
jadi memudahkan kita dalam proses import
satu lagi ada yang mirip juga namanya
pet intellisence
[Musik]
ini memudahkan kita untuk autoomete file
name seperti ini kemudian kita akan
instal namanya react native tools jadi
react native tools ini dibuat oleh
Microsoft langsung extensionnya ini kita
instal jadi ini adalah seperangkat tools
yang membantu kita untuk ini ya untuk
buat aplikasi dengan menggunakan rea
native ini kita done aja kemudian kita
akan cari lagi yakni tip snipet gitu
yang ini yang ini ya diinstal sama
seperti yang snipet yang tadi kita
instal ini kalau kita ngetik mrrc maka
akan berubah menjadi import react
komponen seperti ini dan yang lain-lain
juga ada kemudian kita akan instal
juga
simpel react snipet yang ini diinstall
kemudian kita akan instal namanya image
preview yang ini jadi digunakan untuk
kalau kita ini ya kalau kita membuat
kode dan kita menggunakan impimport
gambar gitu ya nanti akan muncul gambar
kita itu seperti apa di sini dan kalau
kita dekatin kursornya ke sini Maka akan
muncul preview dari foto atau gambarnya
oke extension-nya itu aja dulu jadi pada
video berikutnya kita akan belajar
tentang bagaimana caranya untuk
Bagaimana caranya untuk membuat Project
react native baru kita bisa close aja
dulu di sini ini diclose aja
[Musik]
dulu baik pada video kali ini kita akan
belajar tentang bagaimana caranya untuk
membuat Project baru jadi kita akan buka
comand Prom di sini seperti ini ya perlu
diperhatikan ini ada namanya pad-nya
jadi tempat di mana kita itu akan
membuat proeknya saya akan membuat
proeknya itu di C user Gus ini untuk
buka
explorernya kita bisa pakai start titik
g Nah kita akan buat projectnya itu di
sini buat teman-teman yang pengin buat
di tempat lain itu enggak masalah tapi
kita akan buat dulu di sini dulu ya
nanti kita akan belajar caranya gimana
ini kita akan ketikkan
npx react native kemudian
Init kemudian kita akan beri nama nama
projectnya misal
Project pertama gitu maka di sini akan
membuat sebuah folder namanya Project
pertama di sini nah kalau misal ada
error seperti ini ini dicopy aja ya
sampai sini ini copy Klik Kanan dieleksi
dulu Klik Kanan Baru pas tekan di sini
ini terjadi karena folder npm-nya itu
enggak ada gitu biasanya sih enggak
muncul error seperti ini caranya itu
cukup mudah untuk mengatasi kita buat
folder baru beri nama NPM kemudian kita
tekan tanda atas di keyboard maka
sintaks yang sebelumnya itu akan muncul
seperti ini Lalu di enter Nah ini
tinggal y enter nanti dia itu akan
membuat Project baru di sini di gusnando
ini kalau ah muncul seperti ini kita
akan pindahkan directorynya ke project
pertama kayak begitu kemudian kita
bakalan buka terlebih dahulu projectnya
di P studio code pakai code T gitu
kemudian ini tinggal dicentang aja Yes
kemudian di sini untuk menyalakkan
projectnya kita bisa menggunakan
npx rea native Run Android kayak begitu
nah Biasanya kalau kita jalan perintah
ini dia itu langsung membuka emulator
Android tetapi untuk jaga-jaga kita bisa
buka manual aja buka Android studio
kemudian teman-teman cari di sini ada
namanya Android virtual device manager
nah ini kalau misal belum ada di sini
bisa pilih Tanda plus di sini silakan
buat sendiri ya misal Oh mau yang pixal
7 mau yang smartphone bebas jadi saya
akan pakai yang ini yang udah ada klik
play ini nanti dia itu akan menjalankan
emulatornya ini di allow aja Kemudian
untuk device manager ini bisa diminimiz
aja enggak masalah kita akan tunggu
sampai emulator ini itu muncul
tampilannya jadi dia itu masih ngidupin
emulatornya jadi agak lama untuk pertama
kalinya untuk kedua ketiga kalinya itu
lebih cepat oke di sini sudah muncul ya
emulatornya tinggal kita jalanin aja ini
komennya ini di allow aja kayak begitu
Nah di sini dia itu masih download ya
file-file yang dibutuhkan untuk jalankan
projectnya Ini pertama kali emang
seperti ini ya Jadi kita akan tunggu
terlebih dahulu untuk yang kalau misal
sudah kedua ketiga kali itu enggak perlu
lagi nunggu seperti ini dia itu langsung
jalan projectnya baik kalau sudah muncul
seperti ini maka kita sudah berhasil
untuk menjalankan proeknya
Weitere ähnliche Videos ansehen
Getting Started with React Native: Install Node.js, Create Your First App, and Pair with Expo Go
ANDROID com KOTLIN 2023 - #01 - Instalação e Primeira App
Creating Flutter Project
BELAJAR FLUTTER DARI NOL - SECTION 1 - 01 Introduction
Getting Started | Mastering React: An In-Depth Zero to Hero Video Series
How To Install & Setup Android SDK In Termux / Build Java Or Kotlin Projects
5.0 / 5 (0 votes)