Mencoba Reactjs untuk Pertama Kalinya

Photo by Joshua Aragon on Unsplash

Penggunaan library, atau module, atau framework dalam pengembangan aplikasi web sedang hype di abad ini. Recruiter yang mencari calon-calon developer tidak luput mencantumkan setidaknya salah satu keahlian dalam menguasai framework tertentu dalam requirements mereka. Ya, setidaknya dari situ kita bisa cari tahu framework mana nih yang banyak dicari di pasar. Tapi balik lagi permintaan penggunaan framework tidak terlepas dari tujuannya.

Mumpung masih berstatus pengangguran, gue mau coba bahas pengalaman gue saat berupaya memahami salah satu library yang cukup hype di kalangan masyarakat front-end developer di belahan dunia. Yak, dia adalah React.

React : A JavaScript library for building user interfaces

Kalo lo lagi nggak buka situs resminya, hal yang bakal lo lihat pertama kalinya adalah kutipan itu, dan ini cukup menjelaskan apa itu React. Hal pertama yang melekat kuat di ingatan gue tentang React adalah Component-Based. Yak, secara makna component-based disini menjadikan suatu aplikasi React tersusun menjadi UI yang kompleks. Why? cause the complex UIs composed by components that encapsulated. Component-Based ini menurut gue yang membuat React ini lebih banyak disebut-sebut sebagai framework daripada library.

How to learn React?

Sebetulnya pertanyaan ini gak penting-penting amat, tapi cukup penting buat bekal kalian dalam mempelajari framework atau library baru. Jawabannya simple, read the documentation and practice it!

Sebelumnya, untuk memahami dasar-dasar React ini kalian setidaknya sudah memahami :

  • Javascript (ES6, package manager, node)
  • DOM (Document Object Model)
  • OOP (Object Oriented Programming)
  • HTML (mesti lah ya)

So, untuk masalah how to practice it, gue mencoba bikin single page app seperti blog untuk implementasi React. CRA (Create React App) hadir buat siapapun yang mau memulai build app dengan React.

CRA

Create React App is a comfortable environment for learning React, and is the best way to start building a new single-page application in React.

Membangun Single Page App (SPA) merupakan cara yang menurut gue cukup ampuh buat memahami React secara teknis. Well, sembari menyelam minum anggur, secara konsep kita bisa belajar dari dokumentasi sedangkan secara teknis kita bisa belajar dari praktek.

Mungkin disini gue antar kalian ke gerbang menuju CRA. Semoga di lain kesempatan gue bisa bahas lebih jauh tentang React Component, React Element, React Hooks, dll. Langsung aja, untuk install CRA kita bisa install lewat package manager. Bisa pakai NPM atau Yarn. Tapi lebih disarankan pake Yarn ya karena lebih efisien. Buka terminal, kemudian ketikkan perintah berikut.

yarn create react-app my-blog

Kemudian pindah ke direktori instalasi tadi, kemudian coba cek apakah CRA sudah terinstall dengan benar.

yarn start

Voila! you have a SPA’s template.

Setelah install CRA dengan package manager, kita akan mendapatkan isi direktori yang seperti itu. Secara default, App.js berisi objek yang akan dijadikan component kemudian di-render oleh ReactDOM diindex.js. Kita bisa membuat objek baru di direktori src dengan membuat file js baru kemudian meng-import React dan Component serta membuat objek di dalamnya (ah, mungkin lain waktu gue jelasinnya).

Why Should Learn React?

Hal yang paling berdampak ke gue saat belajar React adalah kemudahan membangun SPA. React yang notabene component-based, membantu gue banget ketika gue membuat component yang reusable. Jadi setidaknya gue bisa menghemat waktu sepersekian detik dalam membuat component yang sama.

Selain itu, performa saat me-render UI juga dapat membantu efisiensi pekerjaan. Selain itu juga, React yang awalnya dikembangkan Facebook masih didukung mereka dan komunitasnya berkembang biak cukup banyak. Jadi kalo kita punya problem setidaknya masih ada yang ladenin sambatan kita.

Oke, mungkin sekian dulu. Lain kesempatan gue bahas lebih mendalam soal React.

Kesimpulannya, sebagai frontend developer atau web developer setidaknya kalian paham salah satu framework atau library yang membantu optimalisasi proses pengembangan. React menjadi salah satu rekomendasi library yang patut buat dicoba. Ada banyak keuntungan yang bisa didapat dengan memanfaatkan library ini. Oh iya, React hanya mengoptimalkan tampilan atau views saja. Artinya, React hanya dapat digunakan di sisi klien (client-side). Untuk server-side bisa menggunakan framework tambahan lainnya.

Oke sekian dulu, gue paham kalo tulisan ini banyak yang kurang dibahas. Karena ada kerjaan lain, mungkin akan gue tambahkan di lain waktu. Sekian. Happy Hacking!