Panduan langkah demi langkah tentang cara menggunakan aplikasi React

Karena berbagai kelebihan dan komunitasnya yang besar, banyak aplikasi web modern yang menggunakan React. Pada artikel ini, Anda akan menjelajahi kelebihan dan kekurangan React, berbagai opsi deployment, dan cara men-deploy aplikasi React di Back4app.

Apa itu React?

React adalah sebuah library JavaScript frontend yang bersifat open-source untuk membangun antarmuka pengguna (UI). Meta (sebelumnya dikenal sebagai Facebook) mengembangkan React dan merilisnya pada tahun 2013, dan sejak saat itu, React menjadi salah satu library yang paling populer untuk membangun aplikasi web.

React menggunakan potongan-potongan yang dapat digunakan kembali yang dikenal sebagai komponen sebagai blok bangunan untuk sebuah UI. Komponen-komponen ini mendeskripsikan bagian dari sebuah UI, seperti tombol, form, atau kartu.

Komponen biasanya didefinisikan sebagai fungsi JavaScript yang mengembalikan deskripsi UI komponen menggunakan JSX, ekstensi sintaksis untuk JavaScript yang memungkinkan Anda untuk menulis elemen seperti HTML dalam kode JavaScript Anda.

React memungkinkan Anda untuk membuat komponen UI yang dapat digunakan kembali dan mengelola state dari aplikasi Anda. React menggunakan DOM (Document Object Model) virtual, salinan ringan dari DOM yang sebenarnya, untuk melacak perubahan dan memperbarui tampilan aplikasi secara efisien.

Hal ini membuat aplikasi React terasa lebih responsif dan berkinerja baik, karena React hanya memperbarui komponen yang perlu diubah daripada merender ulang seluruh halaman.

Keuntungan dari React

Beberapa fitur React yang membuatnya menjadi pilihan utama untuk membangun antarmuka pengguna adalah sebagai berikut.

Dapat digunakan kembali

Aplikasi web dengan React terdiri dari beberapa komponen, masing-masing dengan logika yang bertanggung jawab untuk menghasilkan JSX. Komponen-komponen ini dapat sesederhana tombol atau serumit formulir dengan berbagai bidang dan validasi.

Reusability React mengacu pada penggunaan komponen yang sama di beberapa tempat di seluruh aplikasi atau di aplikasi yang berbeda.

Menggunakan kembali komponen mengurangi pengulangan kode, mempertahankan prinsip DRY, dan menghemat waktu pengembangan. Hal ini juga memungkinkan pengaturan dan pemeliharaan kode yang lebih baik, sehingga lebih mudah untuk memahami, menguji, dan men-debug aplikasi.

Ramah SEO

Mesin pencari mengalami kesulitan dalam mengindeks halaman yang menggunakan JavaScript karena membutuhkan browser untuk menjalankan kode JavaScript sebelum halaman tersebut dapat dirender.

Namun, React mendukung fitur yang dikenal sebagai server-side rendering (SSR), yang memungkinkan komponen-komponen React di-render di server dan dikirim ke klien sebagai HTML yang dirender sepenuhnya.

Ini berarti bahwa pemuatan awal situs web React akan menampilkan konten yang dirender secara penuh kepada pengguna, dan interaksi lainnya akan ditangani oleh kode React yang berjalan di browser.

Pendekatan ini memungkinkan mesin pencari untuk mengindeks konten yang di-render secara penuh, sehingga situs web yang menggunakan React lebih ramah terhadap SEO. Rendering sisi server juga meningkatkan waktu pemuatan awal halaman web, membuatnya lebih responsif terhadap pengguna.

Meskipun demikian, mengimplementasikan server-side rendering pada aplikasi React bisa jadi rumit dan membutuhkan pengaturan tambahan.

Komunitas

Komunitas React adalah sebuah kelompok besar dan aktif yang terdiri dari para pengembang, perancang, dan penggemar yang menggunakan dan berkontribusi pada library React.

Komunitas ini mencakup pengembang, startup, dan perusahaan besar yang menggunakan React untuk membangun aplikasi web.

Komunitas ini aktif dan bersemangat, dengan banyak pengembang yang berbagi pengalaman, kiat, dan cuplikan kode di media sosial, blog, dan forum.

Banyak grup meetup dan konferensi yang juga didedikasikan untuk React, seperti React Conf, React Native EU, dan React Summit.

Komunitas React juga aktif dalam berkontribusi pada library React yang bersifat open-source, dengan banyak pengembang yang mengirimkan pull request untuk memperbaiki bug dan menambahkan fitur-fitur baru. Hal ini membantu untuk menjaga agar library tetap up-to-date dan meningkatkan kualitasnya secara keseluruhan.

Dukungan untuk Pengembangan Seluler

React Native adalah kerangka kerja pengembangan seluler lintas platform yang memungkinkan pengembang untuk membangun aplikasi menggunakan React.

Ini memungkinkan pengembang untuk menulis kode dalam JavaScript dan menggunakan kembali basis kode yang sama untuk iOS dan Android. Ia menggunakan prinsip dan konsep yang sama dengan React dan memiliki komunitas yang besar dan aktif.

Ini juga menyediakan seperangkat komponen bawaan dan memungkinkan pengembang untuk menggunakan modul dan API asli.

Keterbatasan React

React, seperti teknologi lainnya, memiliki beberapa keterbatasan. Beberapa keterbatasan utama dari React adalah sebagai berikut.

Kompleksitas dan Kurva Pembelajaran yang Curam

React mungkin merupakan library yang populer dan fleksibel, tetapi bisa jadi rumit untuk dipelajari dan digunakan, terutama bagi para pengembang yang baru mengenal JavaScript dan pengembangan web.

Diperlukan waktu untuk memahami konsep DOM virtual, JSX, dan arsitektur berbasis komponen.

React juga terus diperbarui, menambahkan alat dan pola baru secara berkala. Hal ini menyulitkan komunitas untuk memelihara dokumentasi, sehingga menyulitkan pengembang baru untuk mengikuti perubahan terbaru.

Ukuran Bundel Besar

Aplikasi React umumnya memiliki ukuran bundle yang besar, yang dapat meningkatkan waktu pemuatan awal dan membuat aplikasi menjadi kurang responsif.

Hal ini membuat React kurang ramah SEO karena mesin pencari mengalami kesulitan untuk mengindeks halaman yang menggunakan JavaScript.

Namun, seperti yang telah disebutkan sebelumnya, React memiliki fitur yang disebut server-side rendering (SSR), yang memungkinkan komponen-komponen React di-render di server dan dikirim ke klien sebagai HTML yang dirender sepenuhnya.

Tetapi karena React pada dasarnya adalah library sisi klien, React membutuhkan pengaturan dan sumber daya tambahan untuk mengimplementasikan rendering sisi server.

Keterbatasan ini dapat diatasi dengan menggunakan alat dan teknik yang tepat. Misalnya, menggunakan alat seperti Webpack untuk mengoptimalkan ukuran bundle atau server-side rendering untuk membuat situs web React lebih ramah SEO.

Opsi Penerapan React

Ada beberapa cara untuk menggunakan aplikasi React. Beberapa di antaranya adalah sebagai berikut.

Hosting Statis

Hosting statis adalah cara yang sederhana dan hemat biaya untuk menyebarkan situs web atau aplikasi web, terutama jika tidak memerlukan pemrosesan sisi server yang rumit.

Hosting statis merupakan opsi populer untuk menerapkan situs web atau aplikasi web berskala kecil dan dapat menjadi cara yang hemat biaya dan mudah untuk memulai.

Namun, ini mungkin tidak cocok untuk situs berskala lebih besar yang membutuhkan pemrosesan sisi server yang lebih kompleks atau fitur dinamis.

Contoh platform yang menawarkan hosting statis:

• Netlify
• GitHub Pages
• Surge

Layanan PaaS Seperti Vercel

Platform as a Service, atau PaaS, adalah kategori layanan komputasi awan yang menawarkan platform untuk membuat, menerapkan, dan mengelola aplikasi dan layanan online tanpa perlu repot menyiapkan dan mengelola infrastruktur yang mendasarinya.

Dengan PaaS, pengembang dapat berkonsentrasi pada penulisan kode karena penyedia PaaS akan mengurus jaringan, server, dan penyimpanan.

Hal ini membebaskan para pengembang dari kekhawatiran akan infrastruktur yang mendasarinya dan memungkinkan mereka untuk meluncurkan, memperluas, dan mengelola aplikasi mereka dengan cepat dan mudah.

Beberapa contoh platform PaaS meliputi:

• Vercel
• Heroku
• Dokku
• Microsoft Azure App Service

Namun, ada beberapa kekurangan dalam menggunakan PaaS, termasuk:

• Kontrol terbatas atas infrastruktur
• Penguncian vendor
• Skalabilitas terbatas
• Kurangnya kontrol atas peningkatan dan pemeliharaan

Kelemahan ini mungkin berbeda tergantung pada penyedia PaaS. Dengan demikian, menilai dengan cermat kemampuan dan kendala mereka sangat penting sebelum memutuskan apakah akan menggunakannya.

Layanan BaaS Seperti Back4app

BaaS (Backend as a Service) adalah layanan berbasis cloud yang menyediakan infrastruktur backend yang telah dibangun sebelumnya untuk aplikasi seluler dan web mereka.

Penyedia BaaS biasanya menawarkan layanan seperti basis data, otentikasi pengguna, pemberitahuan push, dan penyimpanan, yang dapat dengan mudah diintegrasikan ke dalam aplikasi.

Hal ini memungkinkan proses pengembangan yang lebih cepat dan mengurangi kebutuhan pengembang akan keahlian teknologi back-end.

Namun, hal ini bisa menjadi mahal seiring berjalannya waktu, pengembang mungkin memiliki kontrol terbatas atas infrastruktur backend, dan mungkin ada penguncian vendor.

Beberapa contoh platform PaaS meliputi:

• Back4app
• Firebase
• AWS Amplify
• Kinvey

Menerapkan Aplikasi React di Back4app

Menerapkan aplikasi React di Back4app bisa sangat menguntungkan karena proses penerapannya yang mudah, yang dapat menghemat waktu secara signifikan.

Selain itu, Back4app menyertakan basis data yang sudah dibuat sebelumnya yang dapat menyimpan data untuk aplikasi React Anda, sehingga Anda tidak perlu membuat dan mengelola basis data yang terpisah.

Back4app juga memungkinkan penskalaan aplikasi Anda dengan mudah untuk menangani peningkatan lalu lintas dan memiliki alat pemantauan kinerja untuk membantu mengoptimalkan kinerja aplikasi Anda.

Selain itu, Back4app menawarkan langkah-langkah keamanan untuk memastikan bahwa aplikasi dan data Anda tetap aman dan dapat dengan mudah diintegrasikan dengan layanan lain.

Apa itu Back4app?

Back4App adalah platform cloud yang memungkinkan pengembang untuk membuat dan meng-host aplikasi web.

Platform ini menyediakan antarmuka yang intuitif untuk mengelola aplikasi web, basis data untuk menyimpan data, dan kompatibilitas dengan beberapa bahasa pemrograman.

Ini juga menawarkan berbagai alat untuk membuat dan menguji aplikasi web, seperti antarmuka baris perintah, SDK, alat pengoptimalan kinerja, analisis, pemantauan, dan sistem bawaan untuk otentikasi dan otorisasi pengguna.

Pengenalan Proyek

Tutorial ini akan memandu Anda dalam membuat aplikasi to-do list dasar dengan menggunakan React. Aplikasi to-do akan mendukung fungsionalitas CRUD (Create, Read, Update, Delete), dan Anda akan menggunakan Back4app untuk menangani lapisan penyimpanan dan akses data.

Untuk mengikuti tutorial ini, Anda harus memenuhi hal-hal berikut ini:

• Pengetahuan tentang HTML dan CSS
• Pengetahuan tentang JavaScript
• Pengetahuan dasar tentang Bootstrap

Membuat Aplikasi Back4app baru

Sebelum Anda dapat membuat aplikasi di Back4app, Anda harus memiliki akun Back4app. Jika Anda tidak memiliki akun Back4app, Anda dapat membuatnya dengan mengikuti langkah-langkah di bawah ini.

1. Buka situs web Back4app.
2. Klik tombol Daftar di sudut kanan atas halaman arahan.
3. Isi formulir pendaftaran dan kirimkan.

Setelah berhasil membuat akun Back4app Anda, masuk ke akun Back4app Anda dan klik tombol APLIKASI BARU di sudut kanan atas. Mengklik tombol ini akan membawa Anda ke formulir yang mengharuskan Anda memasukkan nama aplikasi. Masukkan nama aplikasi Anda dan klik tombol BUAT.

Mengklik tombol CREATE akan membuat aplikasi baru Anda dan membawa Anda ke dasbor aplikasi.

Sekarang Anda telah membuat aplikasi baru di Back4app.

Menyiapkan Lingkungan Pengembangan Anda

Pertama, Anda akan membuat beberapa kode boilerplate menggunakan create-react-app.

Jalankan perintah di bawah ini untuk melakukan scaffolding pada aplikasi React Anda.

npx create-react-app todo-app

Perintah di atas membuat struktur proyek awal dan menginstal dependensi inti yang Anda perlukan untuk mulai membangun aplikasi React, seperti yang ditunjukkan pada gambar di bawah ini.

cd ke dalam todo-app dengan menjalankan perintah di bawah ini:

cd todo-app

Tutorial ini akan menampilkan penggunaan Bootstrap untuk menata komponen UI Anda. Instal Bootstrap dengan menjalankan perintah di bawah ini:

npm install react-bootstrap bootstrap

Menghubungkan ke Back4app

Untuk menghubungkan aplikasi Anda ke server Back4app, Anda perlu menginstal Parse JavaScript SDK.

Instal SDK dengan menjalankan perintah di bawah ini:

#Using npm
npm install parse

#Using yarn
yarn add parse

Selanjutnya, Anda perlu mengonfigurasi SDK menggunakan dua kredensial aplikasi Back4app Anda, yaitu ID Aplikasi dan Javascript KEY.

Pilih Pengaturan Aplikasi pada dasbor aplikasi Back4app Anda untuk mengambil kredensial ini, lalu pilih Keamanan & Kunci. Ini akan membawa Anda ke halaman dengan berbagai kunci Aplikasi. Salin ID Aplikasi dan Javascript KEY, dan simpan dengan aman.

Selanjutnya, impor versi kecil dari Parse dari parse di file entri aplikasi react Anda (app.js).

Sepertinya begitu:

//app.js
import Parse from "parse/dist/parse.min.js";

Selanjutnya, panggil metode inisialisasi pada Parse. Metode ini mengambil ID Aplikasi dan Javascript KEY sebagai argumen.

Sebagai contoh:

//app.js
Parse.initialize(APPLICATION_ID, JAVASCRIPT_KEY);

Memanggil metode inisialisasi dan memberikan ID Aplikasi dan Javascript KEY sebagai argumen akan menginisialisasi parse SDK.

Selanjutnya, atur properti serverURL pada Parse ke https://parseapi.back4app.com/.

Sebagai contoh:

Parse.serverURL = "<https://parseapi.back4app.com/>";

Aplikasi Anda telah diinisialisasi dan dapat terhubung dengan aman ke Back4app.

Membangun Aplikasi Todo

Di dalam berkas app.js Anda, impor hook useEffect dan useState dari react.

Sepertinya begitu:

import { useEffect, useState } from 'react';

UseEffect ****hook memungkinkan Anda untuk mengelola efek samping pada komponen Anda. Ini memungkinkan Anda melakukan efek samping, seperti pengambilan data atau mengubah DOM secara manual setelah komponen dirender.

Dibutuhkan dua argumen, sebuah fungsi dan sebuah deretan ketergantungan opsional, yang menentukan kapan efek harus dijalankan kembali.

Hook useState memungkinkan Anda menambahkan “state” ke komponen Anda. Hook ini memungkinkan Anda membuat variabel state dan fungsi untuk memperbaruinya dan secara otomatis merender ulang komponen setiap kali state berubah. Dibutuhkan satu argumen, yaitu nilai state awal.

Selanjutnya, ganti kode yang ada di fungsi App dengan blok kode di bawah ini:

const [todos, setTodos] = useState([]);
const [input, setInput] = useState('');

Blok kode di atas membuat dua variabel state, todos dan input, dengan menggunakan useState. Variabel todos adalah larik yang diinisialisasi sebagai larik kosong, dan variabel input adalah string yang diinisialisasi sebagai string kosong. Hal ini memungkinkan Anda untuk melacak daftar todos dan input pengguna yang terkait dengannya.

Selanjutnya, tambahkan blok kode di bawah ini ke fungsi Aplikasi:

useEffect(() => {
    fetchTodos();
  }, []);

Kode menggunakan hook useEffect untuk mengambil todos dengan memanggil metode fetchTodos (Anda akan membuat fungsi ini nanti) ketika komponen pertama kali dirender.

Sebagai argumen kedua, array kosong memastikan bahwa efek hanya berjalan satu kali ketika komponen dirender.

Selanjutnya, Anda akan membuat fungsi fetchTodos. Fungsi ini akan berisi logika yang mengambil data todo dari Back4app.

Tambahkan blok kode di bawah ini ke fungsi Aplikasi Anda:

const fetchTodos = async () => {
    try {
      const query = new Parse.Query("Todo");
      const results = await query.find();
      const todos = results.map((result) => {
        return {
          id: result.id,
          task: result.get("task"),
          completed: result.get("completed"),
        };
      });
      setTodos(todos);
    } catch (error) {
      console.log(error);
    }
  };

Blok kode di atas mencari objek “Todo” dari database aplikasi Back4app Anda menggunakan metode Parse.Query().

Kemudian mengembalikan sebuah array yang berisi “hasil” dari kueri dengan memanggil metode find dari Parse SDK pada hasil panggilan Parse.Query().

Terakhir, ia memetakan larik yang dikembalikan ke larik objek yang berisi id, tugas, dan properti yang telah diselesaikan dari setiap hasil dan menetapkan variabel todos ke larik objek ini.

Selanjutnya, buat fungsi addTodo. Fungsi ini akan berisi logika untuk menambahkan todo baru ke database aplikasi Back4app Anda.

Tambahkan blok kode di bawah ini ke fungsi Aplikasi Anda:

const addTodo = async () => {
    try {
      if (input.trim() !== "") {
        const Todo = Parse.Object.extend("Todo");
        const todo = new Todo();
        todo.set("task", input);
        todo.set("completed", false);
        await todo.save();
        setTodos([...todos, { id: todo.id, task: input, completed: false }]);
        setInput("");
      }
    } catch (error) {
      console.log(error);
    }
  };

Blok kode di atas memeriksa apakah nilai masukan kosong atau hanya berisi spasi. Jika nilai masukan tidak kosong, maka akan dibuat objek Parse Todo baru, menetapkan properti tugas ke nilai masukan, menetapkan properti selesai ke false, dan menyimpannya ke server Parse dengan menggunakan pernyataan **a**waittodo.save().

Kemudian, memperbarui status komponen dengan item todo baru dengan memanggil fungsi setTodos dengan larik baru yang menyertakan status(todo) sebelumnya dan objek baru yang mewakili item todo baru.

Item todo baru didefinisikan sebagai objek dengan tiga properti: id (ID dari objek Todo yang disimpan), task (nilai input), dan completed (yang disetel ke false secara default). Terakhir, fungsi setInput dipanggil untuk mengosongkan bidang input dan menetapkan nilainya menjadi string kosong.

Selanjutnya, Anda akan membuat fungsi toggleComplete. Fungsi ini akan berisi logika untuk mengganti tugas antara selesai dan belum selesai berdasarkan ID yang diberikan.

Tambahkan blok kode di bawah ini ke fungsi Aplikasi Anda:

const toggleComplete = async (id) => {
    try {
      const Todo = Parse.Object.extend("Todo");
      const todo = new Todo();
      todo.id = id;
      todo.set("completed", !todos.find((todo) => todo.id === id).completed);
      await todo.save();
      setTodos(
        todos.map((todo) =>
          todo.id === id ? { ...todo, completed: !todo.completed } : todo
        )
      );
    } catch (error) {
      console.log(error);
    }
  };

Blok kode di atas membuat objek Todo baru menggunakan metode Parse.Object.extend ****method. Kemudian, kode ini menetapkan properti id dari objek Todo ke parameter id yang dioper ke fungsi.

Selanjutnya, ia menetapkan properti selesai dari objek Todo ke kebalikan dari nilai saat ini, menggunakan operator ! dan metode todos.find untuk mencari status saat ini dari item todo dengan ID yang diberikan. Kemudian, ia menyimpan objek Todo yang diperbarui ke Back4app menggunakan pernyataan menunggu todo.save().

Setelah objek Todo disimpan, fungsi ini memperbarui status komponen menggunakan fungsi setTodos, yang dipanggil dengan larik baru yang dibuat menggunakan metode todos.map.

Metode todos.map membuat larik baru dengan memetakan larik todos yang sudah ada dan mengganti item todo dengan id yang diberikan dengan objek baru dengan properti yang sama dengan item todo asli namun dengan properti yang telah selesai disetel ke kebalikan dari nilai sebelumnya.

Selanjutnya, Anda akan membuat fungsi deleteTodo. Fungsi ini akan berisi logika untuk menghapus tugas dari database aplikasi Back4app Anda berdasarkan ID yang diberikan.

Tambahkan blok kode di bawah ini ke fungsi Aplikasi Anda:

const deleteTodo = async (id) => {
    try {
      const Todo = Parse.Object.extend("Todo");
      const todo = new Todo();
      todo.id = id;
      await todo.destroy();
      setTodos(todos.filter((todo) => todo.id !== id));
    } catch (error) {
      console.log(error);
    }
  };

Blok kode di atas membuat objek Todo baru menggunakan metode Parse.Object.extend. Kemudian, ia menetapkan properti id dari objek Todo ke parameter id yang diteruskan ke fungsi.

Selanjutnya, ia memanggil metode penghancuran asinkron dari objek Todo untuk menghapus item todo dengan ID yang diberikan dari Back4app.

Setelah item todo dihapus dari Back4app, ia akan memperbarui status komponen menggunakan fungsi setTodos.

Fungsi setTodos dipanggil dengan larik baru yang dibuat menggunakan metode todos.filter. Metode todos.filter membuat larik baru dengan menyaring item todo dengan id yang diberikan. Hal ini dilakukan dengan menggunakan operator !== dan parameter id yang diteruskan ke fungsi deleteTodo.

Selanjutnya, impor elemen Container, Form, Button, dan ListGroup dari react-bootstrap. Anda akan membutuhkan elemen-elemen ini untuk membuat markup JSX untuk aplikasi todo Anda.

Sepertinya begitu:

import { Container, Form, Button, ListGroup } from "react-bootstrap";

Selanjutnya, tambahkan blok kode di bawah ini ke akhir fungsi Aplikasi Anda:

return (
    <Container className="mt-4">
      <h1 className="header">Todo App</h1>
      <Form className="form">
        <Form.Control
          type="text"
          placeholder="Add a new todo..."
          value={input}
          onChange={(e) => setInput(e.target.value)}
        />
        <Button variant="primary" className="add-button" onClick={addTodo}>
          Add
        </Button>
      </Form>
      <ListGroup className="list">
        {todos.map((todo) => (
          <ListGroup.Item key={todo.id} className="d-flex align-items-center">
            <div className="task">
              <Form.Check
                type="checkbox"
                checked={todo.completed}
                onChange={() => toggleComplete(todo.id)}
              />
              <div
                className={`flex-grow-1 ${
                  todo.completed ? "text-decoration-line-through" : ""
                }`}
              >
                {todo.task}
              </div>
            </div>
            <Button
              variant="danger"
              className="del-button"
              onClick={() => deleteTodo(todo.id)}
            >
              Delete
            </Button>
          </ListGroup.Item>
        ))}
      </ListGroup>
    </Container>
  );

Blok kode di atas merender aplikasi Todo sederhana menggunakan pustaka **r**eact-bootstrap. Komponen tersebut mengembalikan elemen Container yang berisi Form dan elemen ListGroup. Di dalam elemen Form, terdapat elemen Form.Control yang memungkinkan pengguna untuk memasukkan item todo baru.

Atribut nilai disetel ke variabel input, yang merupakan bagian dari state komponen. Ketika pengguna mengetik di bidang input, penangan peristiwa onChange akan memperbarui status input dengan nilai baru.

Di samping Form.Control, terdapat elemen Button yang memicu fungsi addTodo ketika diklik.

Di dalam elemen ListGroup, terdapat metode .map yang mengulang larik todos dan merender ListGroup.Item untuk setiap item todo.

Setiap ListGroup.Item berisi elemen Form.Check yang memungkinkan pengguna untuk menandai item pekerjaan yang telah selesai dengan mengklik kotak centang.

Atribut yang dicentang akan disetel ke properti selesai dari item todo terkait. Ketika pengguna mengklik kotak centang, penangan peristiwa onChange akan memanggil fungsi toggleComplete dengan id dari item tugas yang terkait.

Di samping elemen Form.Check. Terdapat div yang menampilkan teks tugas dari item todo yang sesuai. Atribut className diatur ke flex-grow-1 untuk membuat teks mengisi ruang yang tersisa.

Terakhir, elemen Tombol dengan label “Hapus” akan memicu fungsi deleteTodo ketika diklik. Penangan peristiwa onClick meneruskan id dari item todo yang sesuai ke fungsi deleteTodo.

Menata Aplikasi Todo

Buka file App.css Anda dan ganti kode yang ada dengan blok kode di bawah ini.

@import url('<https://fonts.googleapis.com/css2?family=Montserrat&display=swap>');
@import url('<https://fonts.googleapis.com/css2?family=Poppins&display=swap>');

body {
  background-color: #f0f0f0;
  font-family: 'Montserrat', sans-serif;
}

input{
  padding: 0.5rem;
  border: none;
  background-color: #e2e2e2;
  color: #333333;
  font-family: 'Montserrat', sans-serif;
  border-radius: 7px;
}

.container {
  max-width: 30%;
  margin: 0 auto;
  margin-block-start: 9%;
  margin-block-end: 9%;
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.header{
  text-align: center;
  margin-block-end: 3rem;
  font-family: 'Poppins', sans-serif;
}

.list-group-item {
  border: none;
  border-radius: 10px;
  margin-bottom: 10px;
  padding: 10px 15px;
  transition: all 0.3s ease;
}

.list-group-item:hover {
  background-color: #f8f8f8;
}

.text-decoration-line-through {
  text-decoration: line-through;
}

.add-button{
  border: none;
  padding: 0.5rem 1rem;
  color: #FFFFFF;
  font-family: 'Montserrat', sans-serif;
  background-color: #333333;
  border-radius: 7px;
  font-weight: bold;
}

.list{
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-block-start: 3rem;
}

.form{
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-block-end: 2rem;
}

.task{
  display: flex;
  gap: 0.5rem;
}

.del-button{
  padding: 0.5rem 1rem;
  margin-block-start: 1rem;
  background-color: #FFFFFF;
  color: #333333;
  border-radius: 12px;
  border: none;
  font-weight: bold;
  font-family: 'Montserrat', sans-serif;
}

.del-button:hover{
  color: #FFFFFF;
  background-color: #333333;
}

Terakhir, mulai proyek Anda dengan menjalankan perintah di bawah ini:

npm run start

Aplikasi Anda yang sudah jadi akan terlihat seperti gambar di bawah ini:

Anda dapat menemukan proyek yang sudah selesai di repositori GitHub ini.

Kesimpulan

React, sebuah library JavaScript yang populer menyediakan platform yang kuat dan fleksibel untuk membangun antarmuka pengguna yang kompleks dengan komponen yang dapat digunakan kembali.

Hal ini juga memungkinkan pengembang untuk mengelola status aplikasi secara efisien dan memperbarui UI sebagai respons terhadap perubahan data atau interaksi pengguna.

Dalam hal penerapan aplikasi React, Back4app menyediakan solusi backend yang komprehensif yang menyederhanakan proses penerapan dan pengelolaan aplikasi Anda.

Dengan infrastruktur cloud built-in, database yang dapat diskalakan, dan sinkronisasi data secara real-time, Back4app menawarkan kepada para pengembang sebuah platform yang andal dan efisien untuk menerapkan aplikasi React mereka.

PERTANYAAN YANG SERING DIAJUKAN