TUTORIAL INSTALL REACT, ROUTING, MAKE TAILWIND

Nama: Jarmiko

1. Buat folder baru, namanya terserah. Disini aku namain React

2. Di dalem React, arahin mouse ke bunderan item ini, terus klik dua kali yang
kosongnya.. kalo udah ganti nama ke cmd. Terus enter

Ganti ke sini
3. Kalo udah selesai, tulis di cmd-nya → npm install -g expo-cli

4. Kalo udah kelar, sekarang tulis → npx create-react-app (nama folder bebas), cuma aku
namain folder coba-tailwind

5. Kalo udah selesai, ketik cd (nama folder yang tadi di-install), tadikan aku install di
folder coba-tailwind. Nah buat masuk ke folder-nya aku tulis cd coba-tailwind
6. Pas udah masuk (yang digaris bawah merah itu). Ketik npm install react-router-dom,
inget di dalem folder yang udah install npx create-react-app kaya punya ku yang coba-
tailwind ini.

7. Kalo udah kelar, lanjut tulis npm install -D tailwindcss postcss autoprefixer

8. Pas selesai, tulis npx tailwindcss init -p

9. Lanjut lagi, ketik npm install tailwindcss@latest

10. Kalo udah kelar, ketik lagi npm install @headlessui/react @heroicons/react

11. Sekarang, karena semua install-an udah kelar.. buka folder itu ke Visual Studio Code.
Ya kalo mau bukanya dari Visual Studio Code pake Open Folder bisa, atau drag and
drop ke VS Code juga bisa. It’s up to you.
12. Terus Ke file tailwind.config.js, ubah yang dalem content: [], jadi content
["./src/**/*.{js,jsx,ts,tsx}"],

13. Pas udah, buka folder src, buka index.css.. terus copy 3 ini di atas tulisan body. Inget,
di atas tulisan body. Caranya, tinggal pencet enter 2 kali di paling kiri body.
@tailwind base;
@tailwind components;
@tailwind utilities;

14. Copy file App.js jadi dua, terus copy-an pertama diganti nama jadi Home, yang kedua
jadi Team.
15. Kalo udah, sekarang buat routing, yang codingannya ditempatin di file App.js. Buka
VS Code terus copy codingan ini di dalem App.js.
Codingannya:

import React, { Suspense, lazy } from 'react';

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

const Home = lazy(() => import('./Home'));

const Team = lazy(() => import('./Team'));

const App = () => (

<Router>
<Suspense fallback={<div>Loading...</div>}>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/Team" element={<Team />} />
</Routes>
</Suspense>
</Router>
);

export default App;

16. Kalo udah, sekarang Buka link ini → https://tailwindui.com/preview#component-
10058606cac5398d7fa2c73b64089874, terus copy semua codigan-nya dan taro di
Home.js. Cara gampangnya tinggal klik yang dilingkarin merah ini, udah auto ke-copy.

17. Kalo udah di-copy dalem Home.js. Pertama tulis import ‘./Team’ dibawah tulisan
import pokoknya. Terus cari tulisan { name: 'Team', href: '#’, current: false }, nah yang
tanda # itu diganti jadi ./Team.

18. Kalo udah, tutup dulu semua div-nya pake tag parent kosong → <> </>. Dimana
taronya? Yang ini → <> Di bawah kurung tulisan return, sama ini → </> di atas kurung.
19. Sekarang copy lagi codingan link ini → https://tailwindui.com/preview#component-
10058606cac5398d7fa2c73b64089874, terus taro di Team.js.

20. Nah, cari tulisan <main> di Team.js, terus delete itu sampe </main>
21. Udah nih? Pas udah, sekarang ke sini → https://tailwindui.com/preview#component-
822ab4bf111e9a34063e651275b381e6, copy semua codingan const people. Copas itu
semua dan taro di bawah const userNavigation.
Edit:
Copas const people dari sini, soalnya tiba-tiba nggak ada di web:
const people = [
{
name: 'Jane Cooper',
title: 'Regional Paradigm Technician',
department: 'Optimization',
role: 'Admin',
email: 'jane.cooper@example.com',
image:
'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-
1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=4&w=
256&h=256&q=60',
},
]

22. Masih di link yang sama, sekarang copy semua div-nya, inget semua div. dari div paling
awal (bawahnya tanda kurung return) sampe div paling akhir itu di-copy (atas tutup
kurung).
Edit:
Copas ini, soalnya nggak ada di web

<div className="flex flex-col">

<div className="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
<div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
<div className="shadow overflow-hidden border-b border-gray-200
sm:rounded-lg">
<table className="min-w-full divide-y divide-gray-200">
 <thead className="bg-gray-50">
<tr>
<th
scope="col"
className="px-6 py-3 text-left text-xs font-medium text-gray-500
uppercase tracking-wider"
>
Name
</th>
<th
scope="col"
className="px-6 py-3 text-left text-xs font-medium text-gray-500
uppercase tracking-wider"
>
Title
</th>
<th
scope="col"
className="px-6 py-3 text-left text-xs font-medium text-gray-500
uppercase tracking-wider"
>
Status
</th>
<th
scope="col"
className="px-6 py-3 text-left text-xs font-medium text-gray-500
uppercase tracking-wider"
>
Role
</th>
<th scope="col" className="relative px-6 py-3">
<span className="sr-only">Edit</span>
</th>
</tr>
</thead>
<tbody className="bg-white divide-y divide-gray-200">
{people.map((person) => (
<tr key={person.email}>
<td className="px-6 py-4 whitespace-nowrap">
<div className="flex items-center">
<div className="flex-shrink-0 h-10 w-10">
<img className="h-10 w-10 rounded-full" src={person.image} alt=""
/>
</div>
 <div className="ml-4">
<div className="text-sm font-medium text-gray-
900">{person.name}</div>
<div className="text-sm text-gray-500">{person.email}</div>
</div>
</div>
</td>
<td className="px-6 py-4 whitespace-nowrap">
<div className="text-sm text-gray-900">{person.title}</div>
<div className="text-sm text-gray-500">{person.department}</div>
</td>
<td className="px-6 py-4 whitespace-nowrap">
<span className="px-2 inline-flex text-xs leading-5 font-semibold
rounded-full bg-green-100 text-green-800">
Active
</span>
</td>
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-
500">{person.role}</td>
<td className="px-6 py-4 whitespace-nowrap text-right text-sm font-
medium">
<a href="#" className="text-indigo-600 hover:text-indigo-900">
Edit
</a>
</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
</div>
</div>
 Ini pokoknya copy dari di
garis merah
sampe div paling bawah.

23. Dan taro di bawah header. Terus nama Dashboard di dalem header itu diganti jadi Team

24. Udah kan, masih di Team.js.. sekarang ke const navigation, Terus cari tulisan { name:
' Dashboard', href: '#’, current: false }, nah yang tanda # itu diganti jadi ./

25. Abis itu, tinggal jalanin program-nya, bisa lewat cmd atau terminal di VS Code, kalo
mau lewat terminal VS Code klik menu Terminal di paling atas SAMPING RUN,
terus pilih New Terminal.
26. Kan muncul terminal nih di VS Code, yaudah ketik npm start disitu.

27. Tada, jadi udah.. cara tau routing jalan atau nggak itu liat di pojok kiri paling bawah di
browser yang dijalanin. Kalo ada tulisan localhost:3000/Team. Berarti itu jalan routing-
nya.
Tapi tipe install Tailwind, Tailwind UI, bahkan React nanti bakal bisa berubah tiap bulannya.
Jadi coba lebih sering liat di web ini buat acuan install, karena siapa tau bulan depan bakal
berubah lagi.

• React documentation
https://reactjs.org/docs/create-a-new-react-app.html
• Tailwind documentation
https://tailwindcss.com/docs/guides/create-react-app
• Tailwind UI documentation
https://tailwindui.com/documentation
Yaudah segitu dulu, kalo ada yang kurang coba tanya-tanya ae.

IKAN HIU MAKAN TOMAT, NAH ITU POKOKNYA.

HAPPY NGODING