Membuat Single Page Application (SPA) di React JS

Tuesday, October 4, 2022

Membuat Single Page Application (SPA) di React JS

SPA merupakan singkatan dari Single Page Application yaitu sebuah istilah untuk aplikasi yang menggunakan satu halaman sebagai tampilan dari halamannnya. Dimana semua aksi reload page di lakukan dalam halaman tersebut tanpa memuat utuh satu halaman. Hal ini dapat membuat web lebih menarik dan tentunya lebih cepat sebab hanya bagian tertentu yang akan di load.

Menggunakan React Js kita bisa memanfaatkan package react-router-dom untuk membuat Single Page Application. Berikut cara Membuat Single Page Application (SPA) di React JS

1. Menginstall package dengan mengetikkan perintah di bawah :


npm i react-router-dom

2. Edit file src/App.js seperti Berikut

import logo from './logo.svg';
import './App.css';
import {BrowserRouter as Router, Link, Route, Routes} from 'react-router-dom'
import Home from './Home';
import About from './About';
import Profile from './Profile';

function App() {
  return (
    <div className="App">
      <Router>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/profile">Profile</Link>
          </li>
        </ul>
        <Routes>
          <Route path='/' element={<Home/>} />
          <Route path='/about' element={<About/>}/>
          <Route path='/profile' element={<Profile/>}/>
        </Routes>
      </Router>
    </div>
  );
}

export default App;

3. Buat Home.js

import React, { Component } from 'react'

export default class Home extends Component {
  render() {
    return (
      <div>Home</div>
    )
  }
}

4. Buat About.js

import React, { Component } from 'react'

export default class About extends Component {
  render() {
    return (
      <div>About</div>
    )
  }
}

5. Buat Profile.js

import React, { Component } from 'react'

export default class Profile extends Component {
  render() {
    return (
      <div>Profile</div>
    )
  }
}