Persiapan Frontend Menggunakan React

Pertama, buat project baru dengan perintah:

npm create-react-app 'nama-project'

Lalu buang file boiler plate yang tidak digunakan (lihat tutorial React Dasar).

Tutorial akan membuat web app sederhana yang menampilkan list film anime, selain itu kita bisa menambahkan data movie baru.

Tutorial juga menggunakan library React Router. Jika belum diinstal, silakan install dengan perintah berikut:

npm i react-router-dom

Untuk keperluan ini, modifikasi atau buat file baru.

Modifikasi src/App.js, file ini akan menggunakan hookrouter untuk mengatur routing.

import React from 'react';
import {BrowserRouter as Router, Switch, Route, Link, useParams, useRouteMatch} from 'react-router-dom';
import Home from './components/Home';
import Animes from './components/Animes';
import Admin from './components/Admin';

export default function App() {
  return (
    <Router>
  <div className="container">
    <div className="row">
        <h1 className="mt-3">Anime Collection</h1>
        <hr className="mb-3"/>
    </div>
    <div className="row">
        <div className="col-md-2">
            <nav>
                <ul className="list-group">
                    <li className="list-group-item"><Link to="/">Home</Link></li>
                    <li className="list-group-item"><Link to="/animes">Anime</Link></li>
                    <li className="list-group-item"><Link to="/admin">Admin</Link></li>
                </ul>
            </nav>
        </div>
        <div className="col-md-10">
          <Switch>
            <Route path="/animes/:id" component={Anime} />
            <Route path="/animes"><Animes /></Route>
            <Route path="/admin"><Admin /></Route>
            <Route path="/"><Home /></Route>
          </Switch>          
        </div>
    </div>
  </div>    
  </Router>
  );
}

function Anime(props){
  let {id} = useParams();
  return(
    <h1>Anime {id}</h1>
  );
}

scr/index.js, file ini akan menampilkan component App.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

Tambahkan file baru src/components/Admin.js, component dummy untuk template awal. Digunakan untuk menampilkan area admin, dimana user dapat menambah dan menghapus film.

import React, { Component } from "react";

export default class Admin extends Component{
    render(){
        return(
            <h1>Manage Anime</h1>
        );
    }
}

Tambahkan file baru src/components/Animes.js, dummy component sebagai tempalate awal. Untuk menampilkan list animes.

Saat ini data animes masih fix coded, pada tutorial ini kita akan menggunakan REST API ke server Golang untuk mengambil data animes.

import React, { Component, Fragment } from "react";
import { Link } from "react-router-dom";

export default class Animes extends Component{
    state = {animes : []}

    componentDidMount(){
        this.setState({
            animes:[
                {id: 1, title: "Attack on Titan S1", runtime: 300},
                {id: 2, title: "Attack on Titan S2", runtime: 300},
                {id: 3, title: "Attack on Titan S3", runtime: 300},
            ]
        })
    }

    render(){
        return(
            <Fragment>
                <h2>Anime List</h2>
                <ul>
                    {this.state.animes.map((e) =>(
                        <li key={e.id}>
                            <Link to={`/animes/${e.id}`}>{e.title}</Link>
                        </li>
                    ))}
                </ul>
            </Fragment>
            
        );
    }
}

Tambahkan file baru src/components/Home.js, dummy component sebagai template untuk menampilkan area Home.

import React, { Component } from "react";

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

Modifikasi public/index.html, dengan menambahkan CDN bootstrap.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <title>Anime App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

File template awal ini masih banyak dummy component. Fungsional dari component akan kita kembangkan satu persatu pada modul berikutnya.

Sharing is caring:

Leave a Comment Cancel reply