Perkenalan dan Instalasi React JS (Seri : Mudah Belajar React JS Bagian 1)

 

Bismillah…
Postingan pertama ini saya akan membahas mengenai React.JS. Postingan ini nantinya insyaAllah akan bersambung ke bagian-bagian berikutnya yang akan membahas React.JS mulai dari tahapan awal instalasi sampai kepada penggunaan React.JS sebagai pure Front End yang akan terhubung dengan API yang nantinya akan saya tulis dengan Go Lang sebagai Back End nya insyaAllah.

Baiklah, pada postingan pertama ini kita akan membahas sedikit mengenai apa itu React.JS, apa keunggulannya, serta bagaimana cara membuat project-nya sendiri. React.JS itu sendiri adalah sebuah library/pustaka javascript yang dibuat oleh Facebook yang tujuannya adalah untuk mempermudah dalam membangun user interfaces sebuah website.

Dengan menggunakan library ini, tampilan website yang kita buat lebih terlihat dinamis dan ringan saat digunakan oleh users/pengguna. Kemudian dari sisi pengkodean aplikasi, untuk membuat perubahan atau memperbahrui tampilan akan menjadi jauh lebih mudah dibandingkan menggunakan library javascript yang lain seperti jQuery.

• Menginstal Node.js
Oke, sebelum mulai membuat aplikasi menggunakan React.JS, terlebih dahulu kita harus menginstal beberapa tools yang dibutuhkan. Disini saya menggunakan paket javascript dari npm (Node Package Manager), sebenarnya anda juga bisa menggunakan yarn yang juga sama seperti npm. Nah, untuk menjalankan npm kita membutuhkan node.js. Jika anda belum mengetahui apa itu node.js. Node.js itu sendiri adalah runtime environment yang digunakan untuk menjalankan aplikasi berbasis website. Dengan node.js anda bisa menjalankan aplikasi dengan bahasa javascript disisi server.

Berikut adalah langkah-langkah untuk menginstal node.js :
1. Download node.js disitus resminya di https://nodejs.org/en/download/
2. Pilih installer sesuai dengan sistem operasi yang anda gunakan. Disini saya menggunakan Windows. Untuk versi node.js terbaru di windows, hanya bisa dijalankan di windows versi 8.1 keatas.
   
   
   
   
   
3. Setelah selesai men-download installer diatas, lakukan proses penginstalan seperti biasanya.
4. Cek apakah node.js anda berhasil terinstal atau tidak. Caranya adalah buka Command Promp/Terminal kemudian ketikkan : npm -v
   Jika muncul seperti berikut ini maka, proses instalasi node.js anda sudah berhasil
   
   
   
   
   Seperti terlihat diatas, jika berhasil akan muncul versi dari node.js yang kita gunakan.
   
   
• Memulai React js
Setelah berhasil menginstal node.js. Langkah selanjutnya adalah kita akan mulai membuat sebuah project react.js. Pertama-tama sebelum membuat project react.js anda terlebih dahulu harus menginstal modul create-react-app melalui npm atau yarn.
Pada contoh ini saya akan menggunakan npm.

Berikut adalah langkah-langkahnya :
1. Buka Command Prompt/Terminal anda, kemudian ketikkan : npm install -g create-react-app kemudian ‘Enter’
   
   
   
   
   
2. Tunggu hingga proses instalasi selesai
3. Setelah selesai, lakukan pengecekan apakah instalasi berhasil atau tidak dengan mengetikkan di di Command Prompt/Terminal : create-react-app --version
4. Jika berhasil akan muncul seperti berikut ini
   
   
   
   
   
Oke, setelah selesai proses penginstalan modul javascript diatas, selanjutnya kita akan mencoba membuat project pertama kita di React.JS.
Sebelumnya siapkan terlebih dahulu direktori/folder dimana nantinya anda akan menyimpan project React.JS tersebut. Disini saya menyimpan di direktori ‘F:\blog\React JS\Project’.

Jika sudah selesai membuat direktori project anda, sekarang saatnya kita mulai membuat project dengan React.JS. Berikut adalah langkah-langkahnya :

1. Buka Command Prompt/Terminal, dan arahkan ke direktori yang sudah anda buat sebelumnya.
   
   
   
   
   
2. Untum membuat project baru ketikkan : create-react-app <nama-project>
3. Misalnya disini saya akan membuat sebuah project baru dengan nama “belajar-react”, maka di Command Prompt/Terminal ketik seperti berikut ini : create-react-app belajar-react kemudian ‘Enter’.
4. Tunggu hingga proses pembuatan project tersebut selesai.
5. Sampai disini, proses pembuatan project baru di React.JS selesai. Selanjutnya untuk menjalankan aplikasi yang sudah kita buat caranya adalah masuk ke direktori project yang sudah dibuat tersebut dengan mengetikkan : cd belajar-react
6. Setelah masuk ke direktori tersebut, selanjutnya ketikkan : npm start
7. Taraaa !!! sekarang anda sudah berhasil membuat project dari React.JS anda
   
   
   
   
   

Untuk postingan kali ini insyaAllah sudah cukup, dipostingan selanjutnya insyaAllah kita akan membahas lebih detail lagi bagaimana cara membuat aplikasi menggunakan React.JS ini.

loading...