Tutorial CRUD dengan React #1: Setup Aplikasi React

Tutorial CRUD dengan React #1: Setup Aplikasi React

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).