Kopidev

If you try to run pod install  or perform a similar task using the command line in macOS may you  face a problem like this

checking whether the C compiler works... no
xcrun: error: SDK "iphoneos" cannot be located
xcrun: error: SDK "iphoneos" cannot be located
xcrun: error: SDK "iphoneos" cannot be located
xcrun: error: unable to lookup item 'Path' in SDK 'iphoneos'

...

configure: WARNING: 'missing' script is too old or missing
configure: error: in `/Users/arryangga/Library/Caches/CocoaPods/Pods/Release/Flipper-Glog/0.3.6-1dfd6':
configure: error: C compiler cannot create executables
See `config.log' for more details

To fix this issue is very simple, you can fix this using the command line, or by using the Xcode application itself.

Using Xcode

  1. make sure Xcode has installed
  2. open Xcode
  3. open Preferences menu
  4. open Locations tab
  5. make sure “Command Line Tools” has an entry. If not, click on the dropdown and select one (preferably the latest version).
  6. save.

Using Command Line macOS

sudo xcode-select --switch /Applications/Xcode.app

Thats it

Untuk menjadi seorang Web Developer atau seorang Front End Developer, ada banyak hal yang harus Anda pelajari. Beberapa di antaranya adalah fundamental html yang dapat anda baca disini dan juga bahasa pemrograman JavaScript.

Pada kesempatan ini, kita akan mempelajari lebih banyak mengenai  bahasa pemrograman JavaScript.

Di halaman ini, Anda akan mendapatkan jawaban untuk pertanyaan-pertanyaan seperti apa itu JavaScript, apa fungsi dari JavaScript, dan pertanyaan-pertanyaan lainnya.

Sudah siap untuk memulai? Mari kita awali dengan pengertian dari JavaScript.

Apa Itu JavaScript?

JavaScript merupakan salah satu bahasa pemrograman tingkat tinggi yang diciptakan untuk membantu Anda menciptakan sebuah halaman web yang lebih interaktif dan menarik seperti menampilkan animasi 3D, audio player, video dan lain sebagainya. 

The Basics of JavaScript. What is JavaScript and why should you… | by UH COSC 4315 Group 4 | Medium

Ada beberapa cara dalam membuat program JavaScript, pertama dengan cara menulis langsung program JavaScript pada sebuah file html dengan cara membuat tag script

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // Tulis kode JavaScript disini
    </script>
</head>
<body></body>
</html>

atau dengan membuat file dengan ekstensi .js yang dihubungkan kedalam file html, kemudian file tersebut akan berjalan otomatis pada saat halaman web dimuat di browser.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="lokasiProgramJavascript.js"></script>
</head>
<body></body>
</html>

Perlu diketahui, bahasa pemrograman JavaScript tidaklah sama dengan bahasa pemrograman Java, karena keduanya merupakan bahasa pemrograman yang sangat amat berbeda 100%.

Jika antara JavaScript dan Java merupakan bahasa pemrograman yang berbeda, mengapa mereka berdua memiliki nama yang mirip ya?

Sejarah Terciptanya JavaScript

Ketika bahasa pemrograman JavaScript diciptakan, nama yang dipilih untuknya bukanlah JavaScript, melainkan LiveScript.

Tetapi karena Java teramat sangat populer pada waktu itu, maka nama yang digunakan untuk bahasa baru inipun kemudian diganti menjadi JavaScript dengan harapan kepopuleran Java dapat mendongkrak JavaScript.

Seiring perkembangannya, JavaScript menjelma menjadi bahasa yang merdeka sepenuhnya dan memiliki spesifikasi tersendiri yang kemudian disebut sebagai ECMAScript.

Sekarang, JavaScript bisa dijalankan baik di browser, server, perangkat mobile atau di perangkat lain yang dilengkapi dengan program khusus bernama JavaScript Engine.

Browser biasanya memiliki sebuah mesin (engine) yang tertanam didalamnya yang disebut “JavaScript Virtual machine”. Setiap browser memiliki jenis engine yang berbeda walaupun saat ini ada beberapa browser dengan engine yang sama. Berikut contohnya:

Bagaimana mesin JavaScript di atas bekerja?

Perhatikan beberapa langkah di bawah ini.

Pada setiap langkah dalam memproses file JavaScript, mesin JavaScript (JavaScript Engine) akan melakukan optimisasi. Mesin bahkan sanggup melihat code yang sedang diubah ketika masih dijalankan.

Selain itu, mesin JavaScript juga mampu menganalisa data yang mengalir melalui engine. Selanjutnya, mesin akan mengoptimalkan kode JavaScript yang dieksekusi.

Kemampuan JavaScript

JavaScript merupakan bahasa pemrograman yang cukup aman. Apa maksudnya? JavaScript ini tidak menyediakan akses tingkat rendah ke Central Processing Unit atau ke memori karena ketika diciptakan, tujuannya adalah untuk digunakan oleh browser yang tidak membutuhkan akses tingkat rendah.

Kemampuan JavaScript bergantung pada lingkungan dimana ia dijalankan. JavaScript dalam browser atau yang biasa disebut dengan in-browser JavaScript sanggup melakukan banyak hal yang berhubungan dengan manipulasi halaman situs web, interaksi dengan pengguna, dan juga server web.

Berikut beberapa hal yang dapat dilakukan oleh JavaScript dalam browser:

Meskipun sanggup melakukan berbagai hal, in-browser JavaScript atau JavaScript dalam browser juga dibatasi dalam beberapa hal.

Batasan yang Diterapkan Pada In-Browser JavaScript

Demi keamanan para penggunanya, kemampuan yang dimiliki oleh in-browser JavaScript telah dibatasi. Hal ini bertujuan untuk mencegah halaman situs web yang jahat untuk mencuri informasi pribadi pengguna dan merusak data yang dimiliki oleh pengguna. Pembatasan yang diberlakukan dalam in-browser JavaScript antara lain adalah:

Read & Write File Didalam Hard disk

JavaScript tidak diizinkan untuk membaca serta menulis file secara sembarangan di hardisk. JavaScript juga tidak boleh menyalin file serta menjalankan program. JavaScript tidak memiliki akses secara langsung ke berbagai fungsi dalam sistem operasi. Browser terbaru secara terbatas memperbolehkan JavaScript untuk melakukan tindakan dengan melibatkan file.

Akses Mikrofon & Kamera

JavaScript memerlukan izin dari pengguna untuk mengakses mikrofon serta kamera dan perangkat lain yang terhubung dengan browser. Halaman yang mengaktifkan JavaScript tidak bisa diam-diam mengaktifkan kamera web untuk mengamati lingkungan sekitar serta menyebarkan informasi yang diperoleh dari perangkat yang tersambung dengan browser.

Same Origin Policy

Adanya Same Origin Policy. Kebijakan tersebut memungkinkan jendela atau tab yang berbeda tidak mengenali jendela atau tab lain. Seandainya tab atau jendela mengenali tab atau jendela yang lain, JavaScript dalam satu halaman tidak akan bisa mengakses halaman lain apabila kedua JavaScript berasal dari situs yang berbeda. Hal ini mengurangi pencurian informasi antara website yang sedang dibuka.

JavaScript dapat berkomunikasi langsung dengan server menggunakan koneksi internet. Namun, kemampuan JavaScript dalam menerima data dari situs web yang lain menjadi tidak berfungsi. Batasan tersebut tidak berlaku jika JavaScript dijalankan di luar browser, seperti di server.

Kehebatan JavaScript

Ada beberapa kehebatan JavaScript yang membuatnya menjadi lebih unik dari pada yang lain. Apa saja kah itu? Berikut diantaranya:

Dibandingkan dengan teknologi browser lain, JavaScript adalah satu-satunya yang menggabungkan ketiga hal di atas dan disinilah letak keunikan JavaScript.

Tidak heran JavaScript menjadi alat yang sangat disukai serta paling banyak digunakan oleh para pengembang dalam menciptakan antarmuka baik browser interface maupun mobile interface.

Bahasa Pemrograman Diatas JavaScript

Setiap orang memiliki kebutuhan yang berbeda terhadap bahasa pemrograman, begitu juga JavaSript. Kebutuhan ini biasanya didasari oleh pengalaman pada penggunaan bahasa pemrograman sebelumnya selain JavaScript.

Sehingga bahasa pemrograman baru banyak bermunculan, dimana bahasa pemrograman baru ini yang ditranspilasi atau diubah ke dalam JavaScript sebelum dijalankan pada browser.

Contoh bahasa bahasa-bahasa pemrograman yang berjalan diatas JavaScript seperti:

Anda telah mendapatkan detail lengkap mengenai apa itu JavaScript dan kelebihan serta batasan yang dimilikinya. Tidakkah Anda tertarik untuk membuat situs web dan aplikasi seluler yang lebih hidup menggunakan JavaScript?

Saya pengguna Macbook Pro 2015 i7 RAM 16gb, setelah sekian lama pemakaian, ditahun ini charger Macbook saya mengalami masalah, tepatnya 2 bulan yang lalu.

Magsafe 2 (tipe Magsafe untuk Macbook yang saya miliki) tiba-tiba tidak melakukan charging, tidak ada indikator lampu menyala pada Magsafe yang ada, sudah saya coba lakukan reset SMC, dan lain hal, tetap juga tidak ada daya yang masuk. Dan mungkin sudah saatnya ganti ?.

Mencari Magsafe 2 di Marketplace

Pencarian saya lakukan di beberapa marketplace di Indonesia, saya melihat beberapa variasi harga dari 350.000 hingga 1.500.000, sebagai seseorang yang hobi mencari barang murah, saya coba lihat dari harga yang enggak terlalu murah.

Saya menemukan beberapa seller di marketplace dengan jaminan Magsafe yang mereka jual original. Dan yang membuat saya tertarik adalah seller dengan nama "iColor", seller tersebut menjual Magsafe2 seharga Rp 450.000 dengan jaminan original. Selain itu alasan saya membuat saya tertarik dengan seller "iColor" ini karena Gibran yang merupakan Putra dari presiden kita saat ini, menjadi salah satu pemiliki "iColor".

Konfirmasi Ketersediaan & Originalitas Barang

Akhirnya saya coba untuk mengirim pesan kepada iColor melalui WhatsApp untuk menanyakan perihal ketersediaan barang dan juga originalitas barang tersebut. Berikut screenshot chat saya dengan CS mereka:

Magsafe Dikonfirmasi Original

Setelah mendapatkan penjelasan seperti itu, dan beberapa alasan lain seperti:

  1. iColor memiliki toko fisik di beberapa kota di Indonesia
  2. Salah satu pemilik iColor adalah anak presiden
  3. CS iColor responsive menjawab
  4. iColor memberikan jaminan original
  5. Harga yang cukup murah

Saya akhirnya meyakinkan diri untuk membeli Magsafe di iColor, dan langsung checkout di Tokopedia.

Uji Coba Magsafe Baru Dari iColor

ini adalah foto penampakan saat Magsafe tiba

Magsafe 2 85w. for Macbook Pro 15inch

Setelah saya coba untuk mengisi ulang daya pada macbook saya menggunakan magsafe 2 yang saya dapat dari iColor, semua berjalan normal, tidak ada masalah.

Namun setelah baterai mencapai 100% saya cabut Magsafe tersebut dari Macbook dan juga dari stop kontak. Saya sangat kaget, ternyata Magsafe tersebut sangat panas, 2 kali lebih panas dari Magsafe 2 yang saya miliki sebelumny (bawaan dari apple).

Akhirnya saya coba menggunakan thermometer untuk mengetahui suhu Magsafe tersebut, ternyata thermometer yang saya miliki tidak dapat mendeteksi panasnya, karena thermometer yang saya miliki memiliki batas suhu maksimal 42.9º C.

Setelah saya coba diamkan 10menit, baru saya ukur lagi dan mendapat foto seperti ini

Temperatur pada magsafe mencapai suhu maksimal, setlah magsafe didiamkan sekitar 10menit. Secara logika sebelum 10menit di diamkan, temperatur magsafe lebih dari 42.9º C.

Konfirmasi Masalah Ke iColor

Saya chat CS iColor, dan dengan baik direspon oleh CS iColor

Besoknya saya mendapat telepon dari teknisi iColor, saya mengkonfirmasi ulang mengenai originalitas barang dan menanyakan perihal Magsafe yang sangat amat panas.

Jawaban teknisinya tetap sama, jika barang yang mereka jual adalah barang original, dan mengenai masalah panasnya mereka mengatakan jika itu adalah hal wajar, dan tidak akan berpengaruh dengan Macbook.

Karena saya berpikir "ada harga ada barang" jadi saya hanya "Yaudah deh, mungkin karena murah" dan saya akhirnya ragu dengan originalitas barang yang dijual oleh iColor, berikut adalah poin kenapa saya ragu:

  1. Magsafe sangat panas, 2kali lebih panas dibanding dengan Magsafe original yang didapat saat membeli Macbook
  2. Posisi nomor seri berbeda, menurut informasi yang saya dapat posisi serial number pada magsafe yang beredar di tahun 2015 keatas berada dialam connector Magsafenya, sedangkan yang saya dapat serial number masih berada diluar connector magsafe.
  3. Beratnya lebih enteng jika dibanding dengan Magsafe bawan dari Apple.

Perlu dicatat, saya tidak menyatakan barang dari iColor bukan original, saya hanya ragu akan originalitas barangnya, silahkan ditanyakan kembali kepada pihak iColor, dan itu menjadi hak pembeli untuk mempercainya atau tidak.

Magsafe Akhirnya Rusak

Well, setelah 2bulan berselang, saya mendapati magsafe yang saya beli dari iColor tidak dapat digunakan. Tidak ada indikator charging maupun led yang menyala pada Magsafe, sudah saya lakukan reset SMC dan sebagainya.

Saya coba untuk konfirmasi ulang kepihak iColor, berikut screenshot saya dengan CS iColor

Sekedar informasi, saya sehari-hari menggunakan Desktop Komputer, dan jarang menggunakan Macbook. Macbook saya gunakan untuk keperluan compile aplikasi iOS (saya seorang software developer) atau jika ada keperluan pergi keluar seperti cafe, dan sebagainya.

Dan saya selalu menggunakan stavolt untuk melakukan charging, agar daya yang diterima dan dikeluarkan selalu stabil. SIlahkan baca apa fungsi dari stavolt disini

Chat lanjutan dengan CS iColor

Dihubungi Teknisi iColor

Akhirnya saya dihubungi teknisi iColor melalui WhatsApp. Begini percakapan saya dengan teknisi iColor


Intinya tidak ada solusi yang dapat diberikan oleh iColor guys, seolah iColor menyalahkan stavolt yang saya gunakan. Hal ini sebagai pembelajaran untuk diri saya pribadi, agar lebih berhati-hati dalam membeli peripheral untuk Macbook.

Pandangan Saya Terhadap iColor

iColor menurut saya pelayanannya cukup bagus, karena CS nya sangat responsif, ditambah ada toko fisik dibeberapa kota, dimana kita dapat langsung mendatangi iColor store yang terdekat jika ingin melakukan servis.

Ditambah di instagram iColor banyak banget customernya, jadi servisnya memang bagus menurut saya.

Saya pernah menanyakan untuk jasa pembersihkan macbook, dan iColor memberikan harga yang paling murah, dan dapat ditunggu di iColor store.

Untuk masalah charger Macbook yang saya alami, mungkin saya lagi apes, dan saya rasa harus berpikir 2kali atau tidak lagi untuk membeli charger Macbook disini.

Sekian.

Sebagai pengguna Ubuntu, MacOS mungkin kita tidak asing lagi dengan manajer paket (package manager) spert APT, atau BREW. Apt adalah kependekan dari Advance Packaging Tools yang dimiliki oleh Ubuntu atau sistem operasi turunan Debian yang digunakan untuk melakukan installasi tools atau software.

Dengan adanya apt pada debian, jika kita ingin melakukan installasi software, kita hanya perlu menuliskan command seperti ini sudo apt install nodejs Dengan command tersebut APT atau Advance Packaging Tools akan melakukan installasi nodejs pada sistem operasi.

Windows Package Manager

Pada tanggal 19 Mei 2020, Windows memberikan pengumuman tentang perilisan sebuah Package Manager open source yang bernama WinGet. WinGet sendiri adalah package manager buatan Microsoft. WinGet Package manager akan mempermudah pengguna Windows untuk melakukan installasi tools atau software pada windows.

Execute winget in Windows Terminal

Installasi WinGet

Untuk dapat melakukan installasi WinGet kita memerlukan versi Windows 10 1709 (build 16299) atau yang paling terbaru. Lalu kita buka https://www.microsoft.com/id-id/p/app-installer/9nblggh4nns1 lalu akan muncul seperti dibawah ini, dan kita klik tombol Get.

Setelah sukses terinstall, akan muncul tombol "Install on my devices", dan klik tombol tersebut

Setelah itu akan muncul sebuah popup, untuk memilih device yang akan di install

Lalu kita tekan tombol "Install now", kita tunggu beberapa saat agar installasi berhasil

Installasi vscode menggunakan WinGet

Saya coba melakukan installasi vscode menggunakan WinGet, dengan menulis perintah winget install vscode , begini kira-kira prosesnya

Setelah proses installasi sukses, begini tampilan terminal

Review WinGet menurut penulis

Setelah proses download package melalui command WinGet berhasil, WinGet akan melakukan installasi software mirip seperti installasi software secara manual, yaitu muncul popup, semisal konfirmasi lokasi folder, atau meminta persetujuan agreement jika ada, dan lain sebagainya. Dan menurut saya ini hanyalah pengganti proses download, namun dengan cara yang lebih efisien

Sisi baiknya yang sangat mempermudah adalah kita tidak perlu lagi membuka browser, mencari software yang ingin di Download, dan menunggu proses download di browser hingga selesai. Hal yang saya rasakan ternyata dirasakan juga oleh pengguna github dengan username "pac85", pac85 menulis seperti ini

The description claims this thing to be a package manager but in reality it has nothing to do either with packages or management.
All it does is downloading installers (which are not packages) and executing them (which is not management).

pac85 - Not a package manager

WinGet Cache Location

Setiap software yang diinstall melalui WinGet tidak otomatis terhapus, keuntungannya adalah saat kita mencoba melakukan installasi ulang tidak akan mendownload lagi dari awal, tapi mengandalkan hasil download sebelumnya yang disimpan oleh WinGet pada folder cache, yang berada di

C:\Users\YOURNAME\AppData\Local\Packages\Microsoft.DesktopAppInstaller_8wekyb3d8bbwe\AC\INetCache

Pada artikel kali ini kita akan belajar sebuah tutorial dasar reactjs dengan cara yang paling sederhana dan mudah untuk dipahami, jika kalian belum membaca artikel tentang reactjs sebelumnya, saya sarankan untuk membacanya.

Baca Juga : Pemahaman dasar reactjs untuk pemula

Pada tutorial dasar reactjs kali ini kita akan membuat sebuah aplikasi "Message Box" atau Kotak Pesan, aplikasi kotak pesan adalah aplikasi sederhana untuk menampilkan alert  saat sebuah tombol di klik.

Aplikasinya sangat sederhana, lingkup yang akan kita buat seputar membuat button dan menampilkan alert yang dikirim dari sebuah tombol.

Pemahaman Dasar

Ada beberapa cara untuk memulai menggunakan reactjs, dari yang paling mudah hingga yang tidak cukup mudah, karena membutuhkan beberapa instalasi yang cukup memakan waktu.

Oleh karena itu, pada tutorial dasar reactjs kali ini kita akan memulai reactjs dengan cara yang paling mudah.

Cara yang paling mudah untuk memulai reactjs adalah dengan menggunakan file HTML biasa, lalu kita import React, ReactDOM, serta Babel library kedalam file HTML yang kita gunakan. Tahapan yang perlu kita lakukan untuk memulai adalah:

  1. Buat file index.html - Sebagai file untuk menampilkan reactjs library
  2. Import react library - library yang diperlukan untuk memulai reactjs
  3. Import react dom library - library yang diperlukan untuk memulai reactjs
  4. Import babel - library yang diperlukan untuk melakukan kompilasi sintaks `jsx` pada JavaScript

Apa itu JSX?

JSX adalah singkatan dari JavaScript XML. JSX memungkin kita untuk menulis tag HTML didalam JavaScript. Berikut adalah contohnya:

ReactDOM.render(
  <h1>Welcome Selamat Datang di Reactjs Kopidev !!</h1>,
  document.getElementById('container')
);

Kode JSX mirip seperti kode yang ada pada HTML, karena kita dapat menulis semua elemen yang ada pada HTML kedalam JSX.

Apabila sintaks diatas kita diajalankan di browser, maka sintaks diatas akan menampilkan pesan di dalam tag h1 , lalu tag h1 tersebut akan disematkan kedalam elemen  container.

JSX juga digunakan oleh pengguna reactjs karena mempermudah dan mempercepat dalam pembuatan sebuah UI komponen dibanding kode JavaScript biasa.

Apakah kita harus & perlu menggunakan JSX?

Jawabannya adalah tidak, karena itu preferensi masing-masing software engineer, namun perlu kita ketahui, tujuan dari dibuatnya JSX adalah untuk mempermudah dalam development reactjs.

Sebab, jika kita tidak menggunakan JSX dalam membuat aplikasi reactjs, kita akan sedikit kesulitan, karena kita harus menuliskannya seperti ini:

"use strict";
 
React.createElement(
  "p",
  null,
  "Welcome Selamat Datang di Reactjs Kopidev !!"
)

Menurut kalian lebih nyaman yang mana antara JSX dan tidak menggunakan JSX? Bagi saya pribadi lebih nyaman menggunakan JSX dan saya memilih menggunakan JSX.

Apa itu Babel?

Babel adalah sebuah Javascript compiler. Babel digunakan untuk mengkonversi ECMAScript 2015+ agar kompatibel dengan browser yang belum mendukung ECMAScript 2015+.

Pada kasus JSX yang kita tulis diatas, jika kita tidak menambahkan babel, browser tidak akan dapat menjalankan atau mengerti kode yang kita tulis, sehingga layar browser tidak akan menampilkan apapun karena menganggap script yang kita tulis tidak dikenali. Oleh karena jika kita menggunakan JSX, kita membutuhkan babel.

Ini adalah hasil kompilasi yang dilakukan oleh babel, terhadap sintaks JSX yang kita tulis:

// JSX SEBELUM dicompile
ReactDOM.render(
  <h1>Welcome Selamat Datang di Reactjs Kopidev !!</h1>,
  document.getElementById('container')
);

// JSX SESUDAH dicompile oleh babel
"use strict";
ReactDOM.render( /*#__PURE__*/React.createElement("h1", null, "Welcome Selamat Datang di Reactjs Kopidev !!"), document.getElementById('container'));

Membuat aplikasi sederhana dengan reactjs

Buka code editor, lalu buat sebuah file bernama index.html, pada file ini, kalian import 3 file yang dibutuhkan (seperti yang diterangkan diatas), seperti ini:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Latihan React</title>
    <script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
    <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/[email protected]/babel.min.js"></script>
  </head>
  <body>
    <!-- tag yang digunakan untuk menampilkan reactjs yang dibuat -->
    <div id="root"></div>

    <!-- tag yang digunakan untuk menulis code reactjs -->
    <script type="text/babel">
      /**
       * Seluruh code reactjs akan ditulis disini
       * /
    </script>
  </body>
</html>

Coba kita perhatikan script HTML diatas, saya menambahkan tag div dengan id root, tujuan elemen ini dibuat adalah sebagai elemen utama untuk menampung atau merender script Reactjs yang akan kita buat nantinya.

Dan juga ada tag <script tyle="text/babel"> tag ini digunakan untuk menampung seluruh file reactjs yang akan kita tulis.

Menambahkan Judul Aplikasi

Selanjutnya kita buat sebuah elemen untuk menampilkan judul aplikasi, seperti ini:

    <script type="text/babel">
      function MessageBox() {
        return (
          <div>
            <h1>Kotak Pesan Kopidev</h1>
          </div>
        );
      }

      ReactDOM.render(<MessageBox />, document.getElementById("root"));
    </script>

Penjelasan kode diatas adalah:

  1. Kita buat sebuah fungsi bernama MessageBox(), dalam reactjs fungsi ini disebut dengan komponen. Komponen MessageBox ini berisi tag div, yang didalamnya terdapat tag h1 dengan isi "Kotak Pesan Kopidev"
  2. Terdapat sebuah sintaks ReactDOM.render(<MessageBox/>, document.getElementById("root")); , sintaks ini bermaksud untuk menampilkan komponen <MessageBox/> kedalam tag div dengan id root

Jika kita run di browser, akan muncul seperti ini

Menambahkan tombol

selanjutkan kita buat sebuah tombol, tombol yang akan kita buat memiliki fungsi untuk menampilkan sebuah alert saat di klik. Seperti ini:

function MessageBox() {
  return (
    <div>
      <h1>Kotak Pesan Kopidev</h1>
      <button
        onClick={() => {
          alert("Hai kamu");
        }}
      >
        Tombol Hai
      </button>
    </div>
  );
}

Jika kita run di browser, maka akan muncul seperti ini:

Reusable Component

Seperti yang telah saya jelaskan di artikel dasar reactjs , reactjs menerapkan konsep Reusable Component , dimana komponen yang buat dapat digunakan secara berulang.

Di tahap ini, kita akan membuat sebuah tombol yang dapat digunakan berulang kali. Tombol ini kita beri nama "MyButton", seperti ini :

function MyButton() {
  return (
    <button
      onClick={() => {
        alert("Hai kamu");
      }}
    >
      Tombol hai
    </button>
  );
}

function MessageBox() {
  return (
    <div>
      <h1>Kotak Pesan Kopidev</h1>
      <MyButton />
    </div>
  );
}

Penjelasan sintaks diatas adalah setelah kita membuat atau memindahkan tombol yang sebelumnya kedalam komponen MyButton, pada komponen MessageBox kita ubah tombol sebelumnya menjadi <MyButton/>. Kita juga dapat menggunakan komponen <MyButton/> secara berulang, seperti ini:

function MessageBox() {
  return (
    <div>
      <h1>Kotak Pesan Kopidev</h1>
      <MyButton />
      <MyButton />
      <MyButton />
      <MyButton />
    </div>
  );
}

Hasilnya seperti ini:

Component Props

Pada tahap ini, kita akan belajar tentang props. Pada dasarnya setiap komponen di reactjs dapat memiliki atau menerima sebuah input, attribute, dan lain sebagainya. Setiap Input terhadap suatu komponen disebut dengan props (kependekan dari property). Contoh sederhana:

function Welcome(props) {
  return <h1>Selamat Datang, {props.name}</h1>;
}

Sintaks diatas adalah untuk membuat sebuah komponen bernama Welcome, komponen welcome tersebut menerima sebuah props bernama name, jadi kita dapat memanggil komponen Welcome tersebut dengan cara seperti ini

const element = <Welcome name="Sara" />;

Hasilnya seperti ini

Pada tahap ini kita akan menambahkan beberapa props terhadap komponen MyButton, props yang akan tambahkan adalah judul, dan pesan. Kurang lebih seperti ini:

function MyButton(props) {
  return (
    <button
      onClick={() => {
        alert(props.pesan);
      }}
    >
      {props.judul}
    </button>
  );
}

function MessageBox() {
  return (
    <div>
      <h1>Kotak Pesan Kopidev</h1>
      <MyButton judul="Arryangga" pesan="Selamat Datang Arryangga" />
      <MyButton judul="Jokowi" pesan="halo boskuuuuhhhhh" />
      <MyButton judul="Soekarno" pesan="Gimana pak disana? Enak?" />
    </div>
  );
}

Hasilnya seperti ini, bisa kalian klik satu per satu

Latihan React


Kesimpulan

Tutorial ini bertujuan untuk memahami konsep dasar reactjs, dengan cara belajar memahami apa itu JSX, apa itu babel, dan apa korelasi antara babel dan JSX. Dan juga kita belajar membuat sebuah aplikasi sederhana yang didalamnya terdapat reusable komponen, dan juga props pada reactjs.

Sampai jumpa di tutorial berikutnya ya. Terimakasih banyak

Sejak 5 tahun terakhir banyak bermunculan JavaScript library seperti ReactJS, VueJS, Angular, Preact, dan lain sebagainya. Library tersebut dibangun dengan tujuan yang sama, yaitu untuk mendukung pembuatan aplikasi agar lebih cepat dan efisien.

Saat ini ReactJS adalah library yang paling populer digunakan oleh Frontend Developer untuk membangun User Interface dengan JavaScript.

Baca juga: ✅Panduan Menjadi Front End Developer Lengkap

Pada survey yang dilakukan oleh StackOverflow, library ReactJS menduduki peringkat pertama pada kategori JavaScript Library (Pustaka JavaScript) yang paling banyak digunakan, seperti pada gambar dibawah ini:

most popular front-end frameworks in 2020

Peringkat kedua disusul oleh Vue.JS, dan AngularJS ada diposisi ketiga. Oleh karenanya pada tulisan ini, saya akan coba membahas tentang React.JS

Apa itu ReactJS?

Jadi, apa itu reactjs? ReactJS adalah sebuah library bahasa pemrograman JavaScript yang dibuat oleh Facebook. ReactJS merupakan library yang bersifat Open-Source. ReactJS digunakan untuk membangun sebuah User Interface pada Website, Mobile, dan juga aplikasi Desktop.

ReactJS dibangun dengan konsep "Reusable Components", dimana kita dapat membuat komponen kecil (bagian kecil dari User Interface, seperti tombol, input, dsb) yang dapat kita gunakan secara berulang sehingga memberikan performa yang bagus pada aplikasi yang dibuat, serta dapat membuat proses development menjadi lebih cepat.

Digunakan Oleh Banyak Perusahaan Besar

Top 25 Companies/Brands Using ReactJS Development - Frontend ...

ReactJS digunakan oleh banyak perusahaan besar seperti Facebook, Instagram, Netflix, Airbnb, dan lain sebagainya. Di indonesia sendiri beberapa startup besar yang menggunakan ReactJS diantaranya adalah WarungPintar, Sorabel, Traveloka, Tokopedia, dan lain sebagainya.

Facebook

Sosial media terbesar di dunia yaitu Facebook secara keseluruhan dibangun menggunakan ReactJS pada website mereka. Pada aplikasi facebook yang berbasis android dan ios sebagian halamannya dibangun menggunakan Framework React Native.

Instagram

Website instagram.com juga dibangun menggunakan ReactJS. Sedangkan untuk aplikasi instagram yang berbasis android dan ios hanya sebagian fitur yang dibangun menggunakan React Native.

WarungPintar

Website utama warungpintar sepenuhnya dibangun menggunakan ReactJS dan GatsbyJS. Sedangkan untuk aplikasi mobile seperti aplikasi Juragan dan KurirApps secara keseluruhan dibangun menggunakan Framework React Native.

Support Komunitas Yang Besar

ReactJS juga memiliki komunitas yang sangat besar, di Indonesia ada sebuah komunitas bernama ReactJS Indonesia yang sangat aktif dan sering mengadakan meetup untuk membahas perkembangan ReactJS.

Di kota Surabaya, ada 2 komunitas yang aktif membahas perkembangan ekosistem JavaScript, yaitu komunitas Surabayadev dan komunitas Surabayajs

Alasan Kenapa Memilih ReactJS

Ketika sebuah teknologi atau library baru muncul, selalu ada persaingan sengit dalam menentukan pilihan, dan sebagai seorang Frontend Developer pasti ada saat dimana kita harus memilih sebuah library yang akan digunakan di Project selanjutnya.

Pilihan tahun ini biasanya pada 3 library besar, yaitu ReactJS, VueJS, dan AngularJS. Namun saya akan coba menjelaskan kenapa kita ReactJS adalah pilihan yang paling bijak dan tepat.

ReactJS mudah untuk dipelajari

Didalam kaidah teknologi, jika sesuatu mudah dipelajari dan dipahami, itu berarti akan mudah untuk diterapkan atau diimplementasikan. Karena kemudahan untuk dipelajari saya meyakini jika setiap programmer dapat dengan mudah memahami sintaks dan siklus hidup (lifecycle) pada komponen di ReactJS.

Requirements yang dibutuhkan untuk mempelajari ReactJS tidak rumit kok, kalian cukup memiliki dasar pengetahuan tentang HTML, CSS, dan JavaScript. Dengan 3 pengetahuan dasar ini, saya jamin kalian bisa untuk belajar ReactJS

ReactJS itu cukup sederhana

ReactJS mudah dipelajari dan diimplementasikan (dengan catatan kita sudah memiliki pemahaman dasar tentang JavaScript). Siklus hidup pada komponen di ReactJS sangat mudah untuk dipahami. Kita akan selalu bertemu dengan komponen, karena semua yang ada di ReactJS adalah komponen.

Native Approach

Future Scope of React Native for Mobile App Development ...

ReactJS terkenal dengan reusabilitynya, yang dimaksud reusability adalah komponen yang ada pada ReactJS dapat dengan mudah digunakan untuk platform yang lain, seperti Android, iOS, dan Desktop.

Jadi dengan sekali belajar ReactJS kita dapat mengimplementasikan ke banyak platform, tentunya ini menjadi nilai plus bagi para Frontend Developer.

write once, run anywhere.

-- ReactJS

One Way Data Binding

Singkat cerita, sebelum react lahir konsep two-way data binding lebih dulu populer di dunia frontend. Cara kerjanya, ketika data berubah maka UI berubah, begitu juga sebaliknya. Framework seperti angular dan ember menggunakan turut mempopulerkan konsep ini.

Tapi ternyata banyak developer merasa performance dari konsep ini kurang baik ketika aplikasi semakin besar, akhirnya facebook memperkenalkan react dengan konsep one-way data flow yang di dasari oleh functional programming.

Berbeda dengan two-way data binding, merubah UI tidak otomatis mengubah data. Aliran datanya akan tetap satu arah itu sebabnya disebut one-way data flow. Cara untuk merubahnya menggunakan teknik callback.

Kedua konsep ini mirip seperti analogi jalan satu arah dan dua arah, keduanya memiliki kelebihan dan kelemahan masing-masing. React memilih one-way data flow untuk alasan performance, scalability, dan single source of truth.

- Sastra Nababan

Performa yang bagus dengan Virtual DOM

ReactJS terkenal cepat dan aman. Dan tidak banyak terjadi permsalahan performa pada tahap production. Virtual DOM adalah representasi DOM secara virtual. Pada dasarnya, bahasa pemrograman JavaScript sudah cukup kencang. Faktor yang membuat JavaScript menjadi lambat adalah ketika JavaScript mengolah DOM.

React membuat virtual DOM untuk mempercepat urusan tersebut. React melakukan semua operasi di dalam virtual DOM. Setelah operasi tersebut selesai, React melakukan perubahan tersebut pada DOM.

Banyak Lowongan Pekerjaan

Karena ReactJS sanagat populer, banyak perusahaan yang mengadaptasi library ini kedalam project mereka. Karena hal ini pula, lowongan pekerjaan dengan requirement ReactJS juka sangat membludak, baik onsite maupun remote.

Jika kalian googling dengan kata kunci "Lowongan Frontend" kalian akan banyak menemukan requiremens ReactJS pada deskripsi lowongan pekerjaan mereka.

Kesimpulan

ReactJS adalah library yang dibangun oleh Facebook, karena popularitasnya banyak Frontend developer yang akhirnya menggunakan ReactJS. Akibatnya sangat banyak perusahaan besar yang mencari Frontend Developer yang menguasai ReactJS.

Untuk belajar ReactJS tidaklah sulit, pengetahuan dasar yang harus dimiliki hanyalah HTML, CSS, dan JavaScript. 3 pengetahuan ini merupakan requirements wajib sebelum mempelajari ReactJS.

Jika teman-teman lebih menyukai video penjelasan ReactJS, teman-teman dapat menonton video ini

 

Sebelum langsung ke tutorial cara membersihkan mechanical keyboard dengan cara yang paling sederhana, saya ingin kilas balik sedikit tentang "Apa itu mechanical Keyboard?", untuk sekedar menambah wawasan bagi yang belum mengerti tentang mechanical keyboard.

Apa itu mechanical keyboard?

Mechanical keyboard adalah sebuah keyboard yang tidak menggunakan karet (membran) atau rubber dome untuk menahan setiap key pada keyboardnya.

Mechanical keyboard menggunakan pegas atau tuas mekanik dari besi yang terletak pada switch keyboard.

gambar dari keyboard mechanical

Setiap switchnya berdiri sendiri-sendiri, tidak tergantung sama lain, sehingga jika ada 1 kerusakan pada switch tertentu kita hanya perlu mengganti 1 saja.

Apa itu Membran Keyboard atau Rubber Dome?

Sedangkan ini adalah switch dari sebuah keyboard membran atau rubber dome

gambar dari keyboard membran

Jika ada kerusakan pada keyboard circuit, cara paling mudah adalah dengan membeli yang baru.

Mechanical Keyboard Milik Saya

Saya pernah memiliki mechanical keyboard TKL (Ten keyless) tanpa cursor, Cherry MX Blue Switches, dengan merek Anne Pro.

Dan itu menjadi penyesalan terbesar saya dalam membeli keyboard, bukan karena mereknya, tapi penyesalan terletak pada kurangnya kelihaian saya dalam menggunakan keyboard tanpa cursor. Saya seorang progammer, dan bagi saya cursor adalah segalanya.

Selain itu Cherry MX Blue menjadi penyesalan karena cukup berat untuk mengetik, dan BERISIK. Semua pecinta mechanical keyboard pasti sudah paham jika Cherry MX Blue adalah switch yang cukup berisik.

Keyboard yang saat ini saya gunakan telah berumur 2 tahun, keyboard ini bermerek Cherry MX Board 2.0, dengan switch Cherry MX Red Linier.

keyboard arryanggaputra

Dan menurut saya ini adalah keyboard terbaik yang saya miliki saat ini, selain cukup ringan dijari, tidak berisik, juga terlihat oldies. Karena tanpa lampu RGB yang terlihat seperti odong-odong.

https://www.youtube.com/watch?v=L0imIrewuQg

Ini adalah odong odong

Membersihkan Mechanical Keyboard

Tahun lalu saya sudah membersihkan keyboard ini, dan sekarang adalah tahun berikutnya, jadi saya membersihkan keyboard ini 1 tahun sekali. Dan ini adalah kondisi keyboard saya setelah 1 tahun tidak dibersihkan:

keyboard arryanggaputra
keyboard arryanggaputra
keyboard arryanggaputra
keyboard arryanggaputra

Alat Tempur Untuk Membersihkan Keyboard

  1. Kuas pembersih laptop
    kuas pembersih laptop
  2. Keypuller
    keypuller mechanical keyboard
  3. Cairan Pembersih Laptop
    keypuller mechanical keyboard
  4. Air sabun Sunlight. Sunlight sudah terkenal dari masa kemasa untuk membersihkan segala perabot rumah, dan juga harganya murah, karena ini tutorial sederhana, ya saya gunakan seadanya saja.
    keypuller mechanical keyboard

Memulai Pembersihan Keycaps

Hal yang pertama harus kalian lakukan adalah mencabut seluruh keycaps yang ada pada keyboard dengan keypuller. Kenapa keypuller? Ya agar lebih mudah, daripada pada kuku, bisa capek dan sakit.

Setelah seluruh keycaps tercabut, kalian cukup rendam kedalam air sabun SunLight.

merendam mechanical keyboard

Setelah direndam, kalian ambil satu persatu keycaps, dan bersihkan dengan kuas yang tadi disiapkan.

membersihkan mechanical keyboard

Setelah dibersihkan semuanya, tanpa tertinggal noda yang membandel, kalian bisa jemur dibawah terik matahari.
menjemur mechanical keyboard

Memulai Pembersihan Keyboard

Hal yang sulit adalah membersihkan bagian dalam keyboard yang tidak memiliki fitur removable switches.

Cara paling mudah adalah dengan menyemprotkan cairan pembersih laptop dari jarak 30cm, dan jangan banyak-banyak ya, cukup sampai lembab saja.

Setelah disemprot dengan cairan pembersih, kalian cukup gunakan kuas yang tadi disiapkan untuk membersihkan sela-sela keyboard. Dan menurut saya hasilnya cukup bersih.

menjemur mechanical keyboard

Setelah kita pastikan semuanya selesai, kita bilas dengan air bersih, dan pastikan tidak ada sabun yang tertinggal. Setelah itu kita dapat menjemur keyboard dibawah terik matahari.

menjemur mechanical keyboard

Merakit Kembali Mechanical Keyboard

Setelah menjemur kurang lebih 1jam, pastikan keyboard dan keycaps benar-benar dalam keadaan kering. Dan keyboard siap untuk dirangkai kembali. Begini hasil akhirnya, sangat bersih dibanding sebelumnya.

hasil membersihkan mechanical keyboard