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

1npm create [email protected]
2
bashCopy

Jika Anda belum install versi 3.0, maka output yang keluar akan seperti ini.

1Need to install the following packages:
2  [email protected]
3Ok to proceed? (y)
4
bashCopy

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

1? Project name: › vite-project
2
bashCopy

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

1✔ Project name: … react-starter
2
bashCopy

Selanjutnya dia akan bertanya kita ingin project ini di generate pakai framework apa atau bahkan vanilla.

1? Select a framework: › - Use arrow-keys. Return to submit.
2❯   vanilla
3    vue
4    react
5    preact
6    lit
7    svelte
8
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.

1? Select a variant: › - Use arrow-keys. Return to submit.
2❯   react
3    react-ts
4
bashCopy

Maka Anda bisa tekan enter langsung untuk memilih regular javascript. Selanjutnya, dia akan memberikan output keselurahan seperti:

1✔ Project name: … react-starter
2✔ Select a framework: › react
3✔ Select a variant: › react
4
5Scaffolding project in /Users/irsyadadl/code/react-starter...
6
7Done. Now run:
8
9  cd react-starter
10  npm install
11  npm run dev
12
bashCopy

Setelah itu, kita bisa lanjut untuk menjalankan perintah yang di perintahkan nya. Pertama, mari kita masuk kedalam folder yang kita telah buat tadi.

1cd react-starter
2
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.

1npm install && npm run dev
2
bashCopy

Setelah itu, maka dia akan memberikan kita output yang kurang lebih akan seperti:

1VITE v3.0.5  ready in 349 ms
2
3  ➜  Local:   http://localhost:5173/
4  ➜  Network: use --host to expose
5
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.

1npm install --save-dev --save-exact prettier
2
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:

1{
2    "tabWidth": 4
3}
4
jsonCopy

By default vite ini akan menggenerasi tab 2, Anda bisa melihatnya tepat pada file App.jsx yang ada di dalam folder src.

1import { useState } from 'react'
2import reactLogo from './assets/react.svg'
3import './App.css'
4
5function App() {
6  const [count, setCount] = useState(0)
7
8  return (
9    <div className="App">
10      <div>
11        ...
12      </div>
13      <h1>Vite + React</h1>
14      <div className="card">
15        ...
16      </div>
17      <p className="read-the-docs">
18        Click on the Vite and React logos to learn more
19      </p>
20    </div>
21  )
22}
23
24export default App
25
jsxCopy

Maka sekarang, kita akan jalankan prettier untuk merubah seperti.

1npx prettier --write .
2
bashCopy

Maka outputnya kurang lebih akan sudah seperti:

1.prettierrc.json 34ms
2index.html 30ms
3package-lock.json 52ms
4package.json 9ms
5src/App.css 33ms
6src/App.jsx 27ms
7src/index.css 9ms
8src/main.jsx 5ms
9vite.config.js 5ms
10
bashCopy

Sekarang, maka Anda buka lihat lagi App.jsx tersebut, maka harusnya hasilnya sudah akan berubah menjadi 4 tab.

1import { useState } from "react";
2import reactLogo from "./assets/react.svg";
3import "./App.css";
4
5function App() {
6    const [count, setCount] = useState(0);
7
8    return (
9        <div className="App">
10            <div>
11                ...
12            </div>
13            <h1>Vite + React</h1>
14            <div className="card">
15                ...
16            </div>
17            <p className="read-the-docs">
18                Click on the Vite and React logos to learn more
19            </p>
20        </div>
21    );
22}
23
24export default App;
25
jsxCopy

Instalasi Tailwind CSS

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

1npm install -D tailwindcss postcss autoprefixer
2
bashCopy

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

1npx tailwindcss init -p
2
bashCopy

Sekarang, buka file tailwind.config.cjs, dan silakan modifikasi content nya seperti:

1/** @type {import('tailwindcss').Config} */
2module.exports = {
3    content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
4    theme: {
5        extend: {},
6    },
7    plugins: [],
8};
9
jsCopy

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

1@tailwind base;
2@tailwind components;
3@tailwind utilities;
4
cssCopy

Setelah itu, silakan buka file App.jsx kembali, dan silakan modifikasi isi nya seperti:

1import React from 'react'
2
3export default function App() {
4  return (
5    <div className='bg-gray-900 flex items-center justify-center min-h-screen'>
6        <div className="bg-gray-800 border-t border-gray-600 shadow rounded-lg max-w-lg w-full p-6">
7            <h4 className='text-white text-2xl'>Hello React</h4>
8            <p className='text-lg text-gray-400 leading-relaxed'>A JavaScript library for building user interfaces</p>
9        </div>
10    </div>
11  )
12}
13
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.

1npm install -D prettier-plugin-tailwindcss
2
bashCopy

Setelah itu, jalankan ulang prettier nya seperti:

1npx prettier --write .
2
bashCopy

Instalasi React Router

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

1npm install [email protected]
2
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.

1import React from "react";
2import ReactDOM from "react-dom/client";
3import { BrowserRouter } from "react-router-dom";
4import App from "./App";
5import "./index.css";
6
7ReactDOM.createRoot(document.getElementById("root")).render(
8    <React.StrictMode>
9        <BrowserRouter>
10            <App />
11        </BrowserRouter>
12    </React.StrictMode>
13);
14
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.

1import React from "react";
2import Case from "../components/Case";
3export default function Home() {
4    return (
5        <Case>
6            <div className="w-full max-w-lg">
7                <h4 className="text-2xl">Hello React</h4>
8                <p className="text-lg leading-relaxed text-gray-400">
9                    A JavaScript library for building user interfaces
10                </p>
11            </div>
12        </Case>
13    );
14}
15
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.

1import React from "react";
2
3export default function Case({ children }) {
4    return (
5        <div className="grid grid-cols-12">
6            <section className="col-span-10 col-start-2">{children}</section>
7        </div>
8    );
9}
10
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.

1import React from "react";
2import Case from "../components/Case";
3export default function About() {
4    return (
5        <Case>
6            <div className="w-full max-w-lg">
7                <h4 className="text-2xl">I'm About Page</h4>
8                <p className="text-lg leading-relaxed text-gray-400">
9                    You can go to this page because the React router.
10                </p>
11            </div>
12        </Case>
13    );
14}
15
jsxCopy

Setelah itu, buka file Gallery.jsx dan lakukan hal yang sama seperti layaknya file About,.jsx seperti.

1import React from "react";
2import Case from "../components/Case";
3export default function Gallery() {
4    return (
5        <Case>
6            <div className="w-full max-w-lg">
7                <h4 className="text-2xl">Your Gallery</h4>
8                <p className="text-lg leading-relaxed text-gray-400">
9                    The best, you are the best...
10                </p>
11            </div>
12        </Case>
13    );
14}
15
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.

1import React from 'react'
2import { Route, Routes } from 'react-router-dom'
3import Home from '../pages/Home';
4import About from '../pages/About';
5import Gallery from '../pages/Gallery';
6export default function Router() {
7  return (
8    <Routes>
9      <Route path="/" element={<Home />} />
10      <Route path="about" element={<About />} />
11      <Route path="gallery" element={<Gallery />} />
12    </Routes>
13  )
14}
15
jsxCopy

Setelah itu, buka file src/App.jsx dan silakan modifikasi isinya seperti:

1import React from "react";
2import Navbar from "./components/Navbar";
3import Router from "./components/Router";
4export default function App() {
5    return (
6        <>
7            <Navbar />
8            <main className="min-h-screen pt-8">
9                <Router />
10            </main>
11        </>
12    );
13}
14
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.

1import React from "react";
2import { Link } from "react-router-dom";
3
4export default function NavLink({ href, children }) {
5    return (
6        <Link
7            className="inline-flex px-4 py-2 text-blue-300 hover:text-white"
8            to={href}
9        >
10            {children}
11        </Link>
12    );
13}
14
jsxCopy

Setelah itu, maka Anda bisa buka file Navbar.jsx untuk kemudian membuat desain layaknya navigasi seperti:

1import React from "react";
2import Case from "./Case";
3import NavLink from "./NavLink";
4import { Link } from "react-router-dom";
5
6export default function Navbar() {
7    return (
8        <div className="bg-blue-600 py-2">
9            <Case>
10                <div className="flex items-center">
11                    <Link
12                        className="mr-2 text-sm font-semibold uppercase text-white"
13                        to="/"
14                    >
15                        React Starter
16                    </Link>
17                    <NavLink href="/">Home</NavLink>
18                    <NavLink href="/about">About</NavLink>
19                    <NavLink href="/gallery">Gallery</NavLink>
20                </div>
21            </Case>
22        </div>
23    );
24}
25
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:

1npx prettier --write . && npm run dev
2
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 👋🏻