Cara Install React Native + Full Setup [2024]

Summary

This 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

00:00

🛠️ 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.

05:00

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

10:01

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

15:03

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

20:04

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

Keywords

💡React Native

React Native is a popular framework for building mobile applications using JavaScript and React. It allows developers to create native apps for Android and iOS platforms. In the video, the main theme revolves around installing and setting up React Native, which is a crucial step for developers looking to build cross-platform mobile apps.

💡Chocolatey

Chocolatey is a package manager for Windows that simplifies the installation of software. In the script, Chocolatey is recommended for installing Node.js and JDK, which are prerequisites for React Native development. The video demonstrates how to use Chocolatey to streamline the installation process, making it easier for developers to set up their development environment.

💡Node.js

Node.js is a JavaScript runtime that allows developers to run JavaScript code on the server side. It is essential for React Native development as it provides the necessary environment to run the React Native CLI. The script mentions installing Node.js using Chocolatey, highlighting its importance in setting up a React Native development environment.

💡JDK (Java Development Kit)

The Java Development Kit (JDK) is a software development environment that provides the tools and libraries needed to develop Java applications. In the context of React Native, the JDK is required for Android development. The video script guides viewers on how to install the JDK using Chocolatey, emphasizing its role in the setup process.

💡Android Studio

Android Studio is an integrated development environment (IDE) for Android app development. Although not directly used for React Native development, Android Studio provides the SDK and emulator necessary for testing Android apps built with React Native. The script explains how to download and install Android Studio, focusing on the SDK and emulator components.

💡SDK (Software Development Kit)

A Software Development Kit (SDK) is a set of software tools used to develop applications for a certain software platform. In the video, the Android SDK is mentioned as a component that needs to be installed through Android Studio. The SDK provides the necessary libraries and tools for building and testing Android applications.

💡Environment Variables

Environment variables are dynamic-named values in operating systems, like Windows, that can affect the way running processes behave on a computer. In the script, setting environment variables such as 'ANDROID_HOME' is crucial for configuring the development environment for React Native. The video demonstrates how to set these variables to ensure that the Android SDK and other tools are recognized by the system.

💡Windows Terminal

Windows Terminal is a modern terminal application for users of command-line tools and shells like Command Prompt, PowerShell, and WSL. The video script discusses installing Windows Terminal to provide a more user-friendly interface for command-line operations, which is beneficial for developers working with React Native and other command-line tools.

💡Git

Git is a version control system that allows developers to track changes in their code and collaborate with others. The script mentions installing Git, which is essential for managing code in a development project, especially when working with repositories hosted on platforms like GitHub.

💡Visual Studio Code

Visual Studio Code is a free, open-source code editor developed by Microsoft. It is widely used for coding in various programming languages and supports extensions that enhance its functionality. The video script includes instructions on installing Visual Studio Code and various extensions, highlighting its role as a primary tool for writing and editing code in a React Native project.

💡Extensions

Extensions in the context of Visual Studio Code are additional features or plugins that can be installed to enhance the editor's capabilities. The script discusses installing various extensions such as themes, icons, code formatters, and language support tools. These extensions help improve the coding experience and productivity of developers working with React Native.

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