Halo teman-teman, pada kesempatan kali ini akan belajar CRUD dengan React. Kita akan belajar bersama membuat sebuah aplikasi Todo List sederhana. Tetapi sebelum mengikuti tutorial ini pastikan laptop atau komputer sudah memenuhi requirement di bawah ini. Silahkan lihat demo video hasil akhir aplikasi yang akan kita buat pada link berikut.

Demo Simple Todo App dengan React

Requirement

• NodeJS minimal versi 14
• NPM minimal versi 6

Untuk tahap pertama kita akan membuat sebuah aplikasi React baru. Buka terminal/command prompt dan ketikkan perintah di bawah ini.

npx create-react-app todo-app

Tunggu beberapa saat (bisa cepat atau lambat tergantung spesifikasi laptop/komputer yang digunakan) sampai proses pembuatan aplikasi React selesai. Masuk ke folder todo-app dan buka dengan Code Editor favorit kamu (di sini saya menggunakan Visual Studio Code). Tampilan struktur folder dan file akan terlihat seperti gambar di bawah ini.

Untuk menyederhanakan folder aplikasi yang sudah kita buat, kita akan menghapus beberapa file. Silahkan hapus beberapa file di bawah ini.

• src/App.css
• src/App.test.js
• src/logo.svg
• src/reportWebVitals.js
• src/setupTests.js

Kita perlu mengubah file src/App.js dan src/index.js. Buka file src/App.js dan ubah kode nya menjadi seperti di bawah ini.

function App() {
  return (
    <div className="App">
      <h1>Simple Todo App</h1>
    </div>
  );
}

export default App;

Selanjutnya buka file src/index.js dan lakukan perubahan kode nya menjadi seperti di bawah ini.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

Untuk menjalankan aplikasi React silahkan bukan terminal/command prompt dan jalan perintah berikut dari dalam folder aplikasi React yang sudah kita buat (todo-app).

npm run start

Jika tidak ada error, maka output pada terminal/command prompt akan terlihat seperti gambar di bawah ini.

Coba buka URl http://localhost:3000/ pada browser. Maka tampilan awal aplikasi React kita akan seperti gambar berikut.

Source Code:

• https://github.com/sakukode/react-simple-todo-app/tree/chapter/01

---

Artikel ini dibaca sebanyak 24.910 kali