STEP 3 : Install React

Langkah ini cukup mudah kita hanya perlu mengetik command seperti dibawah ini.

npm install -g create-react-app

1	npm install -g create-react-app

Setelah selesai buat folder baru beri nama belajar-react dan masuk ke folder tersebut lalu klik kanan dan pilih Open Babun here lalu ketik perintah dibawah ini.

create-react-app first-react

1	create-react-app first-react

Screenshot:


Tunggu proses installasi selesai dan akan muncul seperti gambar dibawah ini.


Setelah itu masuk ke folder first-react dengan mengetik command dibawah ini.

cd first-react

1	cd first-react

Setelah itu mari kita jalankan apps firs-react kita dengan mengetik command dibawah ini.

npm start

1

npm start

Screenshot:



Oke setelah itu kita akan melihat first-react kita di tab browser seperti ini.


Selamat sekarang kamu telah mempunyai apps pertama react. Mungkin masih ada yang belum di mengerti sampai disini? pasti maka dari itu di tutorial selanjutnya kita akan membuat sebuat apps Countdown atau penghitung waktu mundur dimana kalian akan mulai memasuki life cycl- nya React.



Jika kalian mengalami kesulitan dan ada yang mau ditanyakan, silahkan comment di bawah ini. Jika tutorial ini dirasa bermanfaat silahkan dishare ya. Happy Koding 😀

STEP 2 : Install NodeJs

Apa itu NodeJS

Sebagai Web Developer, akhir-akhir ini kita sering mendengar NodeJS. Sudah banyak developer yang memakai platform ini. Sebenarnya, apa sih NodeJS? Mari kita pelajari lebih jauh mengenai NodeJS.
Menurut situs resminya (nodejs.org), NodeJS adalah sebuah platform pemrograman yang dibuat di atas JavaScript Runtime-nya Chrome. Maksudnya, script yang ditulis untuk server akan berjalan dengan cara yang hampir sama seperti ketika di peramban.
Semua kodingan JavaScript bisa diaplikasikan pada NodeJS ini. Kelebihan dari NodeJS yang paling bermanfaat ialah pemrograman asynchronous. Artinya, semua kodingan akan dieksekusi secara bersamaan, tidak menunggu sintaks yang diatasnya selesai, tidak berurutan dari atas ke bawah seperti pemrograman yang lain. Hal ini lah yang membuat performa NodeJS itu cepat.
Selain asynchronous, NodeJS memiliki banyak kelebihan lain yang bisa menjadi alasan kenapa kita memakai NodeJS bukan yang lain. Berikut adalah kelebihan dari NodeJS.

• Menggunakan Bahasa JavaScript
  Penggunaan JavaScript sebagai codingnya tentu alasannya agar para pengguna menjadi lebih mudah dalam mempelajari dan menggunakan NodeJS sebagai pemrograman back-end­-nya, mengingat Javascript merupakan bahasa yang cukup mudah untuk dipelajari.
• Bisa digunakan untuk membuat Aplikasi Realtime (Realtime Application)
• Open Source
  NodeJS memiliki lisensi open-source yang artinya kita dapat mengetahui bagaimana proses aplikasi dieksekusi, bahkan mengubah prosesnya tanpa membayar atau izin terlebih dahulu kepada pengembangnya. Dengan kata lain, kita bisa mengotak-atik scriptnya sesuai dengan kebutuhan secara bebas.
• Mendukung Penyimpanan Sementara
  NodeJS mampu menyimpan data-data secara sementara berupa cache, sehingga data-data tersebut dapat diakses kembali dengan waktu yang sangat cepat. Inilah yang membuat NodeJS lebih ringan daripada platform yang lain.
• Mendukung JSON
  JSON merupakan standar untuk bertukar data yang paling populer saat ini sehingga penggunaan data-data dari pihak ketiga akan menjadi sangat mudah.
• Database NoSQL
  Aplikasi yang dibuat dengan menggunakan NodeJS ini bisa terhubung dengan Database yang berjenis NoSQL. Artinya, kita dapat lebih mudah mengelola data yang tersimpan. Untuk aplikasi database-nya bisa menggunakan MongoDB atau CouchDB yang karena mendukung Javascript.
• Uptodate
  NodeJS menggunakan V8 yang selalu update standar ECMAScript. Jadi, semua fitur-fitur yang ada di NodeJS pasti bisa dijalankan di semua jenis peramban.

Dengan memakai NodeJS kita bisa membuat sebuah aplikasi web yang sangat keren. Biasanya NodeJS ini dipakai oleh para pengembang aplikasi untuk kebutuhan IoT. Keren bukan? Untuk yang sederhana, kita bisa membuat sebuah aplikasi video call dengan memakai NodeJS ini.

Download Installer

Sebelum memasang dan mulai menggunakan NodeJS, kita harus memiliki installernya terlebih dahulu yang bisa didownload secara gratis dari situs resminya langsung: https://nodejs.org/en/ atau  https://nodejs.org/en/download .

Jalankan Installer

Setelah selesai didownload maka jalankan installernya. Seperti kalau mau menginstall aplikasi, klik 2 kali installernya, jika muncul UAC ijinkan saja. Nanti akan muncul jendela wizard seperti di bawah ini. Klik Next untuk lanjut ke bagian selanjutnya.





Sampai di sini kita diminta untuk menentukan lokasi dimana NodeJS akan dipasang. Jika sudah atau tidak ingin merubah lokasi penyimpanan klik Next saja.


Kemudian, kita tentukan komponen apa saja yang akan dipasang. Biarkan saja seperti defaultnya agar full installation. Klik Tombol Next lagi.


Kita klik “Install” saja untuk melanjutkan. Jika muncul UAC maka ijinkan saja dan proses pemasangan berjalan.


Setelah instalasi selesai maka akan muncul seperti gambar di bawah ini. Silahkan klik “Finish” untuk menyelesaikan proses pemasangan NodeJS.




Nah, sekarang proses instalasi NodeJS sudah selesai. Untuk mengecheck apakah NodeJS sudah berhasil terpasang dengan sempurna atau tidak, silahkan membuka command prompt (CMD/Terminal).
Caranya:
Klik tombol windows -> ketik CMD -> tekan Enter



Dan ketik di comand prompt seperti di bawah ini

node -v

1

node -v

Sintaks diatas berfungsi untuk menampilkan versi dari NodeJS yang terpasang. Kalau muncul nomor versi seperti di bawah ini berarti NodeJS sudah terpasang dengan baik dan sudah siap untuk digunakan.


Sampai saat ini kita telah berhasil menginstall NodeJS di windows. Jika tutorial ini dirasa bermanfaat silahkan dishare ya. Happy Koding 😀

PERSIAPAN AWAL - STEP 1 : Install Babun

Sumber Artikel : https://www.kodingindonesia.com/react-js-dan-installasi/

Persiapan Awal :

Setelah mengetahui apa itu React dan Kelebihannya kita akan melanjutkannya ke tahap installasi React. Kita membutuhkan Windows shell untuk mempermudah kita dalam mendevelop aplikasi kedepannya. Windows shell  tersebut adalah Babun. Kita juga membutuhkan NodeJS sebagai server kita nantinya.

STEP 1 : Install Babun

Caranya:
Pertama pergi ke halaman homepage Babun -> http://babun.github.io/ dan klik download now.

Setelah itu extract dan open folder Babun tersebut dan klik install.bat

Tunggu hingga proses installasi selesai, nantinya akan muncul shell seperti ini.

Catatan:
Babun adalah windows shell yang mempunyai fitur agar kita dapat menggunakan command linux di windows 
Selanjutnya kita install dulu fontnya yaitu powerline-font klik di clone or download dan pilih Download zip

Setelah itu extract dan buka folder font tersebut dan klik kanan pada install.ps1 dan pilih run with PowerShell. Tunggu sampe selesai jika ada pilihan ketik “Y” dan tunggu hingga proses selsai.

Selanjutnya buka kembali terminal babun dan klik kanan lalu pilih Option , pilih tab Text.

Lalu klik select, pilih jenis font yang akan kita pakai yaitu Inconsolata-g for Powerline selanjutnya klik OK.

Setelah itu buka kembali terminal babun dan ketik command seperti dibawah ini

nano ~/ .minttyrc

1	nano ~/ .minttyrc

Isi dengan text seperti dibawah ini


Setelah itu tekan tombol CTRL + O lalu isi dengan .minttyrc



Setelah itu tekan tombol ENTER dan ketik “Y” lalu ENTER,
close terminal babun dan buka kembali terminal babun lalu ketik command dibawah ini.

nano .zshrc

1	nano .zshrc

Kita akan mengganti theme default oh-my-zsh dengan theme yang lebih menarik. Kita dapat melihatnya di halaman resmi theme oh-my-zsh disini dan selanjutnya kita akan menggunakan theme agnoster.


Caranya cukup ganti text pada ZSH_THEME=”default” menjadi ZSH_THEME=”agnoster”.


Setelah itu tekan CTRL + O lalu ENTER dan tekan CTRL + X, close terminal babun dan buka kembali terminal babun maka tampilan akan terminal akan berganti seperti dibawah ini.



Sekarang anda telah mempunyai terminal yang memiliki fitur seperti di linux yang akan sangat membantu kita kedepannya dalam mendevelop aplikasi.
Catatan:
Jadi babun ini adalah terminal yang mempunyai fitur agar kita bisa menggunakan command linux di windows,fitur lainnya adalah sudah support git dan shell dan sudah terintegrasi oh-my-zsh . Jika bingung apa itu git dan oh-my-zsh bisa baca-baca di halaman resminya mereka sudah mempunyai dokumentasi yang lengkap, kodingindonesia juga mempunyai tutorial git.

Sumber Artikel : https://www.kodingindonesia.com/react-js-dan-installasi/

Halo kodinger, kali ini kita akan belajar sebuah framework open-source dibagian frontend yang sedang populer, yaitu React JS.

Apa itu React JS?

React Js adalah sebuah library JavaScript yang di buat oleh facebook. React bukanlah sebuah framework MVC. React adalah library yang bersifat composable user interface, yang artinya kita dapat membuat berbagai UI yang bisa kita bagi menjadi beberapa komponen.

Kenapa harus React?

1. Cepat dan Efisien
Karena berbasis komponen maka react hanya perlu me-render  resource yang berhubungan dengan data yang berganti, tidak perlu me-render seluruh resource .
2. Reusable (dapat digunakan berulangkali)
Komponen yang telah kita buat dapat kita gunakan berkali-kali pada saat dibutuhkan. Ini sangat berguna bagi kita untuk mempersingkat waktu dan mengurangi resource yang ada.

3. Library JavaScript
JSX (JavaScript Extension) singkatnya kita dapat menyematkan syntax HTML kedalam Javascript. Ini sangat membantu kita dalam proses development, apalagi dengan adanya  fungsi dari ES6 (Ecma Script).
4. Immutable State
Kita dapat memanajemen state yang ada dengan menggunakan Redux. Kita dapat mengatasi permasalahan mutable state dengan RamdaJs. Untuk state yang berinteraksi dengan API kita dapat menggunakan Redux-Saga.

KESIMPULAN

Mungkin beberapa pembaca masih perlu penjelasan tambahan apa itu React, JSX, Redux, Redux-Saga. Nanti akan dijelaskan ditutorial selanjutnya saat kita membuat project Apps React.
Intinya:
React memberikan segala kemudahan yang dibutuhkan programmer dalam mendevelop sebuah aplikasi yang ringan,cepat dan mudah digunakan. Selain itu ada juga React Native sebuah framework yang bisa kita gunakan untuk mengembangkan aplikasi Android dan IOS sekaligus dengan menggunakan bahasa JavaScript.