Vite

Panduan Pemasangan

Bina projek Vite

terminal

npm create vite@latest nama-projek -- --template react-ts

Anda akan ditanya beberapa soalan. Pilih pilihan berikut:

terminal

✔ Project name: … nama-projek
✔ Select a framework: » React
✔ Select a variant: » TypeScript

Selepas projek dibuat, pergi ke induk projek:

terminal

cd nama-projek

Pasang pakej

npm i @govtechmy/myds-react @govtechmy/myds-style

Konfigurasi stylesheet CSS

Anda boleh menetapkan gaya melalui salah satu daripada dua (2) kaedah yang disenaraikan di bawah.

1. Import CSS

src/index.css

@import "@govtechmy/myds-style/full.css";

2. Tailwind CSS

Sila baca Konfigurasi Gaya untuk konfigurasi lanjutan.

Mula menggunakan komponen!

Cubalah <Button /> untuk memulakan membina dengan MYDS!

src/App.tsx

import { Button } from "@govtechmy/myds-react/button";
 
function App() {
  return (
    <Button variant="primary-fill">
      Hello MYDS
    </Button>
  );
}
 
export default App;

src/main.tsx

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "./index.css";
 
ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Vite

Panduan Pemasangan

Bina projek Vite

Pasang pakej

Konfigurasi stylesheet CSS

Mula menggunakan komponen!

Di halaman ini