Dalam benyak referensi ReactJS yang saya pelajari, biasanya untuk memahami dasar-dasar react mengambil contoh pembuatan Aplikasi harian atau to do list.
1.
Membuat Form Aktivitas Harian
Pertama, tentu harus menyiapkan
form untuk input data aktivitas harian.
a.
Langkah 1
Kita buat
Aplikasi di folder yang kita inginkan kemudian kita buat apps sbb:
Create-react-app
appkegiatan
b.
Kemudian npm start
Kemudian buka di
VSCode Anda.
c.
Tulis Script App.js sbb:
import React, { Component } from 'react';
import './App.css';
class App extends Component {
render() {
return (
<div>
<h3>Membuat Aplikasi List
Kegiatan dengan React JS</h3>
<hr />
<form ref="formulir">
<input type='text' ref="jam" placeholder='jam kegiatan' />
<br />
<input type='text' ref="activitas" placeholder='data kegiatan' />
<br />
<button onClick={this.addTodo}>Simpan</button>
</form>
</div>
);
}
}
export default App;
Penjelasan script:
<form ref="formulir">
<input type='text' ref="jam" placeholder='jam kegiatan' />
<br />
<input type='text' ref="activitas" placeholder='data kegiatan' />
<br />
<button onClick={this.addTodo}>Simpan</button>
</form>
Keterangan:
Membuat form dengan dua input
(jam kegiatan dan data kegiatan) dan juga satu tombol simpan. Yang perlu di
perhatikan adalah ref yang terdapat di baris kode tersebut , karena ref
mengandung indentitas (name) dari form input.
<button onClick={this.addTodo}>Simpan</button>
Keterangan : Kode diatas kita
memberikan event pada tombol yang akan beraksi Ketika di klik (onClick) yang akan menjalankan fungsi dengan nama addTodo
({this.addTodo}) yang akan kita buat pada bab selanjutnya.
2.
Menambah File App.css
body {
text-align: center;
padding: 10;
margin: 10;
}
input {
width: 60%;
padding: 20px;
margin: 10px;
}
input[type=button] {
margin: 10px;
text-decoration: none;
background-color: #04AA6D;
}
ul {
list-style-type: none;
}
3.
Menambah dan Menghapus Data Activitas Harian
import React, { Component } from 'react';
import './App.css';
class App extends Component {
constructor() {
super();
this.state = {todos: []}
}
addTodo = (e) => {
e.preventDefault();
let jam = this.refs.jam.value;
let activitas = this.refs.activitas.value;
this.state.todos.push({jam, activitas});
this.setState({todos: this.state.todos});
this.refs.formulir.reset();
this.refs.jam.focus();
}
hapusTodo = (i) => {
this.state.todos.splice(i,1);
this.setState({todoos: this.state.todos});
}
render() {
return (
<div>
<h3>Membuat Aplikasi List
Kegiatan dengan React JS</h3>
<hr />
<form ref="formulir">
<input type='text' ref="jam" placeholder='jam kegiatan' />
<br />
<input type='text' ref="activitas" placeholder='data kegiatan' />
<br />
<button onClick={this.addTodo}>Simpan</button>
</form>
<hr />
<div>
<ul>
{this.state.todos.map((data, i) =>
<div>
<li key={i}>
<button onClick={()=>this.hapusTodo(i)}>
Hapus
</button>
{data.jam} : {data.activitas}
</li>
</div>
)}
</ul>
</div>
</div>
);
}
}
export default App;
Penjelasan
Script:
constructor() {
super();
this.state = {todos: []}
}
Ket: inisialisasi
state dengan contructor, dimana dibuat state dengan nama todos dengan nilai
awalnya kosong dalam bentuk array.
<button onClick={this.addTodo}>Simpan</button>
Ket:
menjalankan fungsi addTodo setiap tombol di klik, dengan mengubah state yang
awalnya kosong menjadi sesuai dengan yang di isi melalui form input.
addTodo = (e) => {
e.preventDefault();
let jam = this.refs.jam.value;
let activitas = this.refs.activitas.value;
this.state.todos.push({jam, activitas});
this.setState({todos: this.state.todos});
this.refs.formulir.reset();
this.refs.jam.focus();
}
Ket: membuat
fungsi dengan nama addTodo, di dalam fungsi tersebut juga ada 2 nilai yaitu jam
dan activitas. Yang disimpan dalam variable (let) juga dengan nama jam dan
activitas.
Menghapus
Kegiatan:
hapusTodo = (i) => {
this.state.todos.splice(i,1);
this.setState({todos: this.state.todos})
}
Tidak ada komentar:
Posting Komentar