3. Belajar ReactJS ( Node, NPM, dan Package.json)

Node.js

Apa itu Node.js ?
Node merupakan lingkungan runtime javascript. Node banyak digunakan dalam pengembangan aplikasi back-end maupun front-end. Node dapat digunakan untuk linting, testing, assembling, dan lainya. Dalam pengembangan aplikasi javascript modern seperti ReactJS, Node sangat penting karena dapat memudahkan dalam proses pengembangan karena dapat melihat langsung hasil dari aplikasi yang sedang berjalan. Node merupakan tool untuk javascript di sisi server. Penjelasan secara detail dapat mengunjungi Node.js. Saudara bisa install melaui package maupun cara lainya. Download Node.JS.

NPM

NPM merupakan package manager default dari Node. Package manager selain NPM yang sangat populer dan banyak digunakan yaitu Yarn. Anda dapat menggunakan salah satu, tapi tutorial disini saya akan menggunakan NPM secara default.

Package.json

Package.json ini digunakan untuk mendeskripsikan pengaturan dari project javascript. Package.json ini memuat tentang nama projek, versi, kontributor, dan lainya.

Mari kita memulai dengan membuat folder baru.

mkdir sinau-react
cd sinau-react

Setelah itu di terminal kita ketik perintah

npm init

. Silahkan diisi. saya tampilkan contohnya

name: (sinau-react)
version: (1.0.0)
description: belajar react dan lingkunganya
entry point: (index.js)
test command:
git repository:
keywords:
author: akhisyabab
license: (ISC)
About to write to /home/akhi/React/React Js/pesonainformatika/sinau-react/package.json:

{
  "name": "sinau-react",
  "version": "1.0.0",
  "description": "belajar react dan lingkunganya",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "akhisyabab",
  "license": "ISC"
}


Is this ok? (yes)

Setelah itu maka otomatis terbentuk file baru bernama package.json. Berisi kode script yang telah kita isi tadi. Disini folder sinau-react kita sebut App, kemudian file package.json berada di root App. jadi misal kita membuat file baru di root berarti file baru tersebut berada sama dengan package.json.

Sekarang kita coba buat file index.js di root. Isikan kode berikut:

console.log("Hai manis :*");

Setelah itu jalankan dengan perintah

node .

Start Scripts

Dalam package.json tambahkan perintah start pada scripts seperti berikut

{
  "name": "sinau-react",
  "version": "1.0.0",
  "description": "belajar react dan lingkunganya",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node ."
  },
  "author": "akhisyabab",
  "license": "ISC"
}

Setelah disimpan, buka terminal kembali kemudian ketik perintah

npm start

Installing menggunakan package NPM

Dalam membangun aplikasi react kita akan menginstall berbagai tool dan library melalui NPM. Sebagai contoh permulaan kita coba install color dengan perintah

npm install --save color

Setelah itu akan terdapat folder baru yaitu node_modules. Folder ini tempat menyimpan tool atau library yang telah kita install. Dalam file package.json pun otomatis akan berubah dengan tambahan script

"dependencies": {
  "color": "^1.0.3"
}

Ada dua jenis yaitu dependencies dan devDependencies. kita menggunakan devDependencies untuk library yang hanya digunakan saat proses develop seperti webpack dan lainya yang akan kita bahas di materi berikutnya.

Cukup sekian postingan kali ini. semoga bermanfaat, sampai jumpa di postingan selanjutnya.

written by @akhi_syabab