Langkah Awal Untuk Belajar Tentang React Programming

CODEORAYO COMMUNITY General Technology Langkah Awal Untuk Belajar Tentang React Programming

  • Post
    codeorayo
    Keymaster
    none
    React Programming – React menjadi salah satu library javascript populer setelah resmi menjadi open source pada May 2013. Artikel 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,

    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 hampir mirip. Artinya jika anda bisa ReactJS, skill tersebut bisa di konversi ke React Native. Begitu juga sebaliknya, bisa React Native ke ReactJS lebih mudah.

    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.

    Apakah Ada Problem Soal React Ini ?

    Problem nya adalah Data Realtime & DOM, Di aplikasi seperti facebook, semua aktifitas seperti news feed, udpate status, like, comment, notifikasi, chatting 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

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

    Belajar React Mulai Dari Mana ?

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

    Pelajari ES6

    Penting! 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 boleh Anda mulai review kembali.

    Langsung saja ke react.

    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. 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. 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. Anda akan benar-benar klik dengan react setelah memahami paradigma ini. Anda bisa memperlajari FP secara paralel dengan react.

    Pelajari Route

    Sampai disini Anda saya anggap 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 jatuh ke visual studio code.

    – Browser Extension untuk membantu proses debug seperti React devTools& Redux devTools

    Kenapa Harus React ?

    1. Cepat dan Efisien

    Karena berbasis komponen maka react hanya perlu me-render resource yang berhubungan dengan data yang berganti, tidak perlu me-render seluruh resource .

    2. Reusable (dapat digunakan berulangkali)

    Komponen yang telah kita buat dapat kita gunakan berkali-kali pada saat dibutuhkan. Ini sangat berguna bagi kita untuk mempersingkat waktu dan mengurangi resource yang ada.

    3. Library JavaScript

    JSX (JavaScript Extension) singkatnya kita dapat menyematkan syntax HTML kedalam Javascript. Ini sangat membantu kita dalam proses development, apalagi dengan adanya fungsi dari ES6(Ecma Script).

    4. Immutable State

    Kita dapat memanajemen state yang ada dengan menggunakan Redux. Kita dapat mengatasi permasalahan mutable state dengan RamdaJs. Untuk state yang berinteraksi dengan API kita dapat menggunakan Redux-Saga.

    Kesimpulan:

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

    https://toghr.com/langkah-awal-untuk-belajar-tentang-react-programming/

  • You must be logged in to reply to this topic.