setelah kita mengenal apa itu React Js sekarang saatnya kita mulai menginstall react Js, React Js bisa di install di sistem operasi windows, Linux, Mac.
Kamu hanya perlu menyesuaikan clinya saja seperti di windows kamu bisa menggunakan cmd, di mac dan linux kamu bisa mengguanakan terminal line.
untuk menggunakan react ada 2 cara installasi yaitu dengan menambahkan react ke project yang sudah ada atau membuat aplikasi react mulai dari awal.
Contents
Menambahkan React ke Website
Kita bisa menambahkan React kedalam project web yang sudah kita buat sebelumnya.
namun cara ini tidak disarankan, karena bisa merusak elemen javascript yang sudah dibuat sebelumnya.
selain itu menambahkan react ke dalam website yang sudah dibuat tidak bisa meningkatkan kecepatan website secara signifikan.
1. Menyiapkan DOM Container di dalam File
React berjalan dengan prinsip single page application, dimana kamu hanya memerlukan 1 file html untuk membuat 1 web full yang interaktif.
React akan memanipulasi DOM pada html untuk menyajikan tampilan yang berbeda sesuai kebutuhan.
oleh karena itu buatlah 1 DOM yang akan dimanipulasi, contoh:
1 2 3 4 5 6 7 8 9 10 11 12 13 | <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> </head> <body> <!--Your Code--> <div id="reactContainer"></div> <!--Your Code--> </body> </html> |
pada contoh diatas saya menyediakan div dengan id react sebagai DOM utama pada project ini.
3. Memasukan React ke dalam Website mu
Langkah selanjutnya adalah menghubungkan Websitemu dengan package yang sudah disediakan oleh react.
Kamu cukup menambahkan script untuk menghubung ke cdn React dan jangan lupa buat 1 file javascript lagi untuk memberi perintah ke DOM yang kamu buat tadi
1 2 3 4 5 6 | <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script> <script src="react.js"></script> </body> |
sehingga file html kita menjadi seperti ini:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> </head> <body> <!--Your Code--> <div id="reactContainer"></div> <!--Your Code--> <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script> <script src="react.js"></script> </body> </html> |
3. Membuat React Component
Sekarang buatlah file sesuai dengan nama file javascript yang kita cantumkan, pada contoh kali ini saya membuat file dengan nama react.js
setelah itu copy code dibawah ini di dalam react.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | 'use strict'; const e = React.createElement; class LikeButton extends React.Component { constructor(props) { super(props); this.state = { liked: false }; } render() { if (this.state.liked) { return 'You liked this.'; } return e( 'button', { onClick: () => this.setState({ liked: true }) }, 'Like' ); } } |
code diatas adalah contoh component pada React.js, untuk memunculkan tombol like sederhana yang nantinya akan kita aplikasikan ke dalam project kita
selanjutnya kita akan mengaplikasikan component tsb kedalam project kita, lebih tepatnya kedalam div dengan id reactContainer
1 2 | const domContainer = document.querySelector('#reactContainer'); ReactDOM.render(e(LikeButton), domContainer) |
sehingga full codenya menjadi seperti ini
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | 'use strict'; const e = React.createElement; class LikeButton extends React.Component { constructor(props) { super(props); this.state = { liked: false }; } render() { if (this.state.liked) { return 'You liked this.'; } return e( 'button', { onClick: () => this.setState({ liked: true }) }, 'Like' ); } } const domContainer = document.querySelector('#reactContainer'); ReactDOM.render(e(LikeButton), domContainer) |
Jalankan file html kita, dan lihat hasilnya, jika terlihat seperti screenshoot dibawah maka kita sudah berhasil menambahkan react ke website kita.
selengkapnya tentang installasi react di website yang sudah ada bisa kamu baca di website resminya disini
Membuat project baru
Selain menambahkan react ke dalam project yang sudah kita buat sebelumnya, kamu juga bisa membuat project React.Js dari awal.
Tentunya cara install react js ini adalah cara yang disarankan, karena file utama react ada di root folder kita.
sehingga bisa mempercepat kinerja Website yang akan kita buat.
Selain itu membuat project react dari awal juga memudahkan kita, karena struktur file dan folder nya tersusn rapih.
1. Installasi NodeJS
sebelum kita membuat aplikasi React.Js kita harus menginstall Node.js terlebih dahulu.
bagi kamu yang belum tahu apa itu Node.Js, Node.Js adalah sebuah application untuk membantu kita dalam mengembangkan project apapun berbasis javascript.
nantinya react akan di install menggunakan command line/ cmd dengan bantuan Node.js
kamu bisa mendownload node js di website resminya
downloadlah sesuai dengan sistem operasi yang kamu gunakan. setelah itu install seperti biasa.
untuk mengetest apakah node.js sudah terinstall secara sempurna di perangkat kita, kamu bisa membukan cmd atau terminal. lalu memasukan kode dibawah
npm –version
Jika muncul versi npm nya seperti gambar dibawah, berarti nodejs sudah terinstall di perangkat kamu.
2.Installasi ReactJs
Setelah npm siap sekarang saatnya membuat project react.
pertama buka command line dan masuk ke directory yang ingin kamu gunakan untuk di install di ReactJs.
misalnya kamu mau menginstall di C:\project\react mak jalankan perintah dibawah
cd C:\project\react
setelah berada di root project langkah selanjutnya yang harus dilakukan adalah menginstall project react menggunakan npm dengan script berikut
npx create-react-app my-app
note: my-app adalah nama dari aplikasi react yang kita buat dan react secara otomatis akan membuat folder bernama my-app, kamu bisa mengganti my-app dengan nama project kamu, atau kamu bisa membuatnya kosong agar terinstall persis di root folder yang kamu tuju.
dan tunggu hingga proses download react js selesai (proses installasi bisa memakan waktu beberapa menit tergantung spesifikasi perangkat kamu)
setelah itu kamu bisa test hasil installasi react tersebut dengan masuk ke dalam folder installasi dan menjalankan perintah npm start dan buka link yang terdapat di cli
cd myapp
npm start
Selamat ReactJs sudah berhasil di install dan siap untuk proses development.
Installasi vscode
Menginstall react saja tidak cukup, kamu juga harus menginstall text editor untuk proses development.
text editor yang saya sarankan adalah visual studio code, kenapa? karena fitur di vscode lengkap.
tersedia terminal di dalam vscode dan mendukung banyak bahasa tanpa installasi plugin tambahan.
kamu bisa download vscode disini
setelah di install kamu bisa langsung mengedit project yang tadi kita buat dengan cara menjalankan perintah dibawah, maka secara otomatis vscode akan terbuka.
sekian tutorial tentang cara install react js, di tutorial selanjutnya mari kita bahas programing side React Js seperti component, state, router dll, sampai jumpa di tutorial selanjutnya.
