Cara Membuat Aplikasi dengan Ruby on Rails dan ReactJS: Panduan Lengkap untuk Pemula

August 14, 2025 blog_teknokrat

Membangun aplikasi web menggunakan Ruby on Rails (RoR) untuk backend dan ReactJS untuk frontend adalah pilihan populer bagi pengembang yang ingin menggabungkan kecepatan pengembangan dan skalabilitas dengan pengalaman pengguna yang interaktif. Ruby on Rails adalah framework backend yang sangat produktif untuk membangun aplikasi web, sementara ReactJS memungkinkan Anda membuat antarmuka pengguna (UI) yang dinamis dan responsif. Menggabungkan keduanya memberikan keuntungan terbaik dari kedua dunia: backend yang kuat dan frontend yang cepat.

Pada panduan ini, kita akan membahas langkah-langkah untuk membuat aplikasi dengan Ruby on Rails dan ReactJS, mulai dari setup proyek hingga mengintegrasikan keduanya.

baca juga Rektor IPB University Arif Satria Puji Digital Smart Composter Inovasi Tim Dosen-Mahasiswa Universitas Teknokrat Indonesia

Langkah 1: Menyiapkan Proyek Ruby on Rails

Instal Ruby dan Rails:
Pastikan Anda sudah menginstal Ruby dan Ruby on Rails di komputer Anda. Jika belum, Anda bisa menginstalnya melalui terminal dengan perintah berikut:
- Instal Ruby: brew install ruby
- Instal Rails: gem install rails
Buat Proyek Ruby on Rails Baru:
Setelah Ruby dan Rails terinstal, buat aplikasi Rails baru menggunakan perintah: rails new myapp --database=postgresql --skip-javascript Perintah ini membuat aplikasi Rails baru dan melewatkan instalasi JavaScript bawaan (karena kita akan menggunakan ReactJS untuk frontend).
Masuk ke Direktori Aplikasi: cd myapp
Setup Database:
Setelah itu, buat dan migrasikan database PostgreSQL (atau database yang Anda pilih): rails db:create rails db:migrate

Langkah 2: Menyiapkan ReactJS di dalam Aplikasi Rails

Untuk mengintegrasikan ReactJS dengan Rails, kita bisa menggunakan Webpacker, yang sudah terintegrasi dengan Rails untuk menangani JavaScript modern.

Install Webpacker:
Webpacker adalah gem yang memungkinkan Rails untuk bekerja dengan JavaScript modern. Instal Webpacker di proyek Rails Anda: rails webpacker:install
Install ReactJS dengan Webpacker:
Setelah Webpacker terinstal, jalankan perintah berikut untuk menambahkan ReactJS ke dalam proyek Rails: rails webpacker:install:react Ini akan menginstal React dan konfigurasi yang diperlukan untuk proyek Rails Anda.
Verifikasi Instalasi:
Pastikan React sudah terinstal dengan memeriksa apakah folder app/javascript sekarang berisi file React.

Langkah 3: Membuat Komponen ReactJS

Sekarang kita akan membuat beberapa komponen React di dalam aplikasi Rails. Di dalam folder app/javascript, buat folder baru bernama components untuk menyimpan komponen React Anda.

Buat Komponen React:
Buat file baru di dalam folder app/javascript/components, misalnya HelloWorld.js: import React from "react"; const HelloWorld = () => { return ( <div> <h1>Hello, Rails and React!</h1> </div> ); }; export default HelloWorld;
Render Komponen di Halaman Rails:
Selanjutnya, kita akan menampilkan komponen React dalam halaman Rails. Untuk melakukan ini, buat file baru di app/views misalnya index.html.erb dan tambahkan kode berikut untuk merender komponen React: <div id="root"></div> <%= javascript_pack_tag 'application' %>
Render Komponen dengan ReactDOM:
Di dalam folder app/javascript/packs, buka file application.js dan impor serta render komponen HelloWorld: import React from 'react'; import ReactDOM from 'react-dom'; import HelloWorld from '../components/HelloWorld'; document.addEventListener('DOMContentLoaded', () => { ReactDOM.render( <HelloWorld />, document.getElementById('root') ); });
Jalankan Aplikasi Rails dan Lihat Hasilnya:
Sekarang Anda dapat menjalankan server Rails untuk melihat aplikasi yang telah dibuat: rails server Kunjungi http://localhost:3000 dan Anda akan melihat teks “Hello, Rails and React!” yang dirender oleh React.

Langkah 4: Menghubungkan Backend Rails dengan Frontend React

Untuk menghubungkan backend Rails dengan frontend React, kita akan menggunakan API. Di sini kita akan menggunakan Rails untuk menyajikan data, dan React untuk mengambil dan menampilkan data tersebut.

Buat Model di Rails:
Misalnya, kita ingin membuat aplikasi untuk mengelola posts. Pertama, buat model dan migrasi untuk Post: rails generate model Post title:string content:text rails db:migrate
Buat Controller API di Rails:
Selanjutnya, buat controller untuk menangani permintaan API untuk posts: rails generate controller Api::Posts Di dalam file app/controllers/api/posts_controller.rb, tambahkan kode berikut: class Api::PostsController < ApplicationController def index @posts = Post.all render json: @posts end def show @post = Post.find(params[:id]) render json: @post end end
Atur Routing untuk API:
Tambahkan rute di config/routes.rb untuk mengakses API: namespace :api do resources :posts, only: [:index, :show] end
Ambil Data di React:
Di dalam komponen React Anda, gunakan fetch atau pustaka seperti Axios untuk mengambil data dari API Rails. Ubah HelloWorld.js untuk mengambil dan menampilkan daftar post: import React, { useEffect, useState } from 'react'; const HelloWorld = () => { const [posts, setPosts] = useState([]); useEffect(() => { fetch('/api/posts') .then(response => response.json()) .then(data => setPosts(data)); }, []); return ( <div> <h1>Posts from Rails API</h1> <ul> {posts.map(post => ( <li key={post.id}>{post.title}: {post.content}</li> ))} </ul> </div> ); }; export default HelloWorld; Ini akan menampilkan daftar posts yang diambil dari API Rails di antarmuka React.

baca juga Revolusi Teknologi Modern Perpustakaan: Akses Lebih Cepat dan Mudah

Langkah 5: Menggunakan React Router untuk Navigasi

Jika aplikasi Anda membutuhkan navigasi antar halaman, Anda bisa menggunakan React Router. Instal React Router di dalam aplikasi Anda:

npm install react-router-dom

Kemudian, konfigurasi React Router di dalam app/javascript/packs/application.js:

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import HelloWorld from "../components/HelloWorld";

document.addEventListener("DOMContentLoaded", () => {
  ReactDOM.render(
    <Router>
      <Switch>
        <Route exact path="/" component={HelloWorld} />
      </Switch>
    </Router>,
    document.getElementById("root")
  );
});

Langkah 6: Menjalankan Aplikasi dan Testing

Jalankan Server Rails:
Jalankan server Rails untuk memastikan backend API berjalan: rails server
Jalankan Frontend React:
Pada aplikasi Rails yang telah disetup dengan Webpacker, React akan di-compile dan dijalankan secara otomatis. Namun, Anda bisa menjalankan build React secara terpisah untuk pengembangan lebih lanjut dengan menggunakan perintah: ./bin/webpack-dev-server Setelah itu, buka http://localhost:3000 dan Anda akan melihat aplikasi React berfungsi dengan data dari backend Rails.

Kesimpulan

Menggabungkan Ruby on Rails dan ReactJS memungkinkan Anda membangun aplikasi web yang cepat dan dinamis dengan memanfaatkan kekuatan Rails di sisi server dan interaktivitas React di sisi klien. Dengan mengikuti langkah-langkah di atas, Anda telah belajar cara mengatur proyek Rails dengan React, membuat API di Rails, dan menghubungkannya ke frontend React. Ini adalah dasar yang baik untuk membangun aplikasi web penuh dengan menggunakan keduanya!

Penulis : tanjali mulia nafisa

Trending Topics