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