React Js

Instalasi Project React

npx create-react-app my-project

Run project my-project

cd my-project

npm start

Instal axios sebagai promise-based HTTP Client

npm install axios

Instal dotenv untuk menggunakan beberapa konfigurasi seperti BASEURL dari API

npm install dotenv

Buat file .env, lalu isi REACT_APP_BASEURL dengan URL dari API yang akan digunakan pada project React

REACT_APP_BASEURL="https://nodejs-api-beta.vercel.app"

api.js

import axios from "axios";

const baseUrl = process.env.REACT_APP_BASEURL

export const getMhsList = async() => {
    const mhs = await axios.get(`${baseUrl}/mahasiswa`)
    // console.log({mhsList: mhs});
    return mhs.data
}

App.js

import './App.css';
import { getMhsList } from './api'; 
import { useEffect, useState } from "react"

const App = () => {
const [mhs, setMhs] = useState([])

  useEffect(() => {
    getMhsList().then((data) => {
      setMhs(data)
    })
  }, [])

  const MhsList = () => {
    return mhs.map((m, i) => {
      return (
          <div className="Mhs-wrapper" key={i}>
            <div className="Mhs-nama">{m.nama}</div>
            <div className="Mhs-npm">{m.alamat}</div>
          </div>
      )
    })
  }

  console.log({ mhs: mhs });
  
  return (
    <div className="App">
      <header className="App-header">
        <h1>Universitas MDP</h1>
        <div className="Mdp-container">
          <MhsList></MhsList>
        </div>
      </header>
    </div>
  );
}

export default App;

Di React, useState dan useEffect adalah dua hook yang sangat penting dan sering digunakan dalam pengembangan komponen.

useState digunakan untuk mengelola state dalam komponen fungsional. Dengan useState, kita dapat membuat variabel state di dalam komponen dan mengubah nilainya.

useEffect digunakan untuk mengatur efek samping (side effects) dalam komponen. Efek samping ini dapat berupa pemanggilan API, manipulasi DOM, atau langkah-langkah lain yang mempengaruhi perilaku komponen.

Pada baris kode di atas, useState digunakan untuk membuat state mhs, kemudian setMhs digunakan untuk mengubah nilai mhs.

setMhs digunakan di dalam useEffect untuk menyimpan data mhs hasil pemanggilan API getMhsList() melalui useEffect.

Di ReactJS, komponen merupakan bagian fundamental dari pengembangan aplikasi. Komponen adalah bagian dari UI yang dapat dipecah menjadi bagian-bagian yang lebih kecil dan dapat digunakan secara terpisah.

Komponen dapat berinteraksi satu sama lain, menerima properti (props), dan menghasilkan tampilan (render) sesuai dengan logika yang diberikan.

App.css

.App {
  text-align: center;
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

.Mdp-container {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.Mhs-wrapper {
  width: 500px;
  background-color: antiquewhite;
  color: black;
}

http://localhost:3000/

https://nodejs-api-beta.vercel.app/mahasiswa