Tutorial ReactJS Pengenalan dan Installasi

Pengenalan React

Mari kita pahami konsep React dengan contoh berikut. Katakanlah kalian mempunyai akun sosial media seperti Instagram, sekarang kalian men-like sebuah postingan dan kalian mulai mengecek komentar juga. Sekarang saat kalian menulusuri komentar, Kalian dapat melihat bahwa jumlah like telah menigkat, karena Kalian memberikan like pada postingan tersebut, bahkan tanpa memuat ulang halaman. Perubahan ajaib tersebut dapat terjadi karena React JS.

React adalah sebuah library JavaScript yang deklaratif, efisien dan fleksibel untuk membangun sebuah interface. ReactJS adalah library open-source yang di kembangkan oleh Meta(induk perusahaan Facebook) kalian dapat mengunjungi akun Github mereka di https://github.com/facebook/react/, React adalah sebuah library berbasis komponen yang bertanggung jawab hanya pada interface sebuah aplikasi.

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.

Keunggulan React

Agak aneh rasanya jika menggunakan sebuah teknologi tanpa mengetahui keunggulan mereka, berikut adalah beberapa keunggulan yang ditawarkan oleh ReactJS.

• 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 Kalian 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, Kalian bisa menuliskan “layaknya” sintaks HTML di dalam kode JavaScript. Hal yang mustahil dilakukan oleh JavaScript standar saat ini. Karena itu, Kalian 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, Saya 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.

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

Alasan Menggunakan ReactJS

Saya sendiri menyukai React karena memiliki ukuran yang cukup kecil sehingga tidak membuat "Gemuk" ukuran sebuah kode apabila menggunakanya. saya juga suka dengan sifat component React yang dapat memangkas banyak kode yang berulang.

Mungkin beberapa alasan diatas cukup teknikal dan agak sedikit sulit dipahami oleh seorang pemula yang baru mulai belajar React, mari kita lihat dari sudut pandang lain.

Popularitas

Mulai dari setahun saat pertama kali di luncurkan hingga sekarang React masih menjuarai popularitas pada kategori Library Frontend.

Bahkan saat artikel ini di tulis di Repositori React pun mendapatkan bintang sebanyak 192ribu. dan menjadi dependencies terhadap 9 juta lebih repository terbuka di GitHub. Luar biasa!

Komunitas

Dengan popularitas yang tinggi tentu saja komunitas pun cukup banyak, karena Komunitas menjadi salah satu hal penting dalam mengembangkan tools, atau teknologi, komunitas juga dapat berperan sebagai wadah untuk terus berkembang, beberbagi ilmu, tanya jawab, dan bertemu teman yang sedang mempelajari hal yang sama.

Menurut Tim dari React sendiri selalgu menjaga agar komunias React selalu sehat dan aktif. Bahkan pada situs resmi React, komunitas memiliki halaman web tersendiri, yang kalian bisa kunjungi di : Where To Get Support .

“React has a community of millions of developers”

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

Pengguna React

Selain komunitas yang besar React juga di gunakan oleh banyak perusahaan, Unicorn, maupun StartUp/Perusahaan Rintisan. perushaan unicorn yang menggunakan React adalah Instagram, Whatsapp, Facebook. Selain platform Meta itu sendiri, masih banyak lagi seperti Netflix, Yahoo, Discord, dan banyak platform sukses lain yang menggunakan React.

Di indonesia sendiri cukup banyak perusahaan besar yang menggunakanya.

Bagaimana makin tertarik belajar React?

Persiapan Installasi

Setelah mengetahui beberapa keunggulan dan alasan kita menggunakan react mari kita liahat persiapan apa saja yang dibutuhkan.

Sebelum menggunakan react ada beberapa hal yang harus disiapkan. Berikut adalah beberapa hal yang harus miliki:

1. Pastikan kalian telah menginstal NodeJS versi 8.10 keatas, kalian dapat mendownloadnya pada link berikut https://nodejs.org/.
2. Pastikan Npm memiliki versi 5.6 keatas.

   Note: npm telah otomatis terinstal apabila kalian menginstal NodeJS.).

3. Pastikan telah menginstall teks editor, seperti VSCode, sublime dsb.
4. Telah mempelajari tentang HTML dasar, JavaScript lanjutan / ES6.
5. Memahami penggunaan Command Promp/Terminal

Jika semua syarat terpenuhi, kalian telah siap membuat project dengan Reactjs.

Installasi

Jalan kan perintah berikut untuk melakukan installasi:

 npx create-react-app latihan 

atau bisa juga:

npm install -g create-react-app create-react-app latihan  
  

Perintah di atas akan menginstall create-react-app secara global, dengan demikian kalian dapat menggunakan perintah `create-react-app` tanpa menambahkan perintah npx lagi.

note: kalian dapat menamai react app kalian dengan nama apapun, disini saya menggunakan nama latihan 

Jika telah berhasil maka akan muncul tampilan seperti ini pada terminal/cmd kalian.

203 packages are looking for funding
  run `npm fund` for details

Success! Created latihan1 at D:\project\Belajar Framework\React\latihan\latihan1
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd latihan
  npm start

Happy hacking!

Kemudian Masuk ke folder latihan dengan cara:

cd latihan

Lalu untuk menjalankan project gunakan perintah:

 npm start 

Wholaa !! JIka berhasil maka akan tampil jendela browser seperti berikut: !

Mungkin itu saja Tutorial ReactJs pada kesempatan kali ini, kalian telah berhasil membuat project pertama kalian menggunakan React.

Sekian dulu, semoga bermanfaat dan terimakasih ❤️

Baca juga :