Panduan Lengkap Memulai React.js dengan Vite.js: Langkah demi Langkah
Mencari cara termudah untuk memulai dengan React.js? Pelajari bagaimana Vite.js dapat mempercepat proses pengembangan Anda dalam panduan langkah demi langkah ini.
Dalam artikel ini kita akan memulai react project, kita akan lakukan implementasi React router, Tailwindcss, dan juga prettier. Semoga Anda suka dengan tutorial ini ya dan mari kita mulai.
Instalasi Vite & React
Pertama, mari kita lakukan instalasi vite versi 3 seperti.
npm create vite@latest
Jika Anda belum install versi 3.0, maka output yang keluar akan seperti ini.
Need to install the following packages:
[email protected]
Ok to proceed? (y)
Maka Anda bisa tekan enter untuk melanjutkan instalasi vite v3.0.
? Project name: › vite-project
Anda bisa langsung tekan enter dengan default folder vite-project, atau bisa merubah namanya seperti:
✔ Project name: … react-starter
Selanjutnya dia akan bertanya kita ingin project ini di generate pakai framework apa atau bahkan vanilla.
? Select a framework: › - Use arrow-keys. Return to submit.
❯ vanilla
vue
react
preact
lit
svelte
Maka Anda bisa tekan up dan down pada keyboard untuk memilih react. Dan jika Anda enter, maka dia akan bertanya, apakah kita ingin menggunakan regular javascript atau typescript.
? Select a variant: › - Use arrow-keys. Return to submit.
❯ react
react-ts
Maka Anda bisa tekan enter langsung untuk memilih regular javascript. Selanjutnya, dia akan memberikan output keselurahan seperti:
✔ Project name: … react-starter
✔ Select a framework: › react
✔ Select a variant: › react
Scaffolding project in /Users/irsyadadl/code/react-starter...
Done. Now run:
cd react-starter
npm install
npm run dev
Setelah itu, kita bisa lanjut untuk menjalankan perintah yang di perintahkan nya. Pertama, mari kita masuk kedalam folder yang kita telah buat tadi.
cd react-starter
Kemudian, silakan buka terlebih dahulu project ini di text editor yang Anda miliki saat ini. Setelah itu kembali lagi ke terminal Anda untuk menjalankan perintah seperti berikut ini.
npm install && npm run dev
Setelah itu, maka dia akan memberikan kita output yang kurang lebih akan seperti:
VITE v3.0.5 ready in 349 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
Maka Anda bisa langsung buka di browser dengan alamat yang diberikan nya yaitu http://localhost:5173/.
Instalasi Prettier
Jika sudah, maka sekarang kita lanjut untuk melakukan instalasi prettier agar kode kita terformat dengan bagus.
npm install --save-dev --save-exact prettier
Setelah itu, silakan buat 1 file dengan nama .prettierrc.json di dalam root direktori project kita ini. Silakan buka file .prettierrc.json nya, dan masukkan peraturan untuk merubah tab menjadi 4 seperti:
{
"tabWidth": 4
}
By default vite ini akan menggenerasi tab 2, Anda bisa melihatnya tepat pada file App.jsx yang ada di dalam folder src.
import { useState } from 'react'
import reactLogo from './assets/react.svg'
import './App.css'
function App() {
const [count, setCount] = useState(0)
return (
<div className="App">
<div>
...
</div>
<h1>Vite + React</h1>
<div className="card">
...
</div>
<p className="read-the-docs">
Click on the Vite and React logos to learn more
</p>
</div>
)
}
export default App
Maka sekarang, kita akan jalankan prettier untuk merubah seperti.
npx prettier --write .
Maka outputnya kurang lebih akan sudah seperti:
.prettierrc.json 34ms
index.html 30ms
package-lock.json 52ms
package.json 9ms
src/App.css 33ms
src/App.jsx 27ms
src/index.css 9ms
src/main.jsx 5ms
vite.config.js 5ms
Sekarang, maka Anda buka lihat lagi App.jsx tersebut, maka harusnya hasilnya sudah akan berubah menjadi 4 tab.
import { useState } from "react";
import reactLogo from "./assets/react.svg";
import "./App.css";
function App() {
const [count, setCount] = useState(0);
return (
<div className="App">
<div>
...
</div>
<h1>Vite + React</h1>
<div className="card">
...
</div>
<p className="read-the-docs">
Click on the Vite and React logos to learn more
</p>
</div>
);
}
export default App;
Instalasi Tailwind CSS
Karena kita membutuhkan desain, mari kita mulai dengan melakukan instalasi Tailwindcss.
npm install -D tailwindcss postcss autoprefixer
Setelah itu selesai, silakan generate postcss.config.cjs dan juga tailwind.config.cjs seperti:
npx tailwindcss init -p
Sekarang, buka file tailwind.config.cjs, dan silakan modifikasi content nya seperti:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
theme: {
extend: {},
},
plugins: [],
};
Sekarang, buka file src/index.css dan masukkan directive tailwind nya seperti:
@tailwind base;
@tailwind components;
@tailwind utilities;
Setelah itu, silakan buka file App.jsx kembali, dan silakan modifikasi isi nya seperti:
import React from 'react'
export default function App() {
return (
<div className='bg-gray-900 flex items-center justify-center min-h-screen'>
<div className="bg-gray-800 border-t border-gray-600 shadow rounded-lg max-w-lg w-full p-6">
<h4 className='text-white text-2xl'>Hello React</h4>
<p className='text-lg text-gray-400 leading-relaxed'>A JavaScript library for building user interfaces</p>
</div>
</div>
)
}
Setelah itu, buka kembali terminal Anda dan silakan restart development server nya dengan menekan tombol ctrl+c pada keyboard. Dan jalankan lagi dengan perintah npm run dev.
Dan jika berhasil, silakan buka kembali browser dan lihat hasilnya pasti sudah seperti ini.
Instalasi Tailwind Prettier Plugin
Karena kita menggunakan tailwind css, mari kita install juga plugin prettier nya agar agar attribute class di format dengan baik.
npm install -D prettier-plugin-tailwindcss
Setelah itu, jalankan ulang prettier nya seperti:
npx prettier --write .
Instalasi React Router
Karena react tidak membawa router by default, maka kita akan lakukan instalasi router nya dengan cara menjalankan perintah berikut.
npm install react-router-dom@6
Setelah itu, mari kita modifikasi semua yang telah kita perbuat di bagian sebelumnya. Buka file main.jsx dan silakan modifikasi isinya menjadi seperti ini.
import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import App from "./App";
import "./index.css";
ReactDOM.createRoot(document.getElementById("root")).render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>
);
Kita akan buat 3 halaman disini yaitu Home, About dan Gallery. Untuk memulainya, mari kita buat 1 folder di dalam folder src dengan nama pages. Kemudian di dalamnya, silakan buat 3 file yaitu Home.jsx, About.jsx dan Gallery.jsx. Jika sudah, buka Home.jsx dan masukkan syntax berikut ini.
import React from "react";
import Case from "../components/Case";
export default function Home() {
return (
<Case>
<div className="w-full max-w-lg">
<h4 className="text-2xl">Hello React</h4>
<p className="text-lg leading-relaxed text-gray-400">
A JavaScript library for building user interfaces
</p>
</div>
</Case>
);
}
Perhatikan, bahwa disini saya memasukkan semua komponen ke dalam Case, yang mana itu belum kita buat. Guna dari Case ini bisa di bilang semacam wrapper untuk halaman-halaman yang kita miliki nanti, maka sekarang, buat 1 folder dengan nama components tepat di dalam folder src, dan di dalamnya buat 1 file dengan nama Case.jsx. Buka filenya, dan masukkan syntax berikut.
import React from "react";
export default function Case({ children }) {
return (
<div className="grid grid-cols-12">
<section className="col-span-10 col-start-2">{children}</section>
</div>
);
}
Huft, sudah mulai panjang ya. Tapi santai, kita akan selesai ini dengan tujuan Anda bisa memakai react.js. Buka file About.jsx dan masukkan syntax berikut.
import React from "react";
import Case from "../components/Case";
export default function About() {
return (
<Case>
<div className="w-full max-w-lg">
<h4 className="text-2xl">I'm About Page</h4>
<p className="text-lg leading-relaxed text-gray-400">
You can go to this page because the React router.
</p>
</div>
</Case>
);
}
Setelah itu, buka file Gallery.jsx dan lakukan hal yang sama seperti layaknya file About,.jsx seperti.
import React from "react";
import Case from "../components/Case";
export default function Gallery() {
return (
<Case>
<div className="w-full max-w-lg">
<h4 className="text-2xl">Your Gallery</h4>
<p className="text-lg leading-relaxed text-gray-400">
The best, you are the best...
</p>
</div>
</Case>
);
}
Buat 1 file di dalam folder components dengan nama Router.jsx, di mana di dalam file ini kita akan perkenalkan bahwa path dan komponen untuk halaman-halaman kita punya akan di daftarkan disini.
import React from 'react'
import { Route, Routes } from 'react-router-dom'
import Home from '../pages/Home';
import About from '../pages/About';
import Gallery from '../pages/Gallery';
export default function Router() {
return (
<Routes>
<Route path="/" element={<Home />} />
<Route path="about" element={<About />} />
<Route path="gallery" element={<Gallery />} />
</Routes>
)
}
Setelah itu, buka file src/App.jsx dan silakan modifikasi isinya seperti:
import React from "react";
import Navbar from "./components/Navbar";
import Router from "./components/Router";
export default function App() {
return (
<>
<Navbar />
<main className="min-h-screen pt-8">
<Router />
</main>
</>
);
}
Perhatikan, di sini saya memasukkan Navbar yang mana itu belum kita buat, maka sekarang Anda bisa buat 2 file baru tepat pada folder components, pertama Navbar.jsx, dan kedua NavLink.jsx. Buka file NavLink.jsx dan masukkan syntax berikut.
import React from "react";
import { Link } from "react-router-dom";
export default function NavLink({ href, children }) {
return (
<Link
className="inline-flex px-4 py-2 text-blue-300 hover:text-white"
to={href}
>
{children}
</Link>
);
}
Setelah itu, maka Anda bisa buka file Navbar.jsx untuk kemudian membuat desain layaknya navigasi seperti:
import React from "react";
import Case from "./Case";
import NavLink from "./NavLink";
import { Link } from "react-router-dom";
export default function Navbar() {
return (
<div className="bg-blue-600 py-2">
<Case>
<div className="flex items-center">
<Link
className="mr-2 text-sm font-semibold uppercase text-white"
to="/"
>
React Starter
</Link>
<NavLink href="/">Home</NavLink>
<NavLink href="/about">About</NavLink>
<NavLink href="/gallery">Gallery</NavLink>
</div>
</Case>
</div>
);
}
Baik, untuk fresh saja, silakan buka terminal Anda, dan restart kembali development servernya dengan menakan tombol ctrl+c pada keyboard. Setelah itu jalankan prettier dan jalankan server nya seperti:
npx prettier --write . && npm run dev
Dan sekarang, jika Anda buka di browser. Harusnya tampilannya sudah akan berubah seperti:
Maka untuk totorial ini sudah selesai ya. Jika Anda mendapatkan hasil yang tidak sesuai, jangan khawatir. Karena project ini bisa Anda lihat di github. Anda bisa clone project ini disini. Saya juga sudah membuat tutorial tentang React ini secara gratis dan bisa di tonton di youtube.
Semoga tutorial ini bermanfaat ya, until next time 👋🏻
Irsyad A. Panjaitan
Let's start living like no one can help us in any event, so that when we are helped in certain times, it becomes a plus in itself.