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.

[fusion_builder_container hundred_percent=”no” hundred_percent_height=”no” hundred_percent_height_scroll=”no” hundred_percent_height_center_content=”yes” equal_height_columns=”no” menu_anchor=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” status=”published” publish_date=”” class=”” id=”” background_color=”” background_image=”” background_position=”center center” background_repeat=”no-repeat” fade=”no” background_parallax=”none” enable_mobile=”no” parallax_speed=”0.3″ video_mp4=”” video_webm=”” video_ogv=”” video_url=”” video_aspect_ratio=”16:9″ video_loop=”yes” video_mute=”yes” video_preview_image=”” border_size=”” border_color=”” border_style=”solid” margin_top=”” margin_bottom=”” padding_top=”” padding_right=”” padding_bottom=”” padding_left=””][fusion_builder_row][fusion_builder_column type=”1_1″ spacing=”” center_content=”yes” link=”” target=”_self” min_height=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” background_image_id=”” background_color=”” background_image=”” background_position=”left top” undefined=”” background_repeat=”no-repeat” hover_type=”none” border_size=”0″ border_color=”” border_style=”solid” border_position=”all” border_radius_top_left=”” border_radius_top_right=”” border_radius_bottom_left=”” border_radius_bottom_right=”” box_shadow=”no” box_shadow_vertical=”” box_shadow_horizontal=”” box_shadow_blur=”0″ box_shadow_spread=”0″ box_shadow_color=”” box_shadow_style=”” padding_top=”” padding_right=”” padding_bottom=”” padding_left=”” margin_top=”” margin_bottom=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=”” last=”no”][fusion_text columns=”” column_min_width=”” column_spacing=”” rule_style=”default” rule_size=”” rule_color=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=””]

Klik dibawah ini untuk informasi tentang IT Training dan Info Loker seputar IT

⇓

[/fusion_text][fusion_button link=”https://api.whatsapp.com/send?phone=628151622988″ text_transform=”uppercase” title=”” target=”_self” link_attributes=”” alignment=”center” modal=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” color=”default” button_gradient_top_color=”” button_gradient_bottom_color=”” button_gradient_top_color_hover=”” button_gradient_bottom_color_hover=”” accent_color=”” accent_hover_color=”” type=”” bevel_color=”” border_width=”” size=”” stretch=”default” shape=”” icon=”fa-whatsapp fab” icon_position=”left” icon_divider=”no” animation_type=”fade” animation_direction=”static” animation_speed=”0.3″ animation_offset=””]Hubungi Kami[/fusion_button][/fusion_builder_column][/fusion_builder_row][/fusion_builder_container]

Apakah Ada Problem Soal React Programming 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.

1. 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.
2. 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.
3. 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
4. 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.
5. 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
6. 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
7. 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.
8. 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 Programming?

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.

TOG Indonesia can provide IT professionals for temporary, fixed-period placement in your company for project-based assignments:  IT Developer, Software Tester, Project Manager, Business Analyst, System Analyst, Security Engineer, etc.

Please FOLLOW our Social Media: —> Facebook, Twitter, Instagram, and Linkedin

We provide competent trainers in the field of Information and Technology with a certified and proven track record for developing human resources from leading multinational and national companies in Indonesia. To formalize the training program while creating a strong foundation for educational programs, Triple One Global Indonesia develops by combining high quality IT education and IT Training to add broad insights into the latest developments.