[Sharing] Aplikasi dan Tools yang saya gunakan untuk development React Native (Update 2018)

Aisy Muhammad Rozsidhy
Aisy Rozsidhy
Published in
5 min readMar 5, 2018

Kebutuhan adalah hal yang dipenuhi, namun setiap orang memiliki kebutuhan yang berbeda-beda terutama kebutuhan untuk mengembangkan aplikasi, Nah mumpung lagi free time, saya akan mengulas tools dan kebutuhan saya yang saya gunakan untuk development React native dan disini saya perlu ingatkan bahwa tulisan saya ini merupakan pendapat pribadi, dan saya tidak akan menyebutkan Nodejs dan Android Studio karena itu sudah kebutuhan wajib sebelum menggunakan React-native.

Tools dan aplikasi yang saya sebutkan boleh kalian ikuti dan digunakan untuk membantu teman-teman saat development React native. Namun semua dikembalikan ke teman-teman sendiri atau mungkin bisa juga teman-teman merekomendasikan aplikasi dan tool untuk menambah list kebutuhan saya 😁😁😁

ini list apps dan tools yang saya gunakan :

Visual studio code

Ini adalah Default code editor saya di laptop, menulis scirpt apapun bahasa-nya saya mengandalkan editor ini, dulu pernah pake editor icon hijau susah move-on, namun karena ringan dan Microsoft selaku developer selalu memberikan update berkala, selain itu komunitas pengembang plugin juga banyak ditambah juga ada beberapa plugin dari editor lain. Dan fitur editor yang saya sukai adalah terdapat pengelolahan git, ada beberapa extensi juga yang saya pasang agar lebih cepat dalam development yaitu :

  • Auto Close tag
    Extensi ini berfungsi untuk membuat otomatis tag, contohnya dalam React native kita membuat sebuah komponen bernama Card, maka tulis saja <Card lalu apabila di tutup dengan tanda “/” akan menghasilkan <Card/>, jika ditutup dengan tanda “>” menjadi <Card></Card>, untuk download bisa disini
  • ES7 React/Redux/React-Native/JS snippets
    Karena React native menggunakan bahasa javascript dan lebih mudah dan ringkas jika menggunakan code Ecma Script versi 6 bahkan 7, maka sudah menjadi kewajiban donk untuk memasang ekstensi ini agar bisa menulis script lebih cepat, jika ingin memanggil kebutuhan dasar javascript lengkap dengan contohnya bisa menggunakan ekstensi ini, untuk downloa bisa disni
  • Path Intellinsense
    Tidak hapal nama file komponen saat mau melakukan import Ekstensi ini bisa digunakan untuk memanggil directory atau file yang diinginkan, selain itu bisa digunakan untuk keperluan web juga kok, untuk download bisa disini.
  • React-native Tools
    Tools ini berguna apabila ingin debug langsung melalui Vscode, lebih enak bukan? untuk download bisa disini.
  • VS Live Share
    Extentions ini biasanya digunakan untuk pair programming dengan rekan kerja saya jika kita jarak jauh atau sedang dinas keluar kota, sangat membantu sekali untuk yang mau kerja pair ataupun pair secara remote, untuk download bisa disini.
  • Optional : Material icon
    secara default Vscode sudah ada menggunakan icon file, namun karena saya tidak suka icon bawaan-nya saya menggunakan ini untuk icon-icon file maupun folder project saya, untuk download bisa disini.
  • Optional : Gruvbox Theme dan Color
    ini tema yang menarik saya karena tampilannya bagus, gelap kecoklatan dan nyaman di mata saya, bahkan saya menyesuaikan juga untuk terminal saya di OSX maupun Windows, agar betah saat melihat terminal dalam waktu yang lama, untuk download bisa disini.

Terminal (Iterm, cmder, dll)

Terminal atau di windows bernama Command Prompt wajib buat Developer yang menggunakan node.js, karena React native berbasis nodejs maka hukum wajib bisa menggunakan terminal. Karena sudah default terinstall di setiap OS maka sudah sewajarnya kalau tinggal menggunakan saja.

Sebelumnya saya menggunakan OSX dan terminal sudah cukup lengkap, namun untuk yang ingin menggunakan fitur lebih bisa menggunakan Iterm, tampilan seperti dibawah ini tentunya sudah saya custom dulu (baca sampai bagian bawah apabila ingin menggunakan layout yg sama) :

untuk download iTerm bisa saja download melalui link dibawah ini :

untuk Windows sendiri ini saya menggunakan cmder, setidaknya saya bisa melakukan persis apa yang bisa dilakukan oleh iTerm dan terminal UNIX :

Untuk download, bisa klik di link di bawah ini :

Git

Sebagai programmer saya membutuhkan Control System untuk mengelola proyek yang saya kerjakan, dengan cara mencatat setiap perubahan pada file yang di kerjakan lalu di letakkan di layanan sejenis cloud dan saya menggunakan 2 layanan yaitu github dan juga gitlab.

Untuk penggunaan saya biasanya menggunakan bawan dari Vscode, namun karena tidak se kompleks perintah di terminal, maka saya juga menggunakan terminal juga, selain membantu menutupi fitur vscode, dengan menggunakan terminal saya bisa tahu progres pengolahan git dan cara kerja (hitung-hitung hapal command git juga).

Di linux bisa di install dengan menjalankan perintah :

sudo apt-get update
sudo apt-get upgrade
sudo apt-get install git

Di OSX bisa menggunakan brew :

brew install git

Sedangkan Windows bisa menggunakan gitbash, jika temen-temen menggunakan cmder, di cmder sendiri sudah terpasang git, cuman biasanya berontak dengan vscode jadi disarankan untuk tetap meng-install git bash yang bisa di download disini

ZSH (untuk Linux dan OSX)

Di Linux atau di OSX default terminal adalah menggunakan Bash shell, agar bisa di customize sesuai dengan kebutuhan saya menggunakan ZSH, hal custom apa saja yang saya gunakan?tampilan dan kebutuhan tentunya, untuk itu saya meng-install powerline agar saya bisa mengetahui status git dan tahu struktur directori.

Tmux (untuk Linux dan OSX)

Aplikasi ini saya gunakan untuk mengelola terminal dan membuat layout terminal, sebetulnya banyak aplikasi terminal pihak ketiga yang sudah memiliki fitur tab dan bisa di buka di sebelah terminal, cuman saya ingin fokus ke satu penggunaan terminal saja. Tmux juga bisa kita atur semedikian rupa, terutama untuk yang menggunakan banyak terminal.

Saya bisa membuat 3 layout dengan 1 terminal, ini lebih efektif daripada membuka banyak terminal, terlebih karena ini React native, saya harus membuka emulator Android dari terminal dan menjalankan server React native ditambah penggunaan git

Tentu untuk mendapatkan tampilan seperti saya harus mengatur terlebih dahulu, namun jangan khawatir kalian bisa menggunakan setting saya yang sudah saya , untuk melihat setting saya bisa di lihat link di bawah ini (bisa digunakan di Linux, untuk Windows gunakan saja cmder) :

Adobe XD

Sebagai orang front-end saya membutuhkan dan menggambar rancangan layout atau desain layout, dulu saya biasa menggunakan Photoshop dan Illustrator, sekarang Adobe juga menyediakan aplikasi untuk mendesain User interface untuk Web, Mobile dan Desktop yaitu Adobe XD ada beberapa fitur yang kurang kalau menurut saya, namun karena gratis dan buatan Adobe saya gak bisa komplain.

Nah itu semua list Tools dan aplikasi yang saya gunakan untuk Development React native, mungkin bisa membantu teman-teman yang lagi asyik main sama React native. jika ada tambahan silahkan saja komentar atau japri saya saja di Facebook saya.. :D

--

--