lifelong learner — urip iku urup, currently working on accenture.

React – Perbandingan, installasi & Helloworld

0
Degananda.com -

Overview

React adalah framework frontend yang dibuat dengan javascript untuk membuat SPA(Single page application) seperti halnya angular dan vue. Berbeda dengan google yang didukung oleh google react merupakan framework besutan dari facebook. Pada ulasan ini akan dibahas mengenai :

  1. Installasi react
  2. Menuliskan hello world menggunakan react

Sebelum lebih dalam membahas mengenai dua hal tersebut, perlu diketahui terlebih dahulu kekurangan dan kelebihan react dibandingkan dengan angularjs (angular 4). Mengapa angular? karena popularitas keduannya yang tertinggi dibanding framework SPA Lainnya. Namun bukan bearti framework lainnya tidak bagus, kami hanya fokus ke framework yang populer saat ini.

React vs Angular

Berdasarkan dari beberapa literatur dan halaman resmi angular dan react dapat diambil sebuah overview mengenai kelebihan kekurangan angular dan react.

Variabel React Angular
Perusahaan pendukung facebook google
Tipe framework MVC MVC
Data binding One way data binding Two way databinding
Bahasa yang digunakan Javascript + JSX Javascript(typescript) + HTML

Berdasarkan tabel komparasi diatas kita akan berfokus pada dua buah variabel yakni data binding dan bahasa yang digunakan. Dari segi data binding kita tahu bahwa React menggunakan one way databinding (untuk mengetahui mengenai data binding dapat melihat di : https://degananda.com/2017/05/19/chapter-2-directive-pipe-custom-pipe-angular-2-tutorial-bahasa/) sedangkan angular menggunakan two way data binding.

Sehingga hanya berdasarkan satu variabel tersebut dapat kita ambil kesimpulan/hipotesis bahwa react akan lebih cepat daripada angular. Karena angular menggunakan two way data binding otomatis akan melakukan watch terhadap seluruh perubahan pada DOM, react tidak melakukan itu , sehingga react jauh lebih cepat. Kemudian beralih pada variabel kedua yakni Bahasa yang digunakan, angular 2  menggunakan javascript(typescript) dan html sedangkan react menggunakan jsx dan javascript. Kali ini menurut pendapat pribadi kami, javascript dan typescript tidak terlalu signifikan perbedaannya namun jsx dan html memiliki perbedaan yang signifikan.

Sehingga, angular lebih mudah untuk dipelajari karena hanya perlu belajar mengenai typescript which is itu hanyalah superset dari javascript. Sehingga kesimpulannya adalah :

  1. Angular lebih mudah dipelajari
  2. React memiliki performa yang lebih cepat dibandingkan angular.

Jika anda ingin framework frontend yang cepat namun juga ingin mempelajari jsx maka ulasan ini dapat anda ketahui. Namun jika tidak kami merekomendasikan untuk mempelajari angular.

Installasi

sebelum melakukan installasi pada local machine / laptop / pc anda pastikan telah terinstall nodejs. Dikarenakan react menggunakan NPM. Jika sudah, maka install create-react-app dengan menggunakan NPM dengan menggunakan parameter -g (install global ke operating system)  / global packages.

npm install create-react-app -g

Jika menggunakan OSX atau linux gunakan sudo agar terhindar dari permission conflict karena npm dengan parameter -g membutuhkan root privilages. Setelah itu buat project react dengan menggunakan perintah :

create-react-app [nama_aplikasi]

tunggu hingga beberapa menit karena create-react-app akan mempersipakan semuannya melalui cloud. (tergantung dari koneksi internet).

setelah selesai maka pindah ke folder project react yang baru saja kita buat

cd ./note-app

dan kemudian jalankan npm install untuk menginstall modul / package-package yang dibutuhkan oleh react.

npm install

maka project react telah siap untuk dikerjakan / coding. Berikut ini adalah struktur direktori dari react setelah melakukan npm install. Kita akan membahas mengenai struktur dari react diulasan selanjutnya mengenai react.

Running development server

kita dapat menjalankan react pada browser dengan menjalankan development server. Perintah yang digunakan untuk menjalankan server adalah

npm start

setelah menjalankan perintah diatas maka browser akan membuka localhost dengan port : 3000

pada browser akan terbuka halaman localhost:3000 sesuai yang tertera pada console (terminal/cmd).

Helloworld

untuk membuat hello world, maka yang harus kita ubah adalah file app.js pada folder src. Tuliskan kode dibawah ini untuk menampilkan helloworld pada browser(tentunnya setelah menjalankan development server).

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  
  render() {
    return (
      <div className="App">
        <div className="App-header">
          Hello world 😀 😀 :D,
          ini aplikasi react pertama saya.
        </div>
      </div>
    );
  }
}

export default App;

hasilnya pada browser

done ~ Bahkan didevelopment server inipun react memiliki performa yang sangat cepat. Dengan ini maka kita telah berhasil menuliskan hello world pada react. Ulasan selanjutnya akan membahas lebih dalam mengenai react.