Pengenalan React

Anda sudah menguasai 3 hal yang menjadi dasar pengembangan web yaitu HTML, CSS, dan JavaScript. Melalui JavaScript, Anda dapat membangun website yang interaktif. JavaScript juga dapat membuat website berevolusi menjadi sebuah web aplikasi. Bahkan, jika Anda berkelana lebih jauh lagi dengan JavaScript, Anda bisa membangun keseluruhan sistem (fullstack) hanya dengan satu bahasa.

Saat ini, untuk membuat aplikasi web yang kompleks sesuai kebutuhan industri nyatanya tidak cukup bila mengandalkan kemampuan standar yang diberikan oleh W3C pada JavaScript. Sebetulnya bisa saja, tetapi Developer Experience (DX) menjadi terabaikan selama proses pengembangan berlangsung. Jika DX tidak kita hiraukan, siapa yang betah menjadi developer?

Untuk menjaga DX sebaik mungkin, penggunaan library dan tools JavaScript tak terhindarkan. Karena library dan tools, JavaScript dapat melakukan hal yang lebih dari standar. Saat ini sudah jutaan library terdaftar di NPM repository dan bisa digunakan secara gratis. Salah satunya React.

React merupakan JavaScript library yang sangat populer dalam membangun User Interface. Sebelum Anda mengenal lebih dalam tentang React, di modul ini kami akan mengajak berkenalan lebih dalam tentang React.

Di modul ini Anda akan mempelajari beberapa hal seperti berikut.

  • Pengertian dari React.
  • Alasan mengapa kami memilih React.
  • Mengetahui berbagai ekosistem yang tersedia/digunakan pada React.

Apakah Anda sudah tidak sabar untuk mengenal React lebih dalam? Yuk, kita lanjut ke materi berikutnya.


Pengertian React


React diciptakan oleh Meta (dahulu Facebook) dan mulai dipublikasi pada NPM repository sejak tahun 2012. Seperti yang disinggung sebelumnya, React adalah JavaScript library yang digunakan untuk membangun User Interface (antarmuka pengguna). Hal ini ditegaskan oleh tim pengembang React pada website resminya di reactjs.org.

Tak jarang React dibandingkan dengan JavaScript Framework seperti Vue atau Angular karena keduanya memiliki fungsi yang sama yakni membuat antarmuka pengguna web jadi lebih mudah. Namun, sebenarnya hal itu tak sebanding mengingat React hanyalah library. Library biasanya tak lebih besar daripada framework, baik dari segi ukuran atau tingkat abstraksi yang dapat dilakukan dari standar yang ada. React tidak mengubah paradigma dalam mengembangkan aplikasi web. Your code, your way. React hanya library yang ukurannya kecil [1], tetapi dapat membangun antarmuka pengguna melalui JavaScript dengan pengalaman yang lebih baik. Hal itulah mengapa kami menyukai React.

Dengan React, kita dapat terhindar dari banyak kesulitan yang biasa terjadi ketika menggunakan standar W3C dalam membangun antarmuka pengguna. Dilansir dari website resminya, React memanfaatkan konsep komponen, deklaratif, dan unidirectional data flow (aliran data searah). Berikut penjelasan singkatnya.

  • Komponen

    React memanfaatkan komponen dalam membangun antarmuka. Setiap komponen terenkapsulasi dan dapat saling dikomposisikan satu sama lain. Karena adanya komponen, antarmuka yang dibangun menggunakan React sangat reusable. Anda tidak perlu menuliskan kode yang sama berulang kali untuk menggunakan antarmuka yang serupa.

  • Deklaratif

    Dengan konsep deklaratif, pembuatan antarmuka pengguna dapat lebih cepat. Pasalnya, kita cukup fokus terhadap apa yang ingin dicapai. Tak ada kode imperatif lagi ketika menggunakan React. Bahkan, Anda bisa menuliskan “layaknya” sintaksis HTML di dalam kode JavaScript. Hal yang mustahil dilakukan oleh JavaScript standar saat ini. Karena itu, Anda bisa mengucapkan selamat tinggal pada fungsi DOM manipulation, seperti appendChild, getElementById, addEventListener, dan sebagainya.

  • Aliran Data Searah

    Komponen React dapat menampung sebuah data. React secara reaktif akan memperbarui dan me-render komponen jika data di dalamnya berubah. Karena sifat reaktifnya tersebut, kami rasa inilah alasan mengapa dinamakan React. Komponen React dapat dikomposisikan dan aliran data pada komponen dilakukan secara searah dari parent ke child. Hal itu membuat perubahan data pada React lebih terukur.

Catatan: Jangan khawatir bila Anda belum memahami betul penjelasan di atas. Kami akan membahas konsep dasar React lebih detail pada modul selanjutnya.

Oke, saat ini Anda sudah tahu sekilas tentang React. Di modul selanjutnya, kami akan menjelaskan mengapa React adalah pilihan yang tepat untuk Anda pelajari saat ini sebagai library dalam membangun antarmuka pengguna.

Catatan: Tak afdal rasanya bila memulai belajar React tanpa mengetahui alasan mengapa React sendiri dibangun. Kami sarankan Anda untuk menyimak penjelasan Pete Hunt sebagai tim inti React pada artikel berjudul “Why did we build React?”.


Alasan Memilih React

Perlukah kami menjelaskan mengapa memilih React? Konsep yang ada di dalam React sendiri sudah menjelaskan mengapa kami menyukai React. Kami suka React karena memiliki ukuran kecil sehingga tidak membuat “gemuk” ukuran kode bila menggunakannya. Kami suka React karena ia dapat memangkas banyak kode yang berulang dan juga sifat reaktif yang ia miliki. Seharusnya alasan tersebut cukup mengapa kami memilih React.

Baik. Mari kita lihat dari sudut pandang lain. Mungkin alasan yang kami berikan terlalu teknikal untuk seorang yang baru mulai belajar React. Bagaimana dengan popularitasnya? Apakah banyak perusahaan yang membutuhkan skill React? Perusahaan mana yang sudah pakai React? Bagaimana dengan komunitasnya? Oke. Mari kita cari tahu satu per satu.


Popularitas React

Pertama, kita bahas tentang popularitasnya. React melejit bak roket bahkan sejak setahun setelah pertama dirilis. Sampai saat ini, percayalah, React masih juara dalam hal popularitas di kategori UI Library atau Front-End Framework. Survei terbaru yang dilakukan oleh stateofjs, mengungkap bahwa penggunaan React masih menjadi peringkat pertama sejak 6 tahun ke belakang. Angular dan Vue (framework dengan tujuan serupa) menyusul di belakangnya.


Repositori GitHub React pun memiliki statistik yang luar biasa. Saat artikel ini ditulis, React disukai (ditandai star) oleh 184 ribu developer dan menjadi dependencies terhadap 9 juta lebih repository terbuka di GitHub. Luar biasa!

Belum lagi bila kita lihat statistik unduh di NPM repository. React tercatat diunduh sebanyak 15 juta kali setiap minggunya. React juga masuk ke dalam 10 besar package yang dibutuhkan berdasarkan peringkat NPM. Angka yang sangat fantastis, bukan?

Popularitas yang baik menjadi salah satu alasan kami memilih React.


Pengguna React

Selain alasan popularitas, React juga banyak digunakan oleh industri besar, unicorn, ataupun perusahaan rintisan. Karena React bertuan Meta, sudah mesti ia digunakan pada platform web social media Facebook, Instagram, dan WhatsApp. Selain platform social media Meta, ternyata Twitter, Netflix, Discord, dan banyak platform sukses lainnya mempercayai dan menggunakan React.


Di Indonesia sendiri bagaimana? Sama saja. Perusahaan dalam negeri pun sudah banyak yang menggunakan React. Contohnya Tokopedia, Traveloka, Tiket.com, Telkomsel, dan masih banyak perusahaan lainnya.


React sudah teruji dan digunakan banyak industri sukses. Hal ini memperkuat kami untuk mengajak Anda belajar React bersama.


Komunitas

Komunitas menjadi salah satu faktor ketika hendak memantapkan pilihan penggunaan framework, tools, atau teknologi. Pasalnya, komunitas yang baik dapat menjadi wadah untuk terus berkembang, berbagi ilmu (tak jarang juga berbagi eror), bersosialisasi, dan bertemu rekan belajar.

Tim inti React sendiri selalu menjaga agar komunitas React selalu sehat dan aktif. Bahkan, pada situs website resminya React, komunitas memiliki halaman tersendiri (lihat Where To Get Support). “React has a community of millions of developers” kata yang tercantum pada halaman tersebut. React sendiri bisa tumbuh dan digunakan banyak perusahaan berkat komunitas yang aktif mendukungnya.


Meta sebagai pengembang pun cukup memperhatikan komunitas developer dengan membuat komunitas resmi bernama Developer Circles (DevC). Di sana, developer aktif berdiskusi dan berbagi ilmu perihal teknologi yang diciptakan oleh Meta, salah satunya React. Di Indonesia sendiri sudah banyak berdiri komunitas DevC. Ada ribuan developer yang tergabung pada komunitas di setiap daerahnya. Anda pun bisa bergabung dengan komunitas yang sesuai pada halaman Join Developer Circles.

Ketika Anda memilih React, banyak komunitas yang bisa membantu Anda untuk terus mengembangkan ilmu. Jangan takut ketika menemui eror karena Anda tidak menggunakan React sendirian. Anda bisa berbagi ilmu atau mencari solusi permasalahan salah satunya di komunitas yang ada.


React Ecosystem


Hal lain yang membuat React istimewa adalah memiliki ekosistem yang luas. Maksudnya, React dapat dikombinasikan dengan penggunaan library, tools, teknologi, atau hal lain yang dapat menunjang pengalaman yang lebih baik dalam mengembangkan aplikasi React. Hal itu mirip seperti pengertian ekosistem pada ekologi di mana hewan, tumbuhan, dan benda alam saling mendukung satu sama lain sehingga menciptakan sistem kehidupan yang kuat.

Seperti yang kita ketahui, React hanyalah library untuk membangun antarmuka pengguna. Tak lebih dari itu. Inti dari React sangatlah kecil sehingga sulit bila kita hanya mengandalkan package inti untuk membangun aplikasi yang kompleks. Peran ekosistem sangat membantu untuk membuat aplikasi React dengan cara yang lebih baik lagi.

Misal, jika ingin membuat aplikasi web yang memiliki lebih dari satu halaman, Anda pasti memerlukan penanganan routing. React sendiri tidak menyediakan mekanisme routing, sehingga Anda perlu menyediakannya secara mandiri. Namun, alih-alih membuat mekanisme routing sendiri, manfaatkanlah salah satu ekosistem yang ada, yaitu react-router agar kita dapat mengimplementasikan routing secara mudah pada React.

Selain itu, Anda juga memerlukan persiapan yang tidak sederhana ketika memutuskan ingin menggunakan React. Setidaknya Anda pasti butuh module bundler seperti webpack untuk membundel seluruh kode inti React dengan kode yang Anda miliki atau sebuah transpiler kode JavaScript seperti Babel untuk menerjemahkan sintaksis khusus React ke JavaScript yang dapat dimengerti oleh browser. Percayalah, konfigurasi webpack atau Babel untuk React tidak sederhana dan membuat pusing dalam memahaminya. Alih-alih kita menyiapkan semuanya secara mandiri, alangkah baiknya untuk menggunakan ekosistem create-react-app.

Kami setuju bahwa ekosistem sangat membantu developer dalam menggunakan React. Namun, ingat ya! Pikirkan dua kali bila hendak menggunakan library atau package tambahan. Buatlah kode sekecil mungkin dengan menambahkan ekosistem yang dibutuhkan saja sebelum React menjadi penyebab buruknya performa web Anda.

Ekosistem bukan hanya permasalahan penggunaan tools atau library. Namun, hal apa pun yang dapat mendukung pengembangan menggunakan React lebih baik lagi, termasuk komunitas atau sumber belajar.

Materi yang kami sediakan (bukan hanya di kelas ini) akan mengajak Anda untuk menjajal beberapa ekosistem React yang ada. Terutama yang dapat membantu kita dalam mengembangkan aplikasi React di web. Ekosistem yang dimaksud antara lain sebagai berikut.

  • ES6+ sintaksis : Kita akan banyak memanfaatkan sintaksis dan fitur JavaScript terbaru (ES6 ke atas) untuk mendapatkan pengalaman yang maksimal dalam menggunakan React. Jadi, biasakan diri Anda untuk menggunakan sintaksis, seperti const, let, class, rest parameter, spread operator, destructuring, default parameter, dan arrow function. Anda juga harus terbiasa dengan penggunaan Promise dan async/await
  • create-react-app : Seperti yang sudah disinggung sebelumnya, untuk memudahkan dalam pembuatan proyek aplikasi React, kita akan memanfaatkan create-react-app.
  • React DOM : React hanyalah library untuk membangun antarmuka pengguna. React dapat digunakan tak hanya untuk aplikasi web, tetapi juga dapat digunakan untuk membangun aplikasi Android dan iOS dengan bantuan React Native. Lain halnya dengan React DOM yang dibutuhkan ketika Anda ingin mengembangkan aplikasi React untuk platform web.
  • React Router : React Router adalah salah satu ekosistem React untuk memudahkan implementasi routing di React. Kita akan membutuhkan ini ketika ingin membuat aplikasi yang memiliki lebih dari satu halaman.
  • Redux : State merupakan salah satu konsep inti dari React. Secara standar, state bersifat lokal dan hidup di dalam komponen. Dengan Redux, kita bisa membuat state secara terpusat dan bersifat global.
  • Jest : Ia merupakan JavaScript testing framework yang dibuat oleh The Meta Open Source team (pengembang yang sama dengan React). Dengan Jest, kita dapat menguji mulai dari kode JavaScript hingga komponen React secara lebih mudah.

Hal yang membuat belajar React menjadi sulit sebenarnya bukan karena React itu sendiri, melainkan penggunaan ekosistem yang terlalu dini sehingga membuat Anda bingung untuk mencampurkan dan mempelajari banyak hal.


Selanjutnya : Konsep Dasar React