Mau belajar React di 2018 ?

Published in

Coderupa

7 min readJun 2, 2018

Saat ini React menjadi salah satu library javascript populer setelah resmi menjadi open source pada May 2013. Pada saat tulisan ini dibuat (30 May 2018 ) react sedang merayakan ulang tahunnya yang ke 5. 🍾 🙌 🎉

Selamat ulang tahun react, panjang umur ya. Amin !
Ehh ternyata library juga ulang tahun ya 😃

Tulisan ini ditujukan bagi teman-teman yang sedang mengeksplore react, bisa karena tuntutan pekerjaan, research untuk kebutuhan project, menambah skillset untuk peluang kerja yang lebih baik, atau mungkin cuma hobby saja, and whatever lah.

Mungkin tidak cocok bagi anda yang sudah experience di react tapi mungkin bisa jadi referensi jika ada yg bertanya tentang react kepada anda. Malas juga kan di tanya yang itu2 mulu 😃

Baiklah mari kita mulai

1. Apa itu React ?

Supaya tidak bingung saat ini React itu ada 2 (dua).
ReactJS untuk aplikasi web & React Native untuk aplikasi mobile.
Cuma beda kebutuhan aja, cara kerja dan code nya mirip2 lah. Artinya jika anda bisa ReactJS, skill tersebut bisa di konversi ke React Native. Begitu juga sebaliknya, bisa React Native ke ReactJS lebih mudah. Seperti tag line react ‘ learn once write anywhere ’

React awalnya dibuat oleh Jordan Walke salah satu enginer facebook, digunakan pertama kali untuk facebook newsfeed pada tahun 2011 dan instagram pada tahun 2012. Sampai akhirnya facebook memutuskan untuk membuat React menjadi open source pada tahun 2013 dan mulai di adopsi oleh berbagai raksasa teknologi di seluruh dunia ( sumber )

Di jaman itu facebook belum menemukan react native, karena konsetrasi FB pada waktu itu adalah aplikasi web. Tapi pertanyaannya bukan itu, kenapa sih facebook membuat react ? padahal pada saat ini kan banyak framework MVC populer. Ohh ya jquery pada saat itu juga masih mendominasi. Kurang kerjaan banget ya ?

Problem nya adalah Data Realtime & DOM.
Coba perhatikan aplikasi web facebook, semua aktifitas seperti news feed, udpate status, like, comment, notifikasi, chatting dsb semuanya berjalan secara realtime dan tidak perlu refresh browser untuk mendapatkan update terbaru.

Untuk data realtime ada beberapa solusi seperti WebPush, Long Pooling, Websocket, PubSub, dan masih banyak lagi. Setahu saya facebook menggunakan teknik yang disebut comet approach khususnya untuk XHR Long Polling dan BOSH ( sumber )

Tapi problem utama sebenarnya bukan itu, tapi manipulasi DOM (Document Object Model). Setiap ada perubahan pada data realtime tersebut, UI aplikasi juga harus di update. Sebagai contoh notifikasi untuk like,comment, permintaan pertemanan,dsb. Untuk mengubah UI tersebut di belakang layar yang rubah adalah DOM.

Dan manipulasi DOM itu mahal harganya. Bukan mahal dalam bentuk uang tapi dalam bentuk performance. Mungkin tidak begitu terasa pada aplikasi sederhana, tapi untuk aplikasi yang membutuhkan aktifitas data realtime yang tinggi ini tidak bisa di tawar.

Solusinya, react menggunakan Virtual DOM. Teknik ini membuat performance menjadi lebih baik karena react hanya mengubah DOM sesuai kebutuhan.

Jadi sebenarnya react itu hanyalah library untuk UI (User Interface) bukan framework. Dalam terminologi framework MVC (Model View Controller), React disini hanya menangani View saja. Untuk urusan lain seperti model, controller, router, backend, dsb itu tergantung anda. Itu sebabnya react disebut opinioted

2. ReactJS vs React Native ?

Setelah sukses untuk aplikasi web, enginer facebook sepertinya masih kurang kerjaan dan mulai mencoba React ke mobile, akhirnya muncullah React Native pada January 2015. React Native memungkinkan developer menulis aplikasi dalam javascript dan di build ke 2 OS sekaligus yaitu iOS & Android. Bukan penemuan baru sebenarnya, toh sudah banyak teknologi seperti ini sebelumnya. Beda nya apa ? React Native mengklaim performance nyaris sama dengan native.

Tapi bukan berarti anda bisa menulis script untuk aplikasi web & mobile dalam satu codebase, tetap harus di tulis terpisah. Tapi dari sisi code tidak begitu jauh karena core nya sama-sama react. Artinya jika bisa ReactJS ke React Native cukup mudah begitu juga sebaliknya.

3. Belajar React mulai dari mana ?

Sebenarnya belajar react itu tidak sulit, yang sulit itu adalah urutan belajarnya.

Ada banyak sekali resource belajar react di internet. Tapi bagian tersulit adalah menetukan urutan belajarnya dan menghadapi ekosistem react yang berkembang begitu cepat. Adapun urutan disini berdasarkan pengalaman saya. Tidak ada urutan resmi untuk belajar react.

Pelajari ES6
Ini serius, pondasi javascript sebelum masuk ke dunia react itu sangat penting, khususnya ES6. Jika masih belum familiar dengan konsep closure, high-order function, arrow function, class, destructuring, import/export sebaiknya review kembali. Anda mungkin bisa ngeskip beberapa bagian, tapi tetap nanti pasti akan kembali lagi. Salah satu sumber yg sarankan adalah ini.
Langsung ke react gak pake ritual panjang dan ribet.
Ada banyak sekali tutorial react di luar sana yang mengharuskan anda menjalankan ritual setup ini itu. Untuk sekarang lupakan itu, gunakan online tools seperti codesandbox dan langsung cobain react nya. Kan tadi niatnya mau belajar react kan ?
Umum nya tantangan pertama ngoding di react adalah mengubah paradigma programming. Dari imperative ke declarative. Itu seperti mengubah kebiasaan menggunakan tangan kanan ke tangan kiri. Pelan-pelan saja nanti juga terbiasa kok.
Pelajari Fundamental React.
Bagian paling penting dari fundamental adalah memahami cara kerja component, komunikasi antar component, lifecycle & data fetching dan menulis component dalam JSX. Karena aplikasi react sebenarnya gabungan dari beberapa component, dan tugas anda sebagai enginer adalah meracik dan mengkombinasikan semua component2 ini. Yah mirip seperti main puzzle lah. Artikel Thinking in React ini mungkin bisa membantu
Pelajari Functional Programming (FP).
React terinspirasi dari functional programming. FP bukan bahasa program baru tapi lebih ke paradigma atau teknik. Saya benar-benar klik dengan react setelah memahami paradigma ini. Anda bisa memperlajari FP secara paralel dengan react.
Pelajari Route
Sampai disini anda saya anggap anda sudah paham fundametal react, sekarang saat naik level yaitu belajar route. Route digunakan untuk navigasi halaman dalam aplikasi web atau navigasi screen dalam aplikasi mobile. React tidak menyediakan built-in route, tapi tenang ada banyak 3rd party library yang bisa kita gunakan secara gratis. Rekomendasi saya:
- React Router untuk web
- React Navigation untuk mobile
Style oh Style
Untuk React Native mungkin lebih mudah karena by default pilihannya cuma satu yaitu CSSinJS ( CSS rasa Javascript ).
Untuk Web anda tetap masih bisa menggunakan CSS atau SCSS. Tapi tahukah anda problem dari CSS itu adalah semua class atau id adalah global dan sudah menjadi rahasia umum Global Variables Are Bad. Solusinya anda bisa mencoba Inline Styling, CSSinJS, CSS Modules, Styled Components. Banyak banget, apa bedanya, pilih yang mana ? Yang mana saja boleh. entar juga tau sendiri kalau udah dicoba
Data Management
Ketika aplikasi semakin kompleks, component semakin banyak. Mungkin ini saat yang tepat menggunakan data management. Untuk saat ini pilihan terbaik jatuh ke Redux. Ilmu FP yang sebelumnya anda pelajari akan benar-benar dibutuhkan disini. Kalau masih kurang menantang anda bisa mencoba MobX, Relay/Appollo,Alt.js dan Jumpsuit.
Mencoba modern development tools
Untuk menjadi react enginer profesional sebaiknya anda mencoba tools development yang lebih modern dan siap digunakan untuk production, seperti :
- Package Manager → ada npm & yarn, saya sarankan yarn untuk react native.
- Bundler. Saat ini webpack masih yang terbaik untuk ReactJS. Untuk React Native tidak ada bundler spesifik, karena bundler built-in sudah cukup baik.
- Editor. Pilihan editor sebenarnya kembali ke preferensi masing-masing. Untuk saat ini pilihan saya jatuh ke visual studio code.
- Browser Extension untuk membantu proses debug seperti React devTools & Redux devTools

4. Backend untuk React

Tidak aturan atau requiretment khusus untuk teknologi backend. Ranah react adalah di frontend. Tapi yang paling penting adalah bagaimana frontend berkomunikasi dengan backend. Yang paling umum adalah dengan RESTful API.

Ada banyak pilihan scenario dan tech stack untuk aplikasi react. Jika anda masih baru mulai, sebaiknya mulai dari memahami cara kerja RESTful. Untuk prosess belajar anda bisa menggunakan fake REST API

React memang paling umum di padukan dengan Node, karena masih menggunakan bahasa yg sama javascript dan kemudahan dalam sharing code & server rendering. ExpressJS sudah cukup mumpuni untuk baru mulai bahkan untuk production.

Kalau anda mencari framework yang mendukung SSR ( Server Side Rendering ), NextJS bisa jadi pertimbangan.

Jika anda tidak mau berurusan terlalu banyak membangun backend sendiri, ada banyak arsitektur yang memungkin anda membuat backend tanpa harus menulis code seperti firebase, backqend, backend4app, serverless, headless-cms.

5. Ini vs Itu

Topik versus memang selalu menjadi hot topic, penuh pro-kontra, dan tak berujung. Tapi diskusi seperti ini selalu terjadi dan berujung ke perdebatan yang gak ada habisnya. Semuanya punya kelebihan dan kekurangan masing-masing.

Akan selalu ada inovasi baru setiap hari dan pada akhirnya akan terjadi seleksi alam. Yang terbaik yang bertahan.

Di artikel selanjutnya saya akan mencoba membuat komprasi antara React,Vue,Angular dan React Native,Flutter. Stay Tuned

Terimakasih telah membaca tulisan saya. Jika di rasa bermanfaat silahkan 👏 & share. Jika anda tertarik belajar lebih dalam tentang react native silahkan isi email anda disini