cara menginstall react.js

Belajar React Js 03: Installasi React Js dan Node Js

Diposting pada

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.

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:

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

sehingga file html kita menjadi seperti ini:

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

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

sehingga full codenya menjadi seperti ini

Jalankan file html kita, dan lihat hasilnya, jika terlihat seperti screenshoot dibawah maka kita sudah berhasil menambahkan react ke website kita.

Contoh Program reactjs

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

download Nodejs

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.

cara cek versi npm

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

cara install ReactJs

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)

installasi ReactJs
TAMPILAN CMD SETELAH PROSES INSTALLASI SELESAI
tampilan cmd setelah proses installasi selesai

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

contoh program react js

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

download vscode

setelah di install kamu bisa langsung mengedit project yang tadi kita buat dengan cara menjalankan perintah dibawah, maka secara otomatis vscode akan terbuka.

code .
cara install React js

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.

3
Gambar Gravatar
Pusatnya pengetahuan Teknik Informatika dan Pengetahuan Lainya

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *