Tutorial React JS 3: Logic, Form & State Sharing

Ini dia Tutorial React JS Bagian 5 untuk Pemula, kita sudah sampai tahap akhir di seri ini. Kita bakal bahas deploy React ke hosting (Vercel/Netlify), optimasi performa, menggunakan API nyata, sampai menghubungkan React dengan backend Node.js.

Review Singkat Bagian 4

Di bagian sebelumnya kita sudah membahas:

• Styling modern (CSS Modules, Styled Components, Bootstrap)
• Routing multi-halaman dengan React Router
• Context API untuk state global
• CRUD API dengan JSONPlaceholder

Sekarang saatnya bawa aplikasi React kita ke level production dan online.

Deploy React ke Vercel

1. Pastikan kamu sudah build aplikasi

npm run build

Ini akan membuat folder build/ berisi file siap produksi

2. Upload ke Vercel

• Buka https://vercel.com
• Login pakai GitHub
• Klik New Project → pilih repo GitHub yang berisi project React-mu
• Ikuti instruksi (Vercel otomatis mendeteksi React dan menjalankan build)

3. Tunggu proses deploy selesai, aplikasi akan punya link seperti

https://namaproject.vercel.app

Deploy React ke Netlify

Step by step:

1. Build project

npm run build

2. Buka https://netlify.com → login

3. Klik Add New Site → Deploy manually

4. Drag & drop folder build ke halaman Netlify

5. Dapatkan link seperti

https://namaproject.netlify.app

Optimasi Performa React

Aplikasi yang cepat bikin user betah.

Tips Optimasi:

• Gunakan React.lazy & Suspense untuk load komponen hanya saat dibutuhkan.
• Gunakan memoization (React.memo, useMemo, useCallback) untuk mencegah render ulang yang tidak perlu.
• Compress gambar dan gunakan format modern (WebP/AVIF).
• Pakai code splitting otomatis dengan dynamic import.

Contoh React.lazy

import React, { Suspense } from 'react';

const Profil = React.lazy(() => import('./Profil'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Profil />
    </Suspense>
  );
}

export default App;

Menggunakan API Nyata (API Cuaca)

Kita akan pakai OpenWeatherMap API.

Daftar gratis: https://openweathermap.org/api → dapatkan API_KEY.

Contoh

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

function Cuaca() {
  const [weather, setWeather] = useState(null);

  useEffect(() => {
    fetch(
      `https://api.openweathermap.org/data/2.5/weather?q=Jakarta&units=metric&appid=API_KEY`
    )
      .then((res) => res.json())
      .then((data) => setWeather(data));
  }, []);

  if (!weather) return <p>Loading...</p>;

  return (
    <div>
      <h2>Cuaca di {weather.name}</h2>
      <p>Suhu: {weather.main.temp}°C</p>
      <p>Kondisi: {weather.weather[0].description}</p>
    </div>
  );
}

export default Cuaca;

Menghubungkan React dengan Backend Node.js

Kita akan buat server sederhana dengan Express.js.

Backend (Node.js + Express)

server.js

const express = require('express');
const cors = require('cors');

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

let data = [{ id: 1, title: 'Belajar React' }];

app.get('/api/posts', (req, res) => {
  res.json(data);
});

app.post('/api/posts', (req, res) => {
  const newPost = { id: Date.now(), title: req.body.title };
  data.push(newPost);
  res.json(newPost);
});

app.listen(5000, () => console.log('Server berjalan di port 5000'));

Jalankan

npm init -y
npm install express cors
node server.js

Frontend (React)

App.js

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

function App() {
  const [posts, setPosts] = useState([]);
  const [title, setTitle] = useState('');

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

  // Create
  const addPost = () => {
    fetch('http://localhost:5000/api/posts', {
      method: 'POST',
      headers: { 'Content-type': 'application/json' },
      body: JSON.stringify({ title }),
    })
      .then((res) => res.json())
      .then((data) => setPosts([data, ...posts]));

    setTitle('');
  };

  return (
    <div>
      <h2>Post dari Backend</h2>
      <input value={title} onChange={(e) => setTitle(e.target.value)} />
      <button onClick={addPost}>Tambah</button>
      <ul>
        {posts.map((p) => (
          <li key={p.id}>{p.title}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

Dengan ini, React berkomunikasi langsung ke server Node.js.

Kesimpulan Bagian 5

Di bagian terakhir ini kita sudah belajar:

✅ Deploy React ke Vercel & Netlify

✅ Optimasi performa

✅ Menggunakan API nyata (OpenWeatherMap)

✅ Menghubungkan React dengan backend Node.js

Selamat! 🎉

Kalau kamu sudah mengikuti materi Bagian 1 sampai Bagian 5, berarti kamu sudah melewati tahap belajar React mulai dari fundamental sampai menghubungkannya ke backend nyata.

Di sepanjang perjalanan ini, kamu sudah mempelajari:

• Bagian 1: Dasar React (komponen, state, props)
• Bagian 2: Event, state lanjut, dan rendering dinamis
• Bagian 3: Conditional rendering, form, lifting state, dan fetch API
• Bagian 4: Styling lanjutan, routing, Context API, dan CRUD API
• Bagian 5: Deploy ke Vercel/Netlify, optimasi performa, API nyata, dan koneksi ke backend Node.js

Dengan semua bekal ini, kamu sudah siap membuat berbagai aplikasi React yang fungsional, responsif, dan siap dipublikasikan.

Pesan terakhir:
Jangan berhenti di sini. Dunia React (dan JavaScript pada umumnya) bergerak cepat. Teruslah bereksperimen, gabungkan kreativitas dengan logika, dan cobalah membangun project nyata. Dari situlah skill kamu akan tumbuh lebih cepat.

Related Posts