Materi kali ini disampaikan oleh kak vega sebagai developer.
install nodejs (https://nodejs.org/en/download/)
npm i -g create-react-app
create-react-app countdowntimer.
Siapa yang pernah liat countdown timer di sekitaran bundaran
HI?
Terinspirasi dari situ, aku pengen sharing knowledge bikin
react web app untuk itu.
kalau temen2 sudah install nodejs, dan jalankan perintah
create-react-app countdowntimer
Kalau ada yg belum mungkin bisa di kasih tau dulu stepnya
nginstall CRA PD
pertama kita install nodejs di terminal kita
https://nodejs.org/en/download/
bisa didownload untuk windows
https://www.dumetschool.com/blog/cara-install-node-js-dan-npm-pada-windows
untuk ubuntu menjalankan perintah ini di terminal
sudo apt-get update
sudo apt-get install nodejs
sudo apt-get install npm
untuk memastikan sudah berhasil diinstall kita ketik di
terminal kita node -v
dan cek juga npm nya, caranya
npm -v
kalau keluar versionnya, selamat...berarti sudah berhasil
menginstall nodejs (dan package managernya = npm)
selanjutnya kita menjalankan perintah di terminal:
npm i -g create-react-app
create-react-app (nama aplikasi kita)
kita namakan countdowntimer
jadi jalankan perintah: create-react-app countdowntimer
Kalau ada kesulitan, interrupt aja ya
dari terminal kita arahkan ke folder aplikasi yang kita
install tadi:
cd countdowntimer
kemudian jalankan perintah: npm start
Coba kita buka folder countdowntimer tadi menggunakan editor
text Sublime, VSCode, Atom, etc
kita akan menemukan folder /src
ada beberapa folder lain juga seperti node_modules, folder
public, file package.json dan README
kita fokus ke folder src
kita hapus semua file yang berada di dalam folder src
setelah folder src kosong, kita buat file baru index.js
/src $ touch index.js
kita ketik code berikut:
coba kita lihat file index.html pada folder public
kita lihat ada id=root disitu
untuk merender kita tambahkan document get id:
di file src/index.js berisi code di bawah ini:
Sekarang, kita create Component baru....
untuk membuat Component Baru (App.js), kita buat file baru
di dalam folder src:
/src $ touch App.js
Isinya file App.js:
export default App
nah, bagaimana cara memanggil component App tersebut?
Kita import App.js ke dalam file index.js
Kira-kira seperti ini code nya:
<div>React Countdowntimer<div>,
document.getElementById("root") kita ganti menjadi component yang
kita buat
Ok, aku lanjut aja ya..yg baru gabung kita baru sampai :
1. install react
2. menghapus semua file pada folder src
3. menambahkan file baru di folder src/index.js
4. menambahkan file baru (Component) di folder src/App.js
berikutnya kita mau menampilkan hari, jam, menit, detiknya
di App.js
berikut code di file App.js:
update App.js
export default
App
untuk mempercantik, kita tambahkan sedikit css
kita tambahkan file css di folder src
/src $ touch App.css
isi code file App.css:
kita import App.css di file App.js
sehingga sekarang code di App.js kita seperti ini:
export default
App
terus, kita buat perbesar fontnya dan menampilkan secara
inline, atau dalam satu row untuk judul, dan satu row untuk hari, tanggal,
menit, detik
file App.css berisi code seperti ini:
update css nya udah, kita
update juga code di App.js:
export default
App
Ok, aku lanjut aja ya..yg baru gabung kita baru sampai :
1. install react
2. menghapus semua file pada folder src
3. menambahkan file baru di folder src/index.js
4. menambahkan file baru (Component) di folder src/App.js
5. menambahkan file baru sebagai style di folder src/App.css
6. Kenalan dengan "State"
sekarang kita kenalan yuk dengan STATE
https://reactjs.org/docs/state-and-lifecycle.html
state = ada constructor, ada props, dalam React, state
selalu berupa Object (ada key: value)
code lengkapnya dengan menambahkan state di file App.js
kita:
export default
App
Sekarang bagaimana caranya update state yang kita buat.
Dalam case ini, bagaimana cara mengganti tanggalnya..
Update State
Menambahkan method mengubah tanggal
Jangan mutate atau mengubah state secara langsung.
cara yang baik untuk update state (local state) yaitu :
kita tambahkan code berikut di button submit:
<button onClick={() => this.changeDeadline()}>Submit</button>
sehingga berikut code App.js kita untuk update state:
export default
App
Update sebelumnya hanya perubahan kalau diklik tombol
submit.
Bagaimana kalau update/ubah dengan input tanggal yang kita
inginkan?
Koreksi kak
Nama methodnya yg ngerubah state changeDeadline() yah
harusnya
berikut code App.js yang udah di koreksi:
export default
App
kita update sedikit code kita untuk mengambil data
berdasarkan hasil inputan:
import React, { Component } from 'react'
import './App.css'
export default
App
berikutnya kita menambahkan Component baru namanya Clock
/src $ touch Clock.js
export default Clock
kita import di App.js kita:
export default
App
berikut code di file src/Clock.js
Clock.js
export default Clock
kita tambahkan STATE juga di Component Clock ini:
Clock.js
export default Clock
Ok, aku lanjut aja ya..yg baru gabung kita baru sampai :
1. install react
2. menghapus semua file pada folder src
3. menambahkan file baru di folder src/index.js
4. menambahkan file baru (Component) di folder src/App.js
5. menambahkan file baru sebagai style di folder src/App.css
6. Kenalan dengan "State"
7. Update State dengan setState
8. tambah Component baru di folder src/Clock.js
sekarang poin 9. Calculate waktunya
dengan menambahkan method:
untuk proses asyncrhonous set interval untuk time running
1000 ms (atau persatu detik)
tambahkan componentDidMount.
berikut code lengkapnya Clock.js:
export default Clock
nah, sekarang kita mau menambahkan react-bootstrap
kita jalankan perintah berikut di terminal kita:
npm i -S react-bootstrap
copy code berikut ke dalam file public/index.html:
Kira-kira seperti ini:
kemudian kita import di App.js
export default App
segitu dulu yang bisa aku sharing-kan ke teman-teman
maaf masih banyak kekurangan :)
Tidak ada komentar:
Posting Komentar