Showing posts with label ReactJS. Show all posts
Showing posts with label ReactJS. Show all posts

Pengenalan dan Instalasi ReactJS - Belajar ReactJS

Habib Syuhada March 29, 2019 0
Logo React
Logo React

Pengenalan ReactJS

ReactJS adalah suatu framework yang sedang naik daun belakangan ini. ReactJS framework yang cukup populer dan framework ini ternyata telah dipakai dan awalnya dari Facebook loh. Kelebihan secara garis barisnya adalah bahwa framework ini mendukung perubahan dan pergantian web maupun database secara realtime. Munkin untuk lebih detailnya kalian bisa cek sendiri di web tetangga. Sudah banyak yang menjelaskan hal tersebut.

By the way, artikel tentang react ini bertujuan untuk menjadi catatan saya pribadi saya selama saya belajar tentang reactjs. Jadi buat kalian yang membaca ini, bila terdapat kesalahan. mohon dimaklumi. Masih belajar soalnya.

Persiapan

Jadi sebelum memulai belajar ReactJS, ada beberapa aplikasi yang harus anda miliki. Text editor dan web server. Yang paling sering digunakan dalam Pembangunan ReactJS adalah NodeJS sebagai servernya dan Visual Code sebagai Text editornya. Kalo pakai aplikaso lain bisa ga? bisa. Tergantung kesesuaian kalian. Tapi dua hal ini yang biasa saya pakai.



Selain dari segi software, dari segi skill kalian juga harus menguasai dasar-dasar pemrograman web. Bahasa pemrograman yang setidaknya kalian harus tau adalah HTML, CSS, JS, dan PHP.

Install NodeJS

Install NodeJS yang telah kalian download sebelumnya. Kalau aku boleh sarankan, pilih versi yang LTS. Kenapa? Karena tertulis Recomended for Most User :)

 Membuat Projek ReactJS Pertama

Setelah install nodejs, buka aplikasi NodeJS Command Promt. Buka dengan cara Run as Administrator. Setelah itu alihkan direktori ke tempat penyimpanan yang kalian inginkan dengan perintah cd. misalnya bila kalian ingin menyimpan file ReactJS di C:\ maka ikuti seperti pada gambar dibawah ini
Ini contoh jika ingin menggunakan peritah cd.
Ini contoh jika ingin menggunakan peritah cd.
By the way, saya tidak menaruhnya di C:\ tapi saya membuat folder baru namanya "react-app" dan saya menempatkan file reactjs saya disana.

Bila anda telah milih direktori penyimpan, sekarang kita bisa install react pada folder tersebut dengan bantuan package create-react-app. Pertama install dulu packagenya dengan perintah dibawah ini.
npm install -g create-react-app
Setelah proses instalasi package create-react-app selesai, kita bisa langsung memulai membuat aplikasi react. Jalankan perintah dibawah ini
create-react-app my-app
Akan mucul tampilan seperti pada gambar ini.
Akan mucul tampilan seperti pada gambar ini.
Proses ini membutuhkan waktu sesuai dengan kecepatan internetmu. Jadi pastikan internet kamu lancar dan cepat. Sehingga proses ini tidak terlalu lama. Bila proses ini selesai maka akan muncul sepert gambar dibawah ini.
Tampilan apa bila success installasi reactjs
Tampilan apa bila success installasi reactjs
Bila sudah muncul tampilan seperti diatas, berarti anda telah melakukannya dengan benar. Selanjutnya perhaitkan di bagian bawahnya. Tertulis saran apa yang dilakukan selanjutnya. Letaknya dibawah kata "We suggest that you begin by typing :"
ikuti itu saja untuk saat ini. Jadinya seperti di gambar ini
Setelah kalian ikuti sarannya, jika muncul tampilan seperti ini sukses untuk dijalankan
Setelah kalian ikuti sarannya, jika muncul tampilan seperti ini sukses untuk dijalankan
Bila proses compile berhasil maka akan secara automatis membuka halaman web/app react di browser. Bila tidak kita dapat membukanya sendiri dengan alamat yang tertera di command promt.
Tampilan awal reactjs yang telah dibuat
Tampilan awal reactjs yang telah dibuat
Ini adalah halaman Welcome to React, jika sudah tampil halaman seperti ini maka react projek pertama anda telah berhasil :)

Penutup

Sebenarnya ada banyak cara untuk menginstall reactjs, tapi bagi yang pertama kali mengugnakan react js cara ini adalah cara yang paling mudah.