Frontend Framework : ReactJS!

Dalam dunia programming, Front-end adalah salah 1 sosok penting untuk cantiknya sebuah website atau aplikasi. kecerdikan dan keahlian nya dalam mengolah data dan feel nya dalam membangun sebuah User Interface (UI) dan User Experience (UX) menjadikan seorang front end layaknya pelukis handal yang melukis bagian depan website atau aplikasi.Membangun UI/UX sebuah website atau aplikasi, selain diperlukan sebuah skill tentu diperlukan pula sebuah tools sebagai pendukung seorang front-end dalam menjalankan tugasnya. Dari sekian banyaknya Front-end Framework yang tersedia seperti Vue.js, ReactJS, sampai Angular. Kali ini mari kita bahas tentang ReactJS.

React JS

ReactJS merupakan salah satu library javascript yang free, open source dan juga sangat terkenal untuk membangun user interface atau bagian frontend dari suatu aplikasi web. ReactJS ini dibuat oleh Facebook dan masih dikembangkan sampai saat ini oleh mereka serta komunitas atau developer secara individual yang terus bertambah besar jumlahnya. ReactJS sampai saat ini masih masuk dalam top ranking library yang paling banyak digunakan dan tools yang paling dicari di industri. Tetapi apa yang menyebabkan ReactJS dapat menjadi sangat terkenal dan banyak digunakan hingga saat ini ? dan bagaimana awal mula terciptanya ReactJS ?

History

Pada tahun 2011, aplikasi Ads dari Facebook mengalami beberapa kendala dalam hal penambahan kode yang sangat banyak untuk update sehingga sulit untuk di maintain oleh para developer saat itu. Untuk menyelesaikan masalah ini Jordan Walke menciptakan FaxJS, sebuah prototipe yang membuat proses tersebut menjadi lebih efisien. Ini merupakan awal lahirnya apa yang kita ketahui sekarang sebagai ReactJS.

Pada tahun 2012, Facebook membeli instagram. Setelah akuisisi tersebut, instagram ingin untuk mengadopsi penggunaan teknologi baru dari Facebook yaitu ReactJS. Oleh karena itu Facebook membuat ReactJS menjadi open source di tahun 2013. Di tahun itu juga ReactJS coba digunakan pada berbagai industri lain.

Selanjutnya di tahun 2014, ReactJS mulai dilihat oleh dunia sebagai suatu hal yang lagi booming sehingga fitur React Developer Tools ditambahkan sebagai extension dari Chrome Developer Tools. Di tahun ini juga diperlihatkan fitur React Hot Loader yang merupakan plugin yang berfungsi untuk dapat mereload ulang komponen ReactJS secara live tanpa adanya kehilangan state. Pada tahun berikutnya di 2015, ReactJS sampai pada titik dimana library tersebut sudah dikatakan stabil dan mainstream. Di tahun ini juga kita lihat berbagai pengembangan dan optimisasi dari fitur dalam ReactJS serta semakin besarnya komunitas yang mensupport ReactJS ini membuat ReactJS semakin terkenal dan banyak digunakan pada berbagai perusahaan untuk menghasilkan produk software.

FUNGSI & FITUR

Seperti yang telah disinggung sebelumnya, ReactJS ini berfungsi untuk membangun user interfaces yang interaktif dan mempermudah developer dalam proses tersebut. ReactJS dapat mempermudah developer dalam membangun user interface yang diinginkan dengan berbagai fitur dan keuntungan yang dimiliki oleh ReactJS. Beberapa fitur dan keuntungan yang dapat digunakan developer ketika menggunakan ReactJS antara lain:

• JSX

Javascript syntax extension atau Javascript XML (JSX) ini digunakan dalam ReactJS untuk membentuk struktur seperti HTML hanya saja dapat ditulis dalam satu file yang sama dengan kode dari Javascript dan dalam komponen yang sama. Ini dapat mempermudah developer dalam melakukan debugging dan menyusun struktur dari tampilan web yang diinginkan

• Komponen

Dalam ReactJS kita mengenal istilah komponen, jadi komponen ini dapat membantu kita membuat tampilan web ke dalam bentuk komponen-komponennya yang lebih kecil. Ini membuat kode menjadi lebih manageable dan dapat mengurangi kompleksitas karena komponen yang dibuat dapat digunakan kembali pada bagian web yang lain apabila dibutuhkan. Sehingga kita tidak perlu untuk membuat hal yang sama berulang kali. Komponen di ReactJS ada dalam bentuk class komponen dan dalam bentuk functional komponen. Dalam komponen ini kita mengenal lifecycle methods dan React Hooks yang dapat memudahkan kita dalam memanipulasi state dan DOM.

• Performa

ReactJS memberikan performa yang sangat baik dan cepat dengan memiliki waktu respons yang sangat cepat sehingga optimal dalam membanguan user interface dan experience yang menarik bagi banyak user.

• Komunitas

Semakin berkembangnya pengguanan ReactJS maka komunitas pengguna juga semakin besar. Hal ini dapat mempermudah developer dalam mencari resources terkait package yang dibutuhkan ketika proses development karena begitu banyak package yang tersedia dan mempermudah mencari informasi untuk menyelesaikan problem ketika development dengan adanya 416,387 related questions tentang ReactJS di stackoverflow.

Basic Skill Required

Basic skill yang dibutuhkan untuk dapat mempermudah kita dalam menggunakan ReactJS atau untuk dapat mempercepat kita dalam belajar ReactJS adalah kita harus mengerti 3 pilar utama dalam frontend web yaitu HTML, CSS dan Javascript.

• HTML

HyperText Markup Language (HTML) adalah standar markup language untuk dokumen yang didesain untuk ditampilkan pada web. Kita harus mengerti bagaimana penggunaan dari HTML agar kita dapat menggunakan ReactJS dengan baik. Karena sejatinya ReactJS sendiri tidak lepas dari penggunaan HTML hanya saja dalam bentuk yang sedikit berbeda yaitu JSX (Javascript Syntax Extension atau Javascript XML). Tetapi dalam hal cara kerja penggunaan tag dan cara kita memanipulasi tampilan web itu masih sama ketika kita menggunakan HTML.

• CSS

Cascading Style Sheets (CSS) adalah styling sheets yang digunakan untuk dapat mempercantik atau memperindah tampilan dari web yang kita buat. Berdampingan dengan penggunaan HTML yang membentuk struktur dari tampilan web itu sendiri, CSS berperan sebagai bagian yang membuat tampilan web menjadi menarik bagi user. Kita harus mengerti dasar penggunaan dari CSS seperti penggunaan selector, property styling untuk warna, layout untuk dapat menggunakan React JS sebagai fungsi utamanya untuk membangun user interfaces yang menarik. Walaupun saat ini sudah banyak library seperti bootstrap, material UI dan lainnya yang dapat mempermudah kita dalam hal styling tampilan web tetapi kita tetap harus mengerti dasar dari CSS untuk dapat menggunakan tools-tools tersebut dengan baik dan maksimal.

• Javascript

Javascript adalah bahasa pemrograman yang digunakan untuk pengembangan web agar menjadi lebih dinamis dan interaktif. Sama halnya seperti bahasa pemrograman yang lain javascript ini memiliki dasar-dasar teknis seperti variable, loop, logic, function dan OOP (Object Oriented Programming) dalam penggunaannya. Sehingga apabila kita telah memiliki basic skill programming maka kita akan lebih cepat dalam belajar Javascript. Kita tinggal membutuhkan untuk mempelajari syntax dan function-function dari Javascript yang digunakan untuk memanipulasi DOM (Document Object Model) sehingga kita dapat membuat tampilan web yang lebih interaktif dan dinamis yang jauh lebih menarik bagi user.

Melanjutkan dari 2 teknologi sebelumnya yaitu HTML yang menjadi struktur web, CSS yang menjadi style dari tampilan, maka Javascript ini yang menjadi aktor yang mengatur perilaku dari tampilan web itu sendiri. Kita harus mengerti Javascript untuk dapat menggunakan React JS karena basis kode dari ReactJS itu sendiri adalah menggunakan Javascript sehingga untuk syntax dan logic yang digunakan untuk memanipulasi DOM semuanya mengikuti Javascript.

Pengoperasian ReactJS

Agar dapat memulai menggunakan ReactJS maka kita perlu melakukan langkah-langkah di bawah ini:

1. Install Node.js versi terbaru (https://nodejs.org/en/)
2. Cek apakah Node.js sudah terinstall, tulis pada terminal (node -v) (apabila muncul versi dari node.js maka dapat lanjut ke step berikutnya)
3. Tulis pada terminal (npx create-react-app my-app) command ini akan menginisialisasi pembuatan folder my-app yang berisi dependency yang dibutuhkan untuk menggunakan ReactJS
4. Apabila telah berhasil terinstall maka selanjutnya tulis command (cd my-app) lalu dijalankan dengan command (npm start) di terminal maka web app akan dijalankan pada localhost:3000 di web browser kita
5. ReactJS telah berhasil terinisialisasi dan siap digunakan.

Dalam proses development membangun UI kita dapat menggunakan function ataupun class komponen di dalam React JS.

Contoh Function Komponen:

Contoh Class Komponen:

Dengan menggunakan function atau class komponen kita dapat membangun user interfaces sesuai yang diinginkan dengan lebih mudah dan cepat. Selamat mencoba !

Apa yang dihasilkan dari ReactJS

React JS biasa digunakan sebagai basis kode untuk membangun Single Page Applications (SPA). SPA adalah aplikasi web atau halaman web yang yang berinteraksi dengan user dimana secara dinamis menulis ulang halaman web tersebut tanpa perlu mereload ulang seluruh halaman web. Hal ini membuat transisi menjadi lebih cepat dan meningkatkan user experiences. Pada SPA ini refresh halaman web tidak terjadi, tetapi resource secara dinamis ditambahkan pada halaman web sehingga halaman web menjadi interaktif.

Beberapa top perusahaan yang menggunakan React JS berdasarkan tatvasoft: (https://www.tatvasoft.com/outsourcing/2022/02/top-10-successful-companies-using-react-js.html)

• Dropbox
• Instagram
• Airbnb
• Discord
• Walmart
• Skype
• Pinterest

KESIMPULAN

Kamu tertarik atau bahkan punya mimpi untuk berkarir di dunia Programming sebagai seorang Programmer? ini tandanya kamu cocok kalau kamu gabung di Coding.id dan bekali dirimu dengan tepat to be a professional tech talent! Klik disini untuk melakukan pendaftaran sekarang juga!