Kamis, 11 August 2022

    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.

    Terminal
    npm create vite@latest
    

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

    Terminal
    Need to install the following packages:
      [email protected]
    Ok to proceed? (y)
    

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

    Terminal
    ? Project name: › vite-project
    

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

    Terminal
    ✔ Project name: … react-starter
    

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

    Terminal
    ? 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.

    Terminal
    ? 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:

    Terminal
    ✔ 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.

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

    Terminal
    npm install && npm run dev
    

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

    Terminal
    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/.

    welcome screen

    Instalasi Prettier

    Jika sudah, maka sekarang kita lanjut untuk melakukan instalasi prettier agar kode kita terformat dengan bagus.

    Terminal
    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:

    .prettierrc.json
    {
        "tabWidth": 4
    }
    

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

    App.jsx
    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.

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

    App.jsx
    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.

    Terminal
    npm install -D tailwindcss postcss autoprefixer
    

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

    Terminal
    npx tailwindcss init -p
    

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

    tailwind.config.cjs
    /** @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:

    src/index.css
    @tailwind base;
    @tailwind components;
    @tailwind utilities;
    

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

    App.jsx
    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.

    react with tailwindcss

    Instalasi Tailwind Prettier Plugin

    Karena kita menggunakan tailwind css, mari kita install juga plugin prettier nya agar agar attribute class di format dengan baik.

    Terminal
    npm install -D prettier-plugin-tailwindcss
    

    Setelah itu, jalankan ulang prettier nya seperti:

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

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

    main.jsx
    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.

    Home.jsx
    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.

    Case.jsx
    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.

    About.jsx
    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.

    Gallery.jsx
    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.

    Route.jsx
    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:

    App.jsx
    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.

    NavLink.jsx
    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:

    Navbar.jsx
    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:

    Terminal
    npx prettier --write . && npm run dev
    

    Dan sekarang, jika Anda buka di browser. Harusnya tampilannya sudah akan berubah seperti:

    React router implemented

    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 👋🏻

    Karteil
    Destinasi Utama Belajar Online dengan Format Tulisan yang Elegan
    Kunjungi Sekarang

    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.

    Follow me on
    Support me
    SaweriaGithub