Tentang react dan bagaimana cara menggunakan react

Apa itu react?

React adalah salah satu javascript library yang digunakan untuk membuat user interfaces (tampilan web). Reactjs awalnya dibuat oleh Jordan Walke yang merupakan karyawan Facebook. Ia merilis prototipe pertama Reactjs dengan nama “FaxJS” dan terinspirasi dari XHP.

Seiring berjalannya waktu, Facebook menjadi semakin kompleks. Ada banyak bagian yang harus sering diupdate seperti news feed, chat list, chat box dls. Karena menggunakan cara tradisional dengan memanipulasi DOM dianggap terlalu banyak menggunakan resource, akhirnya FB memutuskan untuk menggunakan Virtual DOM yang katanya lebih cepat.

Bagaimana cara menggunakan react?

Berikut langkah-langkah untuk menggunakan react di windows 10:

• Install node.js seperti dijelaskan disini
• Masuk ke command prompt dengan perintah cmd
• Install create-react-app dengan perintah berikut:

npm install -g create-react-app

• Option -g berarti kita menginstall react di global. Ini artinya kita tidak perlu menginstall lagi untuk pembuatan proyek create berikutnya.
• Buat reactapp misalnya dengan nama frontend

create-react-app frontend

• Masuk ke folder frontend dengan perintah: cd frontend
• Untuk mengintegrasikan beberapa komponen react dengan bootstrap kita meggunakan reactstrap dan bootstrap css. Install dengan perintah berikut:

npm install --save reactstrap react react-dom
npm install bootstrap -S

• Jalankan node.js server dengan perintah: npm start

Membuat helloworld menggunakan react

Saatnya kita praktek. Disini kita akan membuat aplikasi sederhana menggunakan react. Apakah aplikasi itu? Yap, Helloworld. Begini langkah-langkah yang perlu dilakukan untuk membuat Helloworld dengan react.

• Buat reactapp dengan nama helloworld

create-react-app helloworld

• Perintah diatas akan melakukan installasi beberapa package untuk react app (react, react-dom, react-script)
• Setelah installasi package selesai, masuk ke folder proyek: cd helloworld
• Jalankan perintah: npm start.
• Muncul tampilan default react js seperti berikut:

• Untuk membuat helloworld buka file src/App.js
• Tambahkan baris berikut dibawah script img

<h1>Helloworld</h1>

• Berikut tampilan react js setelah menambahkan helloworld

Voila… kita sudah berhasil membuat aplikasi react helloworld pertama kita.

Beberapa Error pada Reactjs

Berikut beberapa error yang sering ditemui ketika menjalankan Reactjs.

npm ERR! code ENOLOCAL

Untuk error seperti ini, solusinya adalah:

npm cache verify
npm install -g create-react-app