ReactJS Lanjutan Pertemuan 1 video 1 — Transcript

Full transcript

1. 0:01Oke, bismillah. Asalamualaikum
2. 0:03warahmatullahi wabarakatuh. Kita balik
3. 0:06lagi, Teman-teman. Kita akan lanjut
4. 0:08materi terkait Raek
5. 0:11lanjutan. Pada sesi kali ini kita akan
6. 0:14coba lanjut untuk mengembangkan sebuah
7. 0:18proyek kita ya, yaitu book sales,
8. 0:21penjualan buku.
9. 0:25Pada bagian bookselles, kita akan coba
10. 0:28untuk menerapkan React ya. Oh ya, karena
11. 0:32sebelumnya kita sudah sama-sama untuk
12. 0:35membuat sebuah proyek. Jadi untuk sesi
13. 0:39video kali ini kita akan coba bikin
14. 0:41ulang lagi ya teman-teman terkait
15. 0:44proyeknya. Kita akan coba
16. 0:47implementasikan React itu menggunakan
17. 0:49nanti ada yang namanya VT ya.
18. 0:54ini kita akan coba menggunakan tools ini
19. 0:58untuk menginstal si React-nya. Kemudian
20. 1:02karena kita sudah mulai
21. 1:05sesi React lanjutan, jadi kita akan juga
22. 1:09sambil instal aja semua modul-modul yang
23. 1:13dibutuhkan. Untuk sesi pertama pada
24. 1:16React lanjutan kita akan coba untuk
25. 1:19langsung menginstal Axios. Kemudian kita
26. 1:22juga akan langsung menginstal React
27. 1:26Router. Yang akan kita gunakan adalah
28. 1:29React Router Doc. seperti
29. 1:32itu. Oh ya, sebelum kita lanjut ke
30. 1:36sesi-nya, saya akan coba tunjukkan dulu
31. 1:40kira-kira akan seperti apa sih website
32. 1:43yang akan kita
33. 1:45bangun. Oke, coba di sini saya sudah
34. 1:49membuatkan contohnya untuk teman-teman
35. 1:54semua. Nah, kita coba lihat di
36. 1:57sini. Nah, ini ya. Jadi untuk proyek
37. 2:02booksells saya coba
38. 2:04implementasikan sebuah UI yang mengambil
39. 2:08dari template flow byitte. Jadi kita
40. 2:12harus tahu dulu
41. 2:13nih yang akan kita gunakan seperti itu.
42. 2:18Nah, ini Flowbit ya, Teman-teman. Jadi,
43. 2:20Flowbet ini menyediakan juga
44. 2:22template-template yang bagus, menarik
45. 2:25untuk membangun sebuah ee tampilan
46. 2:27website. Dan Flowbite itu menggunakan
47. 2:30Tailwin CSS ya. Nanti kita akan coba
48. 2:33gunakan Flowbyte ini. Kemudian kita akan
49. 2:36ee implementasikan bareng-bareng ke
50. 2:38proyek
51. 2:40bookselles. Nah, emm sedikit terkait
52. 2:44followbyt ya. Jadi, Flowbite ini
53. 2:46merupakan salah satu fitur template yang
54. 2:50open source. Kita bisa gunakan
55. 2:52bareng-bareng pada proyek, tugas
56. 2:55kelompok atau pembelajaran pribadi.
57. 2:58Jadi, ini gratis, Teman-teman bisa
58. 2:59gunakan aja dan juga sifatnya open
59. 3:01source seperti itu. Nah, kita lanjut
60. 3:05lagi ke sini ya, Teman-teman. Jadi ini
61. 3:07adalah tampilan pertama yang kira-kira
62. 3:11akan menjadi landing page pada website
63. 3:16kita. Landing
64. 3:18page-nya ada halaman hero. Kemudian di
65. 3:21sini ada testimony, ada footer di bawah.
66. 3:24Kemudian atas ini ada
67. 3:27nafbar. Jadi sederhana aja enggak usah
68. 3:30dibuat rumit karena kita fasenya belajar
69. 3:33ya. Nanti tinggal teman-teman nih untuk
70. 3:36membangun sebuah tampilan yang menjadi
71. 3:38jauh lebih menarik lagi. Oke, ini
72. 3:41tampilan pertama kita coba lihat ke
73. 3:43tampilan
74. 3:45berikutnya. Nah, ini dia. Jadi ini ada
75. 3:49tampilan produk ya. Nanti kita akan
76. 3:52ganti bareng-bareng teman-teman. Jadi
77. 3:54kira-kira seperti ini ya. Udah rapi
78. 3:56banget nih dari flow byte ini udah rapi
79. 3:59dan udah responsif juga. Nanti
80. 4:01teman-teman bisa gunakan.
81. 4:04Ada buku teralis, kemudian ada blok.
82. 4:07Untuk blok ini belum saya ubah
83. 4:10ya, nanti biar teman-teman aja lanjutkan
84. 4:13seperti itu. Untuk halaman login kita
85. 4:16coba lihat di
86. 4:18sini. Nah, ini ya. Halamannya sederhana
87. 4:21aja, kita hanya butuh email dan juga
88. 4:25password di halaman register. Kita bisa
89. 4:28klik di sini, Teman-teman, atau bisa
90. 4:31ubah di bagian endpint yang ada di URL.
91. 4:35Klik. Nah, ini dia. Jadi, kita butuh
92. 4:38tiga aja. Sudah cukup ada your email,
93. 4:42name, dan juga password. Nanti kita akan
94. 4:45coba buat implementasi kodenya
95. 4:50sekaligus. Nah, ini adalah tampilan out.
96. 4:53Ini adalah tampilan pengguna. Gimana
97. 4:56tampilan adminnya? tentunya saya juga
98. 4:58sudah
99. 4:59siapkan. Nah, di sini dia. Jadi, ini
100. 5:03adalah tampilan admin ya, Teman-teman.
101. 5:05Udah rapi nih,
102. 5:08gitu. Untuk bagian tampilan utama
103. 5:10sederhana aja, ada tulisan dashboard
104. 5:14gini ya. ini ketika diklik overview ini
105. 5:17akan masuk ke tampilan
106. 5:19ini. Kemudian ada juga tampilan
107. 5:23user. Ini belum saya buatkan untuk
108. 5:26tampilannya tapi kira-kira sama aja ya
109. 5:29karena bagian admin itu kan berisi
110. 5:31table-table data gitu. Autor genrest ini
111. 5:36juga sama. Nah, tampilannya itu ada di
112. 5:38bagian books,
113. 5:40Teman-teman. Saya sudah siapkan seperti
114. 5:42ini. Bagus ya.
115. 5:44gitu. Ada tampilan search walaupun cuma
116. 5:47panjangan ya, jadi dia enggak real time
117. 5:50untuk saat ini. Tapi enggak apa-apa
118. 5:52karena fiturnya cukup crude ya. Kita
119. 5:55bisa nambah data nanti. Kemudian nanti
120. 5:58kita bisa untuk mengedit ada di tombol
121. 6:01sini bisa hapus juga
122. 6:04gitu. Dan kita akan coba terapkan
123. 6:07pagination ya. Coba kalau bisa nanti
124. 6:11kita coba sambil terapkan
125. 6:13pagination-nya supaya kita bisa
126. 6:16pilih-pilih em halaman-halaman dari
127. 6:19data-data yang
128. 6:21tersedia.
129. 6:23Begitu. Ini tampilan buku. Kemudian ada
130. 6:26tampilan transaction. Kira-kira sama aja
131. 6:29ya, Teman-teman. Tapi nanti untuk bagian
132. 6:32transaction kita enggak
133. 6:34butuh em ini kita enggak butuh
134. 6:37ya. Terus mengubah mengubah ini kita
135. 6:39enggak butuh. Jadi kita bisa hapus aja
136. 6:42nanti seperti itu. Oh ya untuk kode dari
137. 6:47tampilan-tampilannya nanti saya akan
138. 6:49berikan ke teman-teman semua supaya kita
139. 6:52bisa implementasikan langsung. kita akan
140. 6:54berfokus langsung ke cara menggunakan
141. 6:59React dan juga implementasi dari
142. 7:01API. Saya merasa bahwa teman-teman sudah
143. 7:04paham ya di bagian react dasar gimana
144. 7:07caranya kita membuat sebuah komponen,
145. 7:10kita membuat
146. 7:12sebuah ee implementasi seperti ini gitu
147. 7:15ya untuk bikin tampilan. Saya rasa
148. 7:17teman-teman sudah jago semua. Makanya
149. 7:19kita akan lanjut step belajarnya ke
150. 7:22tingkat yang lebih tinggi lagi, yaitu
151. 7:25kita akan menggunakan Aksios,
152. 7:27Teman-teman. Ini ada dokumentasinya, ya.
153. 7:30Ini ada dokumentasi resminya di
154. 7:33aksioshtp.com. Nanti kita bisa instal
155. 7:36bareng-bareng sambil kita instal
156. 7:39React-nya menggunakan VT seperti
157. 7:44itu. Nah, gimana kira-kira menarik ya?
158. 7:49website yang akan kita
159. 7:51kembangkan. Jadi, enggak usah pakai lama
160. 7:54lagi. Ini adalah salah satu contohnya
161. 7:56ya, Teman-teman. Saya sudah siapkan di
162. 7:59dalam tempat
163. 8:01terpisah di sini ya. Saya sudah siapkan
164. 8:05nanti kode-kode untuk bagian komponen.
165. 8:09Ada NAFBAR yang sebelumnya, puter hero
166. 8:12testimonial udah ada juga. Kemudian
167. 8:15nanti kita coba terapkan
168. 8:17layouts yang kita sudah pelajari ya di
169. 8:20materi React
170. 8:23dasar. Ada pages juga. Nah, ini kita
171. 8:26bedakan menjadi tiga ya, Teman-teman.
172. 8:28Ada public. Public nih tampilan yang
173. 8:31awal dia tampilan yang ini
174. 8:34publ yang
175. 8:36ini. Kemudian kita punya admin. Admin
176. 8:40yang sebelumnya tuh yang dashboard admin
177. 8:42ya.
178. 8:43Untuk out ini isinya ada register dan
179. 8:46juga
180. 8:46login gitu. Jadi kodenya sudah tersedia.
181. 8:50Kita akan coba implementasikan
182. 8:53bareng-bareng. Oke. Ee
183. 8:57berikutnya enggak usah pakai lama, kita
184. 9:00akan coba instalasi dulu
185. 9:03nih si VT-nya ya.
186. 9:07Gitu. Kita sekarang beralih ke sini
187. 9:10teman-teman. Jadi silakan teman-teman
188. 9:12sambil ikuti juga kita ke C sini ya ke C
189. 9:18kemudian kita pergi ke SAM HDC. Jadi
190. 9:22saya biasa untuk ee menginstal
191. 9:25proyek-proyek itu di HTDX aja
192. 9:27bareng-bareng dengan proyek yang lain
193. 9:29enggak ada masalah.
194. 9:31Kemudian untuk VT saya akan coba instal
195. 9:35di dalam proyek
196. 9:39em di dalam proyek ini mungkin ya
197. 9:42teman-teman gitu. Teman-teman silakan
198. 9:46sesuaikan aja proyeknya mau ditaruh di
199. 9:49mana pun enggak ada masalah. Yang
200. 9:51penting nanti ee teman-teman atur kode
201. 9:55programnya, folder-foldernya itu rapi ya
202. 9:58gitu.
203. 10:00Nah, di sini ya. Jadi, silakan
204. 10:02teman-teman bisa buka aja terminal di
205. 10:04halaman yang kalian mau. Saya akan coba
206. 10:08instal si VT-nya, Vit React-nya itu di
207. 10:11SIB Mandiri ini. Saya klik kanan, open
208. 10:15in
209. 10:17terminal. Nanti akan muncul seperti ini,
210. 10:20ada
211. 10:21terminalnya. Berikutnya kita langsung
212. 10:24aja
213. 10:26untuk buka dokumentasi VT.
214. 10:30Kita beralih ke sini,
215. 10:33Teman-teman. Ee untuk tampilan yang ini
216. 10:36saya coba tutup dulu, ya supaya enggak
217. 10:39bingung. Kita fokus ke VT-nya dulu. Ini
218. 10:44dia. Kemudian kita coba lihat cara
219. 10:47instalasinya ya, Teman-teman. Bisa ke
220. 10:50bagian get started yang ada di sini.
221. 10:52Kita klik aja. Kemudian kita coba cari
222. 10:57cara
223. 11:04instalasinya. Sli ini
224. 11:08apa? Nah, ini ada kode-kodenya ya. Ee
225. 11:11tapi kayaknya bukan di sini,
226. 11:14Teman-teman. Kita coba cari di bawah.
227. 11:19resources
228. 11:22plugin
229. 11:24kan kita coba cari
230. 11:27react atau kita cari di Google aja kali
231. 11:31ya react gini ya
232. 11:40teman-teman kita coba yang ini ada
233. 11:44enggak guid
234. 11:48Nah, ini ada teman-teman ketemu nih.
235. 11:51Jadi kita bisa trying PT
236. 11:55online. Nah, ini perintahnya teman-teman
237. 11:58ya. Jadi kita bisa menggunakan kode npm
238. 12:03create
239. 12:05vt @
240. 12:07latest gitu.
241. 12:10Nah, ini teman-teman bisa salin sambil
242. 12:12buka
243. 12:13dokumentasi VT-nya itu ada di
244. 12:16bagian GUID ini
245. 12:20ya. Kita ketik aja langsung
246. 12:23npm create
247. 12:26VT lates. Gini ya teman-teman
248. 12:28tulisannya. Ini hati-hati jangan sampai
249. 12:32salah karena kalau salah nanti akan
250. 12:34error. Kalau udah kita enter
251. 12:37aja. Nah.
252. 12:40Jadi
253. 12:41muncul em project name. Teman-teman mau
254. 12:44isi proyek name-nya itu seperti apa?
255. 12:47Karena kita akan membangun sebuah
256. 12:50bookselles. Untuk Laravel itu kan yang
257. 12:53sudah kita bangun adalah bookselles API
258. 12:56ya. Maka supaya
259. 12:59seiras saya kasih nama aja seperti ini.
260. 13:03Bookselles Font gitu ya. Kalau udah kita
261. 13:07enter aja.
262. 13:09Kemudian di sini teman-teman bisa pilih
263. 13:11mau instal yang mana. Kita pilih yang
264. 13:14React ya teman-teman. Ini kalian bisa
265. 13:18gerakin kursornya itu menggunakan arah
266. 13:21panah yang ada di keyboard. Jadi bukan
267. 13:23pakai mouse
268. 13:24ya. Kita pakai arah panah di
269. 13:28keyboard. Kita pilih aja react kemudian
270. 13:30kita
271. 13:31enter. Kemudian pada bagian select
272. 13:34varian teman-teman pilih bagian
273. 13:36JavaScript.
274. 13:40Jadi yang akan kita gunakan adalah
275. 13:42JavaScript ya, Teman-teman. Karena
276. 13:44JavaScript ini merupakan ee versi yang
277. 13:48paling dasar dibandingkan dengan Type
278. 13:52script. Enter
279. 13:54aja. Nah, jadi instalasinya cepat ya,
280. 13:58Teman-teman. Cuma begitu aja gitu.
281. 14:02Pastikan sebelum itu pastikan ya bahwa
282. 14:05teman-teman sudah menginstal node js
283. 14:10gitu maka bisa ee mengetikkan perintah
284. 14:13nvm
285. 14:15ini. Kalau udah kita dikasih ee cara
286. 14:19seperti ini ya. Jadi perintahnya adalah
287. 14:23CD bookself FE. Kemudian kita ketikkan
288. 14:27npm install untuk menginstal
289. 14:30dependensi-dependensinya React dan juga
290. 14:33VT tadi ya. Kemudian kita jalankan
291. 14:35menggunakan npm run dave seperti
292. 14:39itu. Oke, kita bisa CD seperti ini ya,
293. 14:46bookselles FE. Kemudian teman-teman bisa
294. 14:50ketikkan perintah npm install.
295. 14:55Ini adalah proses instalasi dari
296. 14:57dependensi dan
297. 15:00package-package-nya React dan juga
298. 15:03VT. Oke, kalau sudah selesai bisa
299. 15:06langsung masuk ke langkah berikutnya
300. 15:09untuk menjalankan si React-nya,
301. 15:13Teman-teman. Atau kita bisa buka dulu VS
302. 15:17code-nya kali
303. 15:18ya. Untuk proses instalasinya sudah
304. 15:20selesai, Teman-teman. bisa close aja
305. 15:23terminal yang ada di sini. Kita lanjut
306. 15:26untuk membuka VS
307. 15:30Code. Silakan teman-teman buka VS
308. 15:34Code-nya. Kita coba ke sini ya. Kita
309. 15:38open folder. Terus teman-teman cari tadi
310. 15:41tempat instalasi React VT-nya itu ada di
311. 15:46mana. Saya masuk ke SAM HT Doc. Kemudian
312. 15:49tadi saya taruh di bagian SIB Mandiri.
313. 15:52Lalu di bagian
314. 15:53sini kita select
315. 15:56folder ya. Ini
316. 16:01dia. Nah,
317. 16:06sudah. Berikutnya ini
318. 16:09adalah instalasinya teman-teman. Jadi
319. 16:12ada SRC ya. sama seperti yang sudah kita
320. 16:16pelajari pada
321. 16:18materi react dasar.
322. 16:23Oke,
323. 16:25berikutnya teman-teman silakan untuk
324. 16:28membuka terminal baru. Kita bisa
325. 16:32ketikkan CTRL
326. 16:35back seperti ini untuk membuka terminal
327. 16:38baru. Atau teman-teman juga bisa ke
328. 16:41bagian ini titik tig nanti ada ee tempat
329. 16:47yang namanya
330. 16:48terminal gitu.
331. 16:51ini ya. Ini ada shortcut-nya nih. Kita
332. 16:54bisa klik aja. Nah,
333. 17:00sudah.
334. 17:02Kemudian supaya ke depannya selama kita
335. 17:06belajar kelanjutan ini bisa
336. 17:09makin mudah, kita coba
337. 17:14instal package-package yang nanti akan
338. 17:16kita butuhkan ya, Teman-teman.
339. 17:19Silakan buka terminalnya. Kemudian kita
340. 17:22ketik perintah npm I, npm install gitu
341. 17:27ya. Kita akan coba instalasi Axios. Ini
342. 17:31akan teman-teman gunakan untuk integrasi
343. 17:35antara front end dengan API yang sudah
344. 17:37kalian bangun.
345. 17:40Lalu kita juga bisa instal React router
346. 17:46DOM sekaligus seperti
347. 17:49ini. Kalau sudah tinggal di-enter
348. 17:53aja ini proses instalasinya. Oh,
349. 17:56ternyata cepat ya. Ternyata cepat.
350. 18:00Ketika sudah berhasil menginstal, nanti
351. 18:02package-package ini akan terinstal di
352. 18:05bagian file package
353. 18:07JSON. Teman-teman bisa lihat pada bagian
354. 18:11kode di bagian
355. 18:14dependensi Axios-nya sudah masuk ya
356. 18:18berarti sudah terinstal gitu. React
357. 18:20router DOM juga sudah
358. 18:23ada. Nah, kalau sudah ini bisa kita
359. 18:28tutup ya, Teman-teman. Kemudian kita
360. 18:30coba jalankan di terminal
361. 18:32npm run
362. 18:36def. Kita coba
363. 18:39buka ya. Ini dia VT dan React-nya sudah
364. 18:44kita
365. 18:49start. Instalasi sudah berhasil,
366. 18:52package-nya juga sudah. Langkah
367. 18:55selanjutnya kita akan berfokus untuk
368. 18:58membuat tampilan seperti yang sudah saya
369. 19:00tunjukkan ya
370. 19:01teman-teman. Untuk membuat tampilan
371. 19:04supaya kita mengulang lagi nih terkait
372. 19:08materi
373. 19:11dasar. Pertama kita akan
374. 19:14coba di bagian sini ya teman-teman.
375. 19:18app
376. 19:19CSS kita tidak menggunakan CSS bawaan
377. 19:24dari React ya, karena kita punya
378. 19:28template-nya sendiri, kita akan
379. 19:29menggunakan flow byte. Jadi, kan kita
380. 19:31enggak pakai yang ini ya,
381. 19:33Teman-teman.
382. 19:36Nah, kode yang ada di dalam app CSS
383. 19:39teman-teman bisa hapus aja semua. Kita
384. 19:42enggak akan
385. 19:43gunakan. Kita hapus ini. Biarin aja
386. 19:46enggak apa-apa. kosong gitu ya. Atau
387. 19:49teman-teman mau hapus file-nya juga
388. 19:51enggak
389. 19:53apa-apa. Ini saya biarin aja deh.
390. 19:55Kemudian kita masuk ke bagian ini. Nanti
391. 19:59kita atur juga ya,
392. 20:01Teman-teman. Di sini ada index CSS. Nah,
393. 20:05di sini teman-teman ini juga kita hapus
394. 20:07ya. Kita enggak akan menggunakan CSS
395. 20:11bawaan dari React hapus gitu.
396. 20:15Kalau sudah,
397. 20:18maka tampilan react kita jadi seperti
398. 20:23ini. Kemudian kita mengulang lagi
399. 20:26terkait
400. 20:28pembelajaran CSS default secara bawaan.
401. 20:32Ketika teman-teman membuat sebuah
402. 20:34aplikasi
403. 20:36web, HTML itu memiliki CSS bawaan ya.
404. 20:42Kayak misalnya di sini ini ada yang
405. 20:43hurufnya besar, di sini hurufnya kecil
406. 20:46gitu. Kenapa ini bisa terjadi? Karena
407. 20:50terdapat ee CSS bawaan. Untuk itu
408. 20:54alangkah baiknya teman-teman juga ikut
409. 20:57untuk menggunakan yang namanya CSS
410. 21:00riset. Kita akan terapkan CSS riset ini
411. 21:03ke em proyek kita ya.
412. 21:07Karena itulah silakan coba teman-teman
413. 21:09bisa langsung buka Google-nya. Ketikkan
414. 21:13CSS
415. 21:15reset. Ini untuk CSS riset yang paling
416. 21:19terkenal itu ada dua website
417. 21:21teman-teman. Kita bisa menggunakan yang
418. 21:23mayor web atau bisa pakai yang ini dari
419. 21:28jos gitu. Ini sama aja kira-kira
420. 21:31dua-duanya.
421. 21:33Untuk saat ini saya akan pilih bagian ee
422. 21:36jos aja
423. 21:40ya, Teman-teman. Silakan scroll ke
424. 21:42bawah. Kita salin nih kode yang ada di
425. 21:45sini, Teman-teman. Salin atau kalau mau
426. 21:47gampang kita ketik aja sor kita klik aja
427. 21:51tombol yang ada di sini.
428. 21:54Klik. Kemudian kita pindahkan kodenya
429. 21:58kita paste di bagian index.
430. 22:00CSS paste.
431. 22:05Kenapa sih kita naruhnya di indeks CSS?
432. 22:10Karena CSS bawaan itu nerapinnya di
433. 22:14indeks CSS, Teman-teman. Karena itu akan
434. 22:17digunakan pada emm file main JSX di
435. 22:21sini, ya.
436. 22:22seperti
437. 22:24itu. Appss kita kan enggak gunakan ya,
438. 22:28makanya kita hapus aja, biarin atau
439. 22:31sekalian deh file-nya kita hapusin ya,
440. 22:33delete aja enggak
441. 22:35apa-apa. Kemudian di appjsx kita juga
442. 22:39hapus yang ini gitu. Jangan lupa ya
443. 22:42supaya enggak error nantinya.
444. 22:47Sudah.
445. 22:49Berikutnya kita akan siapkan dulu ya
446. 22:52pada fase pertama kita akan siapkan dulu
447. 22:54semuanya teman-teman. Berikutnya kita
448. 22:57akan em masuk ke
449. 23:01sini index
450. 23:05HTML. Nanti kita akan menggunakan
451. 23:08Flowbite ya. Maka dari itu kita akan
452. 23:11coba instalasi Flowbite-nya.
453. 23:15Kemudian kita juga masukkan Tawin CSS
454. 23:20pada
455. 23:22kode index
456. 23:25HTML. Karena itulah silakan teman-teman
457. 23:29bisa
458. 23:30em pergi ke website-nya Flowbinde. Kita
459. 23:34akan coba belajar gimana cara
460. 23:36menggunakannya ya.
461. 23:41Jika sudah masuk ke bagian get
462. 23:47started, terus kita
463. 23:50bisa ee pelajari cara menggunakannya.
464. 23:54Untuk menggunakan follow byit caranya
465. 23:56itu banyak, Teman-teman. Bisa pakai
466. 24:00npm nanti di bagian sini ya, ada npm,
467. 24:03CDN, JavaScript, dan juga yang lainnya.
468. 24:08Untuk saat ini supaya mudah kita akan
469. 24:11gunakan versi CDN aja
470. 24:14ya karena dia bentuknya link seperti ini
471. 24:17teman-teman gitu. Nah, pada bagian CDN
472. 24:20kita baca
473. 24:22bareng-bareng. Jadi pada bagian ee
474. 24:26paragraf, pada bagian kalimat yang ada
475. 24:28di sini kita diharuskan untuk masukkan
476. 24:32kode yang ini ke bagian head tag.
477. 24:39Nah, makanya ini kita salin,
478. 24:42Teman-teman. Kalau yang ini di bagian
479. 24:44head, kode yang di bawah ini bagian body
480. 24:47ini kita
481. 24:48salin. Lalu kita pindahkan ke bagian
482. 24:51bawah title, ya. Bawah title di sini
483. 24:56aja. Terus kita coba
484. 24:59masukkan em kode satu lagi, Teman-teman.
485. 25:03Yang ini ya.
486. 25:05copy kita pindahin di bawah
487. 25:09script seperti
488. 25:14ini. Nah, sekarang kita sudah
489. 25:18mengimplementasikan flow byte dan juga
490. 25:21CSS JavaScript-nya, ya. Langkah
491. 25:24berikutnya tambahin tailwin,
492. 25:25Teman-teman.
493. 25:28Untuk nambahin
494. 25:29tailwin ee teman-teman bisa tulis di
495. 25:32sini aja langsung ya di bagian title
496. 25:35kita enter satu kali kita ketikkan
497. 25:38perintah seperti
498. 25:40ini
499. 25:42script gini ya
500. 25:44kemudian em kita coba buka
501. 25:48srcah kita arahkan ke CDN-nya
502. 25:53tailwin gitu. Jadi ini CDN juga ya.
503. 25:59Oh ya, ini mungkin bisa kita ubah ya,
504. 26:01Teman-teman. Em
505. 26:05misalkan
506. 26:07book book sales seperti ini. Atau
507. 26:11teman-teman bisa atur sendiri untuk
508. 26:14bagian judul
509. 26:17bebas. Yap, untuk konfigurasi CSS sudah
510. 26:22selesai.
511. 26:24Tadi kita sudah merubah di bagian indeks
512. 26:27HTML, kita sudah
513. 26:29terapkan ee CSS reset ya pada indeks
514. 26:33CSS. Kemudian kita juga sudah hapus CSS
515. 26:37bawaan pada bagian app
516. 26:40CSS. Seperti itu. Konfigurasi CSS sudah
517. 26:44selesai. Kita tutup tutup tutup.
518. 26:53Berikutnya apa yang harus kita lakukan
519. 26:58lagi? Nah, Teman-teman itu tinggal
520. 27:02melakukan copy
521. 27:04aja. Copy dari file-file yang tadi sudah
522. 27:10saya buat
523. 27:12ya di sini teman-teman. Nah, ini ya.
524. 27:18Jadi kodenya itu sudah ada untuk kode
525. 27:20tampilannya. Saya sudah rapikan kodenya
526. 27:23juga ke bentuk yang lebih sederhana
527. 27:26supaya teman-teman yang baru belajar
528. 27:29untuk menggunakan React terutama flow
529. 27:32B-nya juga ya kita bisa lakukan
530. 27:35bareng-bareng. Di sini sudah saya
531. 27:37sediakan. Jadi untuk saat ini saya akan
532. 27:41coba contohkan bagaimana teman-teman
533. 27:44harus melakukannya.
534. 27:50Oke, proyek RE yang
535. 27:53bagus. Proyek React yang bagus
536. 27:57itu menggunakan
537. 28:00sebuah ee pembuatan atau folder
538. 28:04strukturnya juga harus baik ya. Karena
539. 28:07kita seperti yang sudah kita pelajari di
540. 28:10React dasar, kita pisah-pisah ya kodenya
541. 28:14teman-teman di SRC.
542. 28:16di SRS ini kita coba siapkan dulu
543. 28:18foldernya
544. 28:21ya. Kita bisa membuat
545. 28:26komponen. Jadi kita pisah-pisah
546. 28:28berdasarkan komponen ya. Kemudian ada
547. 28:31yang namanya layout
548. 28:34teman-teman. Ada yang namanya layout.
549. 28:38Kemudian ada juga yang namanya
550. 28:42pages seperti
551. 28:45ini. Nanti kita akan coba ada yang
552. 28:48namanya API
553. 28:50ya. Ada API, ada juga yang
554. 28:53namanya
555. 28:57service. Kira-kira seperti ini untuk
556. 28:59susunan folder yang akan kita bangun
557. 29:02bareng-bareng.
558. 29:08Berikutnya saya akan coba jelaskan
559. 29:11fungsi-fungsi dari kode-kode yang ada di
560. 29:14sini.
561. 29:16Pertama, struktur folder yang sudah saya
562. 29:19contohkan ini merupakan salah satu cara
563. 29:23yang best practice ya dalam pengembangan
564. 29:26create.
565. 29:28Jadi salah satu cara aja, caranya banyak
566. 29:31dan ini adalah salah
567. 29:33satu. Oke, pertama ada
568. 29:37API. API ini diisi dengan eh endp yang
569. 29:43sudah kita bangun,
570. 29:45Teman-teman. Endpointnya API yang sudah
571. 29:47kita bangun. Kemudian ada servis. Nah,
572. 29:51untuk bagian service itu seperti kayak
573. 29:54kita mau mengambil data buku, kita mau
574. 29:56mengambil data transaksi, kita mau
575. 29:59mengambil kita mau membuat buku baru
576. 30:02gitu ya. Itu nanti naruhnya di bagian
577. 30:04service kodenya ya. Ini bagian API dan
578. 30:08service itu biasanya ditulis. Kalau saya
579. 30:11pribadi biasanya saya nulisnya pakai
580. 30:13undersore di depan supaya apa? supaya
581. 30:16foldernya itu naik ke
582. 30:18atas, naik ke atas seperti ini. Folder
583. 30:22itu kan diurutkan berdasarkan upjat ya.
584. 30:25Supaya dia bisa ke atas saya menggunakan
585. 30:30undersot. Kemudian komponen. Komponen
586. 30:33ini diisi dengan em tempat-tempat atau
587. 30:36kode-kode yang kita pisah-pisah.
588. 30:40Untuk implementasi komponen pada proyek
589. 30:43booksel saat ini, saya sudah pisahkan
590. 30:46komponen itu menjadi beberapa
591. 30:49bagian. Ada navbat, router, hero, dan
592. 30:53juga testimonial. Jadi, kode-kode yang
593. 30:57tadi sudah saya contohkan itu sudah saya
594. 31:00pisah-pisah, Teman-teman. Nah, ini
595. 31:02bagusnya ya. Bagusnya di React memang
596. 31:04harus kita pisah-pisah.
597. 31:09Lalu dari
598. 31:12komponen kita ada yang namanya pages.
599. 31:15Ini kita masuk ke pages dulu ya. Pages
600. 31:19itu berisi halaman.
601. 31:21Biasanya kalau saya pribadi untuk sebuah
602. 31:25website sistem informasi saya bikin ada
603. 31:29tiga folder di dalam pages. Ada public,
604. 31:33admin, dan out. Masing-masing dari
605. 31:36folder ini
606. 31:39merepresentasikan tampilan-tampilan yang
607. 31:42berbeda. publ berarti tampilan yang bisa
608. 31:44diakses oleh pengguna atau bisa diakses
609. 31:49oleh siapapun public admin hanya bisa
610. 31:53diakses oleh halaman
611. 31:56admin, oleh ee akun
612. 31:59admin. Out ini autentikasi ya.
613. 32:03Jadi, out ini hanya bisa diakses oleh
614. 32:07pengguna yang belum login.
615. 32:11Begitu. Gimana kira-kira mudah dipahami
616. 32:14ya untuk
617. 32:16penjelasannya? Next, ada layout. Nah,
618. 32:18ini dia,
619. 32:19Teman-teman. Ini yang mau saya coba ee
620. 32:24jelaskan untuk bagian layout,
621. 32:26Teman-teman. Coba lihat di sini
622. 32:30deh di em contohnya di Flowbiteyte ini
623. 32:34ya. Ketika saya coba masuk ke bagian
624. 32:38quick start, tampilannya seperti
625. 32:41ini. Kalau saya masuk ke bagian
626. 32:45introduction, tampilannya seperti
627. 32:48ini. Ketika saya masuk bagian React,
628. 32:51bagian bawah ya, tampilan seperti
629. 32:55ini, Teman-teman. Paham enggak
630. 32:59perbedaannya? Perbedaannya tuh hanya di
631. 33:02bagian sini aja, Teman-teman.
632. 33:05Di bagian ini dong tulisannya ya.
633. 33:07Tulisannya ganti-ganti itu di bagian
634. 33:09sini dong. Bagian side bar kiri dan
635. 33:11kanan itu tetap sama lokasinya tetap
636. 33:16sama dia enggak ada perubahan. Bagian
637. 33:19header bagian nav itu juga sama ya.
638. 33:24Bedanya itu cuma di tengah aja
639. 33:25teman-teman.
640. 33:27Nah, di halaman kita itu pasti juga ada
641. 33:31yang seperti
642. 33:32ini. Salah satu contohnya adalah yang
643. 33:35seperti tadi ya. Jadi em ini coba saya
644. 33:40kasih lihat
645. 33:42lagi ini
646. 33:44ya. Ketika kita coba masuk ke halaman
647. 33:49buku. Nah, nafbar bar-nya ini kan tetap
648. 33:52sama footernya juga udah ada.
649. 33:55ini enggak ada perubahan. Yang berubah
650. 33:58itu di bagian sini aja, Teman-teman.
651. 34:00Begitu juga di halaman
652. 34:02admin ini, ya. Ini ada atasnya ada masuk
653. 34:08ke buku. Nah, yang beda tuh di bagian
654. 34:10sini.
655. 34:12Jadi layout akan digunakan untuk
656. 34:16menyimpan
657. 34:18template agar konten dari H sori agar
658. 34:23konten dari website kita itu hanya bisa
659. 34:27berubah di tempat-tempat tertentu aja.
660. 34:31Kira-kira begitu ya penjelasannya.
661. 34:34Kita akan coba ee setelah ini,
662. 34:37Teman-teman, supaya Teman-teman bisa
663. 34:39lebih mudah untuk memahaminya.
664. 34:43Okay.