MASIGNCLEAN102

2 Cara Mudah Install React JS Terbaru


2 Cara Mudah Install React JS Terbaru - React JS merupakan salah satu library dari Javascript modern yang paling populer untuk membangun sebuah user Interface. React JS dipilih karena sangatlah flexible untuk diterapkan dalam berbagai project dan berbagai platform (react native). Bagi kalian programmer yang berlatar belakang design / front end, react js adalah pilihan yang tepat Nah, pada artikel kali ini kita akan membahas bagaimana cara install react js terbaru di projek kalian.

Sebelum memulai instalasi, ada sedikit info nih. Jadi, di dalam React Js nantinya kalian bakal nemuin banyak pemformatan seperti :

var contoh 1 = <h1>Hello Kompi Kaleng </h1>
Nah, inilah yang dinamakan JSX. Salah satu sintaks java script untuk menyimpan elemen HTML ke dalam variabel javascript.

Untuk mengenalkan si JSX ke javascript ini, kita bisa menggunakan Babel sebagai compilernya.

Untuk menginstall React JS ke dalam Projek kita dapat dilakukan 2 cara yaitu Menggunakan CDN dan Create React App.

Yuk, langsung aja.

Menggunakan CDN

CDN merupakan salah satu cara yang paling mudah untuk menginstall react js ke projek kita. Kita cukup memasang script yang memuat file react js dari source CDN yang disediakan.

Kalian bisa, masuk ke link berikut : React JS CDN

Akan ada script yang mengarah ke CDN react js yang dibagi berdasarkan keperluannya, ada development (pengembangan) dan juga production. Jika kalian masih dalam tahap belajar sebaiknya untuk memilih development terlebih dahulu. 

Development :
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
Production :
 <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

Kemudian,

Selain menambahkan CDN React JS, seperti yang saya sampaikan di awal tadi, kita memerlukan sebuah compiler untuk mengenalkan sintaks JSX ke javascript. Maka dari itu, kita perlu juga untuk memuat Babel ke dalam projek kita. Kalian bisa menggunakan CDN babel seperti di bawah ini :

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>

Untuk panduan lebih lanjut menginstall React JS menggunakan CDN kalian bisa simak thread dari stackoverflow berikut ini :


Create React App

Create react app merupakan cara cepat untuk menginstall single page application react JS dengan node package manager. Create react app adalah sebuah command / perintah untuk menginstall react js beserta dependencies yang diperlukan (React.DOM, router, dan lain-lain).

Untuk memulai menggunakan perintah create react app, kalian harus terlebih dahulu Node JS.

Cek versi node js kalian dengan perintah
node -v
Kalau node JS sudah terinstall pada PC kalian, silahkan gunakan command berikut untuk memulai membuat projek react dengan nama belajar-react
npx create-react-app belajar-react
cd belajar-react
npm start

Tiga command di atas berfungsi untuk menginstall projek react kemudian menjalankan built-in script di projek tersebut.

Setelah itu, projek kalian sudah siap kalian jalankan di URL http://localhost:3000 



Kalau kalian kurang jelas kalian bisa simak official documentation dari Create React App disini.

Terima Kasih.
Share This :
Funtechsy