#2 Instalasi— Seminggu Menjadi Master React JS — Seri Tingkat Dasar

Safei Muslim
SkyshiDigital
Published in
3 min readAug 26, 2017

Ini adalah artikel kedua dari serial Seminggu Menjadi Master React JS — Seri Tingkat Dasar. Pada artikel kedua ini kita akan mencoba bagaimana melakukan instalasi react js.

React js itu sangat flexibel bisa digunakan dalam berbagai proyek. Kita dapat membuat aplikasi baru full dengan react js, namun kita juga dapat menyisipkan react js pada project yang sudah kita kembangkan, tanpa perlu melakukan proses rewriting.

Jika kita baru ingin mencoba-coba saja, dan tidak mau melakukan instalasi apapun, kita bisa menggunakan codepen, disitu tinggal ubah-ubah sesuai keinginan. Ini adalah contoh menampilkan Hello Word dengan react js.

Ada 2 cara populer melakukan instalasi react js, antara lain :

#1 Package Manager

Kita bisa menggunakan npm atau yarnsebagai package manager, meskipun source package dari kedua package manager ini diambil dari source yang sama yaitu npm registry, namun saya sendiri lebih suka pake yarn, karena merasa lebih kenceng,

Untuk membuat aplikasi baru full dengan react, kita bisa menggunakan bantuan package Create React App. Lakukan instalasi package create-react-appdengan menjalankan perintah npm install -g create-react-apppada command line.

Setelah proses instalasi package create-react-app selesai, kita bisa langsung memulai membuat aplikasi react pertama kita.

Jalankan create-react-app my-app pada command line.

Jika proses create react app berhasil maka akan tampil informasi success, seperti pada gambar dibawah ini:

Masuk kedalam folder nama aplikasi, kemudian jalan kan npm startatau yarn start untuk mencompile aplikasi.

Jika proses compile berhasil maka akan tampil seperti pada gambar dibawah ini, buka url L0cal atau On Your Network maka akan tampil halaman Welcome to React.

Ini adalah halaman welcome to react, jika sudah tampil halaman seperti ini maka create react projek pertama kita sudah berhasil!!!

#2 CDN

Jika kita tidak ingin menggunakan package manager seperti npm
atau yarn, npm juga menyediakan distribusi file tunggal dalam folder dist:

<script crossorigin src=”https://unpkg.com/react@15/dist/react.js"></script> <script crossorigin src=”https://unpkg.com/react-dom@15/dist/react-dom.js"></script>

Versi diatas hanya untuk mode development , untuk mode production kita diharuskan menggunakan source yang sudah Minified and optimized:

<script crossorigin src=”https://unpkg.com/react@15/dist/react.min.js"></script><script crossorigin src=”https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>

# Kesimpulan

Untuk melakukan instalasi react js ada 2 cara yaitu:

  1. Menggunakan Package manager(npm, yarn)
  2. Menggunakan CDN(menyisipkan source react pada halaman web)

Happy Coding

Safei Muslim

Daftar isi >> Seminggu Menjadi Master React JS — Seri Tingkat Dasar
Sebelumnya >> #1 Pendahuluan — Seminggu Menjadi Master React JS — Seri Tingkat Dasar

--

--