Modul 1-2. React JS Setup Tools

Halo teman-teman selamat datang kembali di Course React JS bersama Nusantech Academy 🙂 .

Pada chapter sebelumnya telah dijelaskan tentang overview course. Kami harap teman-teman sudah mempunyai sedikit gambaran tentang course ini. Pastinya course ini akan sangat menyenangkan, tidak membosankan, dan tentunya bermanfaat.

Pada chapter ini akan dijelaskan tentang tools apa saja yang teman-teman perlukan untuk membuat aplikasi web dengan React JS. Yuks simak terus ya chapter ini 🙂

Tools

Berikut tools yang teman-teman perlukan untuk membuat aplikasi web dengan React JS.

1. Browser

Pada pengembangan aplikasi web, browser berfungsi sebagai compiler atau eksekutor dari program yang telah kita buat. Beberapa browser yang mendukung kita dalam melakukan pengembangan aplikasi web, di antaranya Google Chrome, Mozilla Firefox, Opera, Internet Explorer, dan lain-lain.

Berikut daftar browser beserta link downloadnya.

• Google Chrome
  Link download: https://www.google.com/intl/id_id/chrome/

• Mozilla Firefox
  Link download: https://www.mozilla.org/id/firefox/new/

• Opera
  Link download: https://www.opera.com/id

• Internet Explorer
  Link download: https://www.microsoft.com/en-us/download/details.aspx?id=41628

Untuk cara instalasi browser sangatlah mudah, berikut langkah-langkahnya.

1. Klik tombol ‘Download’ pada masing-masing website browser yang dipilih.
2. Jalankan file yang terunduh.
3. Ikuti langkah-langkah instalasinya dan browser siap untuk digunakan.

2. Text Editor

Text Editor berfungsi untuk membuat atau mengedit program pada aplikasi web yang kita buat. Beberapa Text Editor yang bisa kita gunakan, di antaranya Visual Studio Code, Sublime Text, NotePad++, Intellij IDEA, dan lain-lain. Pada course ini, Text Editor yang digunakan adalah Visual Studio Code. Kami menyarankan teman-teman untuk menggunakan Visual Studio Code karena lebih ringan, terdapat berbagai extensi yang membantu teman-teman dalam menulis kode, dan demi kelancaran selama mengikuti course ini.

Link download: https://code.visualstudio.com

Untuk cara instalasi Visual Studio Code sangatlah mudah, berikut langkah-langkahnya.

1. Klik tombol ‘Download’ pada halaman Visual Studio Code.
2. Pilih OS yang sesuai dengan komputer teman-teman.
3. Jalankan file yang terunduh.
4. Ikuti langkah-langkah instalasinya dan Visual Studio Code siap untuk digunakan.

Untuk mempermudah teman-teman dalam menulis kode, Visual Studio Code menyediakan banyak extensi yang bisa teman-teman gunakan. Berikut extensi yang kami sarankan untuk teman-teman gunakan.

• Prettier

Prettier merupakan extensi yang digunakan untuk memformat dan merapikan kodingan kita sesuai dengan aturan yang ditentukan. Aturan formatting tersebut dapat kita custom sesuai dengan yang kita inginkan. Sebagai contoh, dalam aturan Prettier kita menghendaki adanya semicolon di setiap akhir statement, maka jika kita lupa menambahkan semicolon, Prettier akan menambahkannya secara otomatis.

Untuk cara instalasi Prettier sangatlah mudah. Berikut langkah-langkahnya.

1. Klik Tombol Extensions di bagian side button Visual Studio Code.
2. Kemudian ketik Prettier di kolom search.
3. Klik install maka Prettier akan terinstall dan siap untuk digunakan.

• Eslint

Eslint merupakan extensi yang digunakan untuk mengecek kesesuaian kodingan dengan aturan yang telah ditentukan. Bedanya dengan Prettier ialah Eslint tidak melakukan formatting pada kodingan yang tidak sesuai dengan aturan. Eslint hanya memberi tanda atau mark pada kodingan yang tidak sesuai dengan aturan.

Cara install Eslint sangatlah mudah, berikut langkah-langkahnya.

1. Klik Tombol Extensions di bagian side button Visual Studio Code.
2. Kemudian ketik Eslint di kolom search.
3. Klik install maka Eslint akan terinstall dan siap untuk digunakan.

• Material Icon Theme

Extensi ini berfungsi untuk menambahkan icon pada file dan folder. Icon pada file berbeda berdasarkan file extensinya. Sedangkan pada folder, icon berbeda berdasarkan fungsi foldernya.

Cara install Material Icon Theme sangatlah mudah, berikut langkah-langkahnya.

1. Klik Tombol Extensions di bagian side button Visual Studio Code.
2. Kemudian ketik Material Icon Theme di kolom search.
3. Klik install maka Material Icon Theme akan terinstall dan tampilan file dan folder akan berubah.

3. Node JS

Link download: https://nodejs.org/en/download/

Node JS merupakan perangkat lunak yang biasa digunakan untuk membangun aplikasi web. Node JS menggunakan bahasa pemrograman Javascript. Dengan adanya Node JS kita dapat running Javascript diluar browser loh.

Cara install Node JS sangatlah mudah, berikut langkah-langkahnya.

1. Download file installer pada halaman download Node JS (pilih yang sesuai dengan OS komputer teman-teman ya).
2. Jalankan file yang sudah diunduh.
3. Ikuti langkah-langkah instalasinya.
4. Selamat Node JS sudah terinstall di komputer teman-teman.

Alternatif lain menginstall Node JS

Install & Update Script

To install or update nvm, you should run the install script. To do that, you may either download and run the script manually, or use the following cURL or Wget command:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash

Setelah proses download dan install nya selesai, kita tutup dulu Terminal nya, lalu di buka lagi Terminal nya dan verify nvm nya.

Verify Installation

To verify that nvm has been installed, do:

command -v nvm

Usage

To download, compile, and install the latest release of node, do this:

nvm install node # "node" is an alias for the latest version

To install a specific version of node:

nvm install 6.14.4 # or 10.10.0, 8.9.1, etc

To install LTS Version

nvm install --lts

4. Git

Link download: https://git-scm.com/downloads

Pada course ini Git digunakan untuk menyimpan dan mengelola project-project yang teman-teman buat. Fungsi utama git, yaitu mengatur versi dari kodingan yang teman-teman buat dengan memberikan tanda pada baris atau kode mana yang teman-teman ubah.

Cara instalasi Git sangatlah mudah, berikut langkah-langkahnya.

1. Windows

• Download file installer pada halaman download Git.
• Jalankan file tersebut.
• Ikuti langkah-langkah instalasinya.
• Selamat Git sudah terinstall di komputer teman-teman.

2. Linux

• Buka Terminal.
• Jalankan perintah berikut.

(Ubuntu/Debian)

sudo apt-get install git

(Fedora)

yum install git

• Selamat Git sudah terinstall di komputer teman-teman.

3. Mac OS

• Install homebrew.
• Jalankan perintah berikut.
• Selamat Git sudah terinstall di komputer teman-teman.

$ brew install git

Penutup

Sekian teman-teman tentang Setup Tools React JS bersama Nusantech Academy. Pada chapter selanjutnya, kita akan memasuki materi React JS nih, pasti sudah tidak sabar lagi kan? Ikuti terus course ini ya teman-teman. Tetap semangat dan sampai jumpa di chapter selanjutnya. See you 🙂