How to Build a React Frontend and Connect It to a Backend?

dalam tutorial ini, anda akan membuat aplikasi daftar tugas menggunakan react dan menghubungkannya ke layanan backend proyek ini adalah titik awal yang ideal karena melibatkan operasi crud (buat, baca, perbarui, hapus) yang mendasar dan antarmuka pengguna yang sederhana pada akhir tutorial, anda akan memiliki aplikasi yang sepenuhnya fungsional dengan backend yang terhubung, menunjukkan cara mengintegrasikan layanan backend yang dikelola ke dalam alur kerja pengembangan anda membangun aplikasi full stack dari awal sering kali memerlukan pengaturan backend, mengelola database, menangani otentikasi, dan menerapkan infrastruktur tugas tugas ini bisa kompleks dan memakan waktu, terutama jika anda fokus pada pengembangan frontend dan kami akan menggunakan back4app untuk tujuan ini back4app menyederhanakan proses ini dengan menyediakan a backend as a service (baas) yang dapat diskalakan , memungkinkan anda untuk fokus pada pembangunan aplikasi anda sementara ia menangani hosting, database, dan api back4app menawarkan layanan backend, termasuk database yang siap digunakan, otentikasi, cloud code untuk logika sisi server, dan sdk untuk integrasi yang mulus ini juga mendukung penerapan terkontainer, menjadikannya pilihan yang fleksibel untuk hosting aplikasi full stack dengan fitur fitur ini, anda dapat dengan cepat membangun dan menerapkan aplikasi tanpa mengelola infrastruktur server poin penting dengan membaca artikel ini, anda akan belajar untuk siapkan proyek react modern menggunakan alat standar industri integrasikan layanan backend dengan mulus untuk mengelola data aplikasi terapkan operasi crud yang penting untuk pengalaman pengguna yang dinamis terapkan aplikasi todo yang sepenuhnya fungsional dan lihat ia berjalan di aplikasi todo prasyarat untuk mengikuti tutorial ini dengan efektif, pastikan anda memiliki alat dan keterampilan berikut node js dan npm terinstal di mesin anda anda akan menggunakan npm untuk menginstal dependensi dan menjalankan aplikasi react anda verifikasi instalasi anda dengan menjalankan node v dan npm v di terminal anda pengetahuan dasar react , termasuk komponen fungsional, manajemen status dengan hooks, dan penanganan input pengguna tutorial ini tidak akan membahas dasar dasar react, jadi diharapkan anda sudah familiar dengan jsx dan struktur komponen akun back4app untuk mengatur dan mengelola layanan backend anda daftar di back4app https //www back4app com/ jika anda belum memiliki akun dengan ini, anda siap untuk menyiapkan proyek anda dan mulai membangun pengaturan proyek untuk memulai, anda perlu menyiapkan lingkungan pengembangan lokal anda dan menginisialisasi proyek frontend anda menggunakan vite ini memastikan pengalaman pengembangan yang cepat dan efisien sambil menjaga struktur proyek anda tetap bersih pertama, pastikan anda telah menginstal node js (versi lts) jika belum, unduh dari nodejs org https //nodejs org/ dan instal setelah terinstal, verifikasi dengan menjalankan node v npm v sekarang, inisialisasi proyek react anda menggunakan vite , alat build modern yang menawarkan kecepatan superior dibandingkan dengan create react app jalankan perintah berikut di terminal anda, mengganti todo app dengan nama proyek yang anda inginkan npm create vite\@latest todo app template react navigasikan ke dalam folder proyek cd todo app instal dependensi yang diperlukan npm install mulai server pengembangan untuk memverifikasi pengaturan npm run dev ini meluncurkan aplikasi react anda secara lokal buka url yang disediakan di browser anda untuk mengonfirmasi bahwa itu berjalan dengan frontend anda yang sudah disiapkan, langkah selanjutnya adalah membuat backend di back4app untuk menangani penyimpanan data dan interaksi api membuat backend todo back4app menyediakan layanan backend yang sepenuhnya dikelola yang didukung oleh parse , menawarkan database nosql, otentikasi, cloud code, dan generasi api secara langsung ini memungkinkan anda untuk mengelola data aplikasi anda tanpa membangun backend dari awal anda akan membuat model data task untuk menyimpan item daftar tugas dan menghubungkannya ke frontend react anda membuat aplikasi backend masuk ke dasbor back4app https //www back4app com/ dan klik "buat aplikasi baru " masukkan nama untuk aplikasi anda (misalnya, todoapp ) dan pilih nodejs/parse sebagai jenis backend setelah dibuat, pergi ke "database" > "browser" , klik "buat kelas" , dan pilih "kustom" namai task dan atur izin tingkat kelas untuk mengizinkan baca dan tulis publik (anda dapat memperbaikinya nanti) di kelas task , tambahkan bidang berikut judul (string) – judul tugas deskripsi (string) – detail tugas selesai (boolean) – status penyelesaian tanggaljatuhtempo (tanggal) – tenggat waktu tugas klik "simpan" untuk membuat skema menghubungkan back4app ke react sekarang, integrasikan back4app ke dalam proyek react anda menggunakan parse javascript sdk untuk berkomunikasi dengan backend instal melalui npm npm install parse selanjutnya, konfigurasikan sdk dengan menginisialisasinya menggunakan application id dan javascript key ambil kredensial ini dari dasbor back4app di bawah pengaturan aplikasi > keamanan & kunci bagian halaman kunci back4app dengan id aplikasi dan kunci js yang disorot di dalam src/main jsx , konfigurasikan parse dengan mengimpor sdk yang diminimalkan dan menginisialisasinya dengan application id dan javascript key import parse from 'parse/dist/parse min js'; const parse app id = 'your application id'; const parse js key = 'your javascript key'; const parse server url = 'https //parseapi back4app com/'; parse initialize(parse app id, parse js key); parse serverurl = parse server url; dengan backend anda terhubung, anda dapat membangun to do list ui dan mengintegrasikan operasi crud mengembangkan frontend sekarang setelah backend anda disiapkan dan terhubung, saatnya untuk membangun to do list ui di react anda akan membuat komponen untuk menambahkan, menampilkan, memperbarui, dan menghapus tugas sambil mengelola status dengan efisien menyusun komponen aplikasi anda akan terdiri dari tiga komponen kunci taskform jsx – mengelola penambahan tugas baru tasklist jsx – menampilkan semua tugas dan menyediakan kontrol untuk menandai tugas sebagai selesai atau menghapusnya taskitem jsx – mewakili satu tugas dengan tindakan seperti menandai sebagai selesai atau menghapus mulailah dengan membuat folder komponen di dalam src dan tambahkan file file ini mkdir src/components touch src/components/taskform jsx src/components/tasklist jsx src/components/taskitem jsx mengelola status anda akan menggunakan usestate dan useeffect hooks untuk mengelola tugas secara lokal sambil mengambil dan memperbarui data dari back4app pertama, definisikan status di dalam app jsx import { usestate, useeffect } from "react"; import parse from "parse/dist/parse min js"; import taskform from " /components/taskform"; import tasklist from " /components/tasklist"; function app() { const \[tasks, settasks] = usestate(\[]); useeffect(() => { fetchtasks(); }, \[]); const fetchtasks = async () => { try { const task = parse object extend("task"); const query = new parse query(task); const results = await query find(); settasks(results map((task) => ({ id task id, task tojson() }))); } catch (error) { console error("error fetching tasks ", error); } }; return ( \<div classname="container"> \<h1>to do list\</h1> \<taskform fetchtasks={fetchtasks} /> \<tasklist tasks={tasks} fetchtasks={fetchtasks} /> \</div> ); } export default app; membuat form tugas di dalam taskform jsx , buatlah form terkontrol untuk menambahkan tugas baru ini akan menyimpan nilai input dalam status dan mengirimkan data ke back4app import { usestate } from "react"; import parse from "parse/dist/parse min js"; function taskform({ fetchtasks }) { const \[title, settitle] = usestate(""); const \[description, setdescription] = usestate(""); const handlesubmit = async (e) => { e preventdefault(); try { const task = parse object extend("task"); const task = new task(); task set("title", title); task set("description", description); task set("completed", false); await task save(); fetchtasks(); settitle(""); setdescription(""); } catch (error) { console error("error adding task ", error); } }; return ( \<form onsubmit={handlesubmit}> \<input type="text" placeholder="task title" value={title} onchange={(e) => settitle(e target value)} required /> \<input type="text" placeholder="description" value={description} onchange={(e) => setdescription(e target value)} required /> \<button type="submit">add task\</button> \</form> ); } export default taskform; menampilkan tugas di dalam tasklist jsx , render daftar tugas dan sertakan tindakan untuk menandai mereka sebagai selesai dan menghapusnya import taskitem from " /taskitem"; function tasklist({ tasks, fetchtasks }) { return ( \<div> {tasks length === 0 ? ( \<p>no tasks available\</p> ) ( tasks map((task) => ( \<taskitem key={task id} task={task} fetchtasks={fetchtasks} /> )) )} \</div> ); } export default tasklist; komponen item tugas di dalam taskitem jsx , definisikan tindakan untuk menandai tugas sebagai selesai atau menghapusnya dari back4app import parse from "parse/dist/parse min js"; function taskitem({ task, fetchtasks }) { const handlecomplete = async () => { try { const query = new parse query("task"); const tasktoupdate = await query get(task id); tasktoupdate set("completed", !task completed); await tasktoupdate save(); fetchtasks(); } catch (error) { console error("error updating task ", error); } }; const handledelete = async () => { try { const query = new parse query("task"); const tasktodelete = await query get(task id); await tasktodelete destroy(); fetchtasks(); } catch (error) { console error("error deleting task ", error); } }; return ( \<div classname={`task item ${task completed ? "completed" ""}`}> \<h3>{task title}\</h3> \<p>{task description}\</p> \<button onclick={handlecomplete}> {task completed ? "undo" "complete"} \</button> \<button onclick={handledelete}>delete\</button> \</div> ); } export default taskitem; menata aplikasi buat sebuah styles css file di src dan tambahkan penataan dasar / container to center the content and add some spacing / container { max width 600px; margin 40px auto; padding 0 20px; text align center; font family sans serif; } / make the heading stand out and add spacing below it / container h1 { margin bottom 20px; } / style the form so that inputs and the button are nicely spaced and aligned / form { display flex; flex direction column; align items center; gap 10px; margin bottom 20px; } / make the text inputs fill a reasonable width and add padding / form input\[type="text"] { width 80%; max width 400px; padding 8px; box sizing border box; font size 1rem; } / style the 'add task' button / form button { padding 8px 16px; cursor pointer; font size 1rem; border none; background color #eaeaea; transition background color 0 2s ease; } form button\ hover { background color #ccc; } / basic text styles for empty task list message / container p { font size 1rem; } / task item container \ centered in both directions (flex + align items/justify content) \ a gap between elements for visual breathing room / task item { display flex; flex direction column; align items center; justify content center; gap 12px; border 1px solid #ccc; border radius 6px; padding 15px; margin 10px 0; background color #fafafa; text align center; / centers text for titles/descriptions / transition background color 0 2s ease; } / completed tasks visually differ strikethrough and grey text / task item completed h3, task item completed p { text decoration line through; color #888; } / task title / task item h3 { margin 0; font size 1 1rem; } / task description / task item p { margin 0; font size 1rem; } / buttons within each task item (centered and with some spacing) / task item button { padding 6px 12px; border none; background color #eaeaea; cursor pointer; font size 0 9rem; } task item button\ hover { background color #ccc; } / on wider screens, you can display elements in a row but keep them centered adjust justify content/align items if you want them spaced differently / @media (min width 600px) { task item { flex direction row; } } impor css ini di main jsx import " /styles css"; antarmuka aplikasi aplikasi to do list app anda sekarang memiliki frontend yang berfungsi dengan antarmuka react, integrasi back4app, dan styling dasar aplikasi todo list yang selesai selanjutnya, anda akan menerapkan frontend ini ke back4app web deployment menerapkan frontend di back4app web deployment back4app web deployment menyediakan lingkungan terkelola sepenuhnya dan terkontainerisasi untuk menerapkan aplikasi ini mendukung penempatan berbasis docker , memungkinkan anda untuk mengemas frontend anda ke dalam kontainer dan menjalankannya di infrastruktur back4app ini memastikan skalabilitas, keamanan, dan jalur ci/cd yang mudah dengan mengintegrasikan langsung dengan github mengonfigurasi vite untuk kontainerisasi vite menyajikan aplikasi dalam mode pengembangan secara default untuk produksi, anda perlu membangun versi statis dan menyajikannya menggunakan server web ringan seperti nginx pertama, perbarui vite config js untuk menentukan jalur dasar yang tepat untuk penyebaran import { defineconfig } from 'vite'; import react from '@vitejs/plugin react'; export default defineconfig({ plugins \[react()], base ' /', // ensures correct asset paths in a containerized environment }); sekarang, jalankan perintah build untuk menghasilkan file yang siap produksi npm run build membuat dockerfile untuk penyebaran sebuah dockerfile mendefinisikan bagaimana aplikasi react anda dikontainerisasi buat file bernama dockerfile di root proyek anda dan tambahkan konfigurasi berikut \# use an official lightweight node js image from node 18 alpine as build \# set working directory workdir /app \# copy package json and install dependencies copy package json package lock json / run npm install \# copy project files copy \# build the project run npm run build \# use an nginx server for efficient static file serving from nginx\ alpine copy from=build /app/dist /usr/share/nginx/html \# expose port 80 expose 80 \# start nginx cmd \["nginx", " g", "daemon off;"] dockerfile ini melakukan hal berikut menggunakan node js untuk menginstal dependensi dan membangun aplikasi react menyalin file yang dibangun ke dalam nginx kontainer untuk penyajian file statis yang efisien membuka port 80 untuk menyajikan aplikasi membangun dan menguji kontainer secara lokal sebelum melakukan penyebaran, uji kontainer secara lokal untuk memastikan ia berfungsi seperti yang diharapkan jalankan perintah berikut untuk membangun gambar docker docker build t todo frontend kemudian, mulai kontainer menggunakan docker run p 8080 80 todo frontend buka http //localhost 8080 di browser anda untuk mengonfirmasi bahwa aplikasi react anda disajikan dengan benar mengunggah ke github dan menghubungkan ke back4app untuk menerapkan di back4app, pertama, unggah proyek anda ke github git init git add git commit m "initial commit for back4app deployment" git branch m main git remote add origin \<your github repository url> git push u origin main sekarang, ikuti langkah langkah ini untuk menerapkan melalui platform penerapan web back4app masuk ke penerapan web back4app https //www back4app com/containers klik "buat aplikasi baru" , beri nama proyek anda, dan pilih repositori github otorisasi back4app untuk mengakses github anda dan pilih repositori todo app pilih penerapan dockerfile dan konfirmasi pengaturan build klik "terapkan" untuk memicu build pertama mengelola dan memantau penerapan setelah diterapkan, navigasikan ke aplikasi anda di dasbor back4app di sini, anda dapat melihat log untuk memecahkan masalah memantau pengulangan kontainer dan penggunaan sumber daya terapkan kembali pada komit baru menggunakan tombol "trigger build" konfigurasi domain kustom jika hosting di domain pribadi dasbor penyebaran web back4app aplikasi yang diterapkan anda dapat mengakses aplikasi yang diterapkan yang digunakan dalam tutorial ini di https //todoapp ku5ofg8s b4a run/ https //todoapp ku5ofg8s b4a run/ https //todoapp ku5ofg8s b4a run/ dengan front end anda berhasil diterapkan, langkah selanjutnya adalah pengujian dan debugging untuk memastikan semuanya berjalan lancar pengujian dan debugging setelah menerapkan front end dan back end anda, anda perlu memastikan bahwa aplikasi berfungsi dengan benar ini melibatkan pengujian interaksi frontend backend , mengidentifikasi masalah umum, dan melakukan debugging kesalahan secara efektif pengujian aplikasi terintegrasi untuk memverifikasi bahwa frontend react anda berinteraksi dengan benar dengan backend back4app, ikuti langkah langkah berikut uji konektivitas api buka konsol pengembang browser anda ( f12 → tab jaringan ) dan periksa panggilan api saat menambahkan atau mengambil tugas jika permintaan api gagal, periksa status respons dan pesan kesalahan tambahkan dan ambil tugas secara manual gunakan antarmuka daftar tugas untuk menambahkan tugas segarkan halaman untuk memastikan tugas tetap ada buka browser database back4app dan konfirmasi bahwa tugas muncul di bawah kelas tugas periksa operasi crud selesaikan dan hapus tugas dari ui, lalu verifikasi perubahan di database back4app jika pembaruan tidak tercermin, periksa kesalahan di konsol browser atau log api uji kasus tepi coba kirim tugas kosong untuk memastikan validasi berfungsi simulasikan koneksi internet lambat ( chrome devtools → jaringan → lambat 3g ) untuk menguji kinerja masalah umum & pemecahan masalah kesalahan cors ( access control allow origin masalah) pergi ke dasbor back4app > pengaturan aplikasi > keamanan & kunci di bawah "header dan domain yang diizinkan" , tambahkan url frontend anda simpan dan restart backend kegagalan autentikasi (kesalahan 401 tidak terotorisasi) pastikan bahwa id aplikasi dan kunci javascript dikonfigurasi dengan benar di aplikasi react anda jika menggunakan autentikasi pengguna, periksa bahwa token sesi disertakan dalam permintaan api masalah penyebaran backend jika api tidak responsif, navigasikan ke penyebaran web back4app > log untuk memeriksa kesalahan dalam penyebaran backend anda restart kontainer jika perlu dengan pengujian dan debugging selesai, langkah selanjutnya adalah menerapkan praktik terbaik untuk menggunakan layanan back4app untuk mengoptimalkan kinerja dan pemeliharaan praktik terbaik untuk menggunakan layanan back4app berikut adalah beberapa praktik terbaik yang dapat anda ikuti saat menggunakan back4app mengoptimalkan interaksi frontend backend komunikasi yang efisien antara frontend anda dan backend back4app memastikan pengalaman pengguna yang lancar gunakan permintaan batch saat melakukan beberapa operasi untuk mengurangi beban jaringan const tasks = \[task1, task2, task3]; parse object saveall(tasks); untuk operasi baca, aktifkan caching dan atur kueri terindeks di dasbor back4app untuk mempercepat permintaan yang sering selalu minta hanya bidang yang diperlukan untuk meminimalkan ukuran respons query select("title", "completed"); lingkungan & skala simpan kunci sensitif, seperti id aplikasi dan kunci javascript , dalam variabel lingkungan alih alih mengkodekannya secara langsung jika menggunakan vite , buatlah env file vite parse app id=your app id vite parse js key=your js key dalam produksi, aktifkan auto scaling untuk penyebaran web back4app untuk menangani peningkatan lalu lintas pantau penggunaan database dan optimalkan kueri menggunakan alat pemantauan kinerja di back4app keamanan & kinerja yang ditingkatkan batasi izin tingkat kelas (clp) sehingga hanya pengguna yang terautentikasi yang dapat memodifikasi data atur izin baca/tulis secara dinamis berdasarkan peran pengguna task setacl(new parse acl(parse user current())); gunakan cloud code untuk memindahkan logika bisnis yang kompleks dari frontend, mengurangi paparan api dan meningkatkan kinerja akhirnya, aktifkan pembatasan laju dan validasi permintaan untuk mencegah penyalahgunaan dan memastikan integritas data kesimpulan anda sekarang telah membangun aplikasi to do list full stack dengan mengatur frontend react, mengintegrasikannya dengan backend back4app, dan menyebarkannya melalui alur kerja terkontainer proses ini menunjukkan jalur yang jelas dari pengembangan lokal ke penyebaran cloud, memastikan interaksi frontend backend yang lancar melihat ke depan, pertimbangkan peningkatan seperti manajemen pengguna yang lebih canggih, pembaruan waktu nyata, dan integrasi pihak ketiga untuk pembelajaran lebih lanjut, jelajahi dokumentasi back4app https //www back4app com/docs dan sumber daya dukungan komunitas