Kuasai React dan MERN: Bangun Klon Facebook Mudah!

Daftar Isi

Pengantar React dan MERN
Persiapan Lingkungan Pengembangan
Membuat Proyek React
Memahami Struktur Proyek React
Membuat Komponen React
State dan Props di React
Routing dengan React Router
Membangun Backend dengan MERN (MongoDB, Express, Node.js)
Integrasi Frontend dan Backend
Deploy Aplikasi Klon Facebook
Sumber Belajar dan Source Code

1. Pengantar React dan MERN

React adalah library JavaScript populer untuk membangun antarmuka pengguna yang interaktif dan responsif. MERN adalah singkatan dari MongoDB, Express, React, dan Node.js, sebuah stack teknologi yang memungkinkan Anda membangun aplikasi web full-stack modern.

Dalam ebook ini, Anda akan belajar langkah demi langkah bagaimana membangun klon Facebook menggunakan React untuk frontend dan MERN untuk backend.

2. Persiapan Lingkungan Pengembangan

Sebelum mulai coding, pastikan Anda sudah menginstal beberapa tools berikut:

Node.js (versi terbaru) - https://nodejs.org
Code Editor seperti VSCode - https://code.visualstudio.com
MongoDB Atlas (cloud) atau MongoDB lokal - https://www.mongodb.com/cloud/atlas
Postman untuk testing API (opsional) - https://www.postman.com

Setelah semua terpasang, kita siap membuat proyek React dan backend MERN.

3. Membuat Proyek React

Gunakan create-react-app untuk membuat proyek React baru dengan cepat.

npx create-react-app klon-facebook
cd klon-facebook
npm start

Setelah perintah di atas dijalankan, browser akan terbuka menampilkan aplikasi React default.

4. Memahami Struktur Proyek React

Berikut adalah struktur folder utama dari proyek React yang baru dibuat:

klon-facebook/
├── node_modules/
├── public/
│   ├── index.html
│   └── ...
├── src/
│   ├── App.js
│   ├── index.js
│   └── ...
├── package.json
└── README.md

Folder src adalah tempat kita menulis kode React. File App.js adalah komponen utama aplikasi.

5. Membuat Komponen React

Komponen adalah blok bangunan utama React. Mari buat komponen sederhana untuk menampilkan header klon Facebook.

import React from 'react';

function Header() {
  return (
    <header className="bg-blue-600 text-white p-4 text-center font-bold text-xl">
      Klon Facebook
    </header>
  );
}

export default Header;

Simpan kode di atas sebagai src/components/Header.js dan import ke App.js :

import React from 'react';
import Header from './components/Header';

function App() {
  return (
    <div>
      <Header />
      <main className="p-4">
        Selamat datang di Klon Facebook!
      </main>
    </div>
  );
}

export default App;

Tampilan aplikasi React dengan header biru bertuliskan Klon Facebook dan teks selamat datang di bawahnya

6. State dan Props di React

State adalah data yang dapat berubah di dalam komponen, sedangkan props adalah data yang dikirim dari komponen induk ke anak.

Contoh penggunaan state dan props:

import React, { useState } from 'react';

function Post({ author, content }) {
  const [likes, setLikes] = useState(0);

  return (
    <div className="border p-4 rounded mb-4 bg-white shadow">
      <h3 className="font-semibold mb-2">{author}</h3>
      <p className="mb-2">{content}</p>
      <button
        className="bg-blue-600 text-white px-3 py-1 rounded hover:bg-blue-700"
        onClick={() => setLikes(likes + 1)}
      >
        Like ({likes})
      </button>
    </div>
  );
}

export default Post;

Gunakan komponen Post di App.js :

import React from 'react';
import Post from './components/Post';

function App() {
  return (
    <div className="p-4">
      <Post author="Budi" content="Halo, ini postingan pertama saya!" />
      <Post author="Sari" content="React sangat menyenangkan!" />
    </div>
  );
}

export default App;

7. Routing dengan React Router

React Router memungkinkan navigasi antar halaman tanpa reload. Instal dulu:

npm install react-router-dom

Contoh penggunaan React Router:

import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';

function Home() {
  return <h2>Beranda</h2>;
}

function Profile() {
  return <h2>Profil Pengguna</h2>;
}

function App() {
  return (
    <Router>
      <nav className="bg-blue-600 p-4 text-white flex space-x-4">
        <Link to="/" className="hover:underline">Beranda</Link>
        <Link to="/profile" className="hover:underline">Profil</Link>
      </nav>
      <main className="p-4">
        <Routes>
          <Route path="/" element=<Home /> />
          <Route path="/profile" element=<Profile /> />
        </Routes>
      </main>
    </Router>
  );
}

export default App;

8. Membangun Backend dengan MERN (MongoDB, Express, Node.js)

Backend akan menangani data pengguna, postingan, dan autentikasi. Berikut contoh sederhana server Express yang terhubung ke MongoDB:

// server.js
const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');

const app = express();
app.use(cors());
app.use(express.json());

mongoose.connect('mongodb+srv://username:password@cluster0.mongodb.net/klonfacebook?retryWrites=true&w=majority', {
  useNewUrlParser: true,
  useUnifiedTopology: true,
});

const PostSchema = new mongoose.Schema({
  author: String,
  content: String,
  createdAt: { type: Date, default: Date.now },
});

const Post = mongoose.model('Post', PostSchema);

app.get('/posts', async (req, res) => {
  const posts = await Post.find().sort({ createdAt: -1 });
  res.json(posts);
});

app.post('/posts', async (req, res) => {
  const newPost = new Post(req.body);
  await newPost.save();
  res.status(201).json(newPost);
});

const PORT = process.env.PORT || 5000;
app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

Simpan file ini sebagai server.js dan jalankan dengan node server.js .

Tampilan terminal yang menunjukkan server Express berjalan dengan koneksi MongoDB

9. Integrasi Frontend dan Backend

Kita akan mengambil data postingan dari backend dan menampilkannya di React menggunakan fetch dan useEffect .

import React, { useState, useEffect } from 'react';

function PostsList() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    fetch('http://localhost:5000/posts')
      .then(res => res.json())
      .then(data => setPosts(data))
      .catch(err => console.error(err));
  }, []);

  return (
    <div>
      {posts.map(post => (
        <div key={post._id} className="border p-4 rounded mb-4 bg-white shadow">
          <h3 className="font-semibold mb-2">{post.author}</h3>
          <p>{post.content}</p>
        </div>
      ))}
    </div>
  );
}

export default PostsList;

Gunakan PostsList di App.js untuk menampilkan postingan dari server.