Mulai React.js Dengan Vite.js

8 min read

Published on 11 Aug, 2022 (updated: 29 Nov, 2022)

Written by Irsyad A. Panjaitan

Fill in React.jsViteTailwind CSS

ArticlesMulai React.js Dengan Vite.js

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 [email protected]
bashCopy

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)
bashCopy

Maka Anda bisa tekan enter untuk melanjutkan instalasi vite v3.0.

? Project name: › vite-project
bashCopy

Anda bisa langsung tekan enter dengan default folder vite-project, atau bisa merubah namanya seperti:

✔ Project name: … react-starter
bashCopy

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
bashCopy

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
bashCopy

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
bashCopy

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
bashCopy

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
bashCopy

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
bashCopy

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
bashCopy

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 }
jsonCopy

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
jsxCopy

Maka sekarang, kita akan jalankan prettier untuk merubah seperti.

npx prettier --write .
bashCopy

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
bashCopy

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;
jsxCopy

Instalasi Tailwind CSS

Karena kita membutuhkan desain, mari kita mulai dengan melakukan instalasi Tailwindcss.

npm install -D tailwindcss postcss autoprefixer
bashCopy

Setelah itu selesai, silakan generate postcss.config.cjs dan juga tailwind.config.cjs seperti:

npx tailwindcss init -p
bashCopy

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: [], };
jsCopy

Sekarang, buka file src/index.css dan masukkan directive tailwind nya seperti:

@tailwind base; @tailwind components; @tailwind utilities;
cssCopy

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> ) }
jsxCopy

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
bashCopy

Setelah itu, jalankan ulang prettier nya seperti:

npx prettier --write .
bashCopy

Instalasi React Router

Karena react tidak membawa router by default, maka kita akan lakukan instalasi router nya dengan cara menjalankan perintah berikut.

npm install [email protected]
bashCopy

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> );
jsxCopy

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> ); }
jsxCopy

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> ); }
jsxCopy

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> ); }
jsxCopy

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> ); }
jsxCopy

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> ) }
jsxCopy

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> </> ); }
jsxCopy

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> ); }
jsxCopy

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> ); }
jsxCopy

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
bashCopy

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.
6

Share on