DevCoach 176: React | Cara Jitu React Membangun UI

Transcript

1. Cara Jitu React Membangun UI Nur Rizki Adi Curriculum Developer React
2. Topics • Compositional Component • React Element & React Component • JSX, Cara Baru Membangun UI • Vite, Cara React Memulai Project • createElement, The React Legacy React
3. Konsep yang Mendasari React Composition Declarative Code Unidirectional Data Flow JavaScript React
4. Gambaran React Composition React
5. React
6. React Element vs. DOM Element
7. DOM Element React
8. Jika React Element hanya JavaScript objek biasa, bagaimana bisa ditampilkan di DOM? { type: 'p', props: { className: 'p-blue', children: 'Content of paragraph.', }, } React Element Mengubah React Element menjadi DOM Node react-dom DOM React
9. React Component React
10. Quiz #1 DevCoach 176 React
11. Quiz #1 DevCoach 176 Ada teknologi component yang mirip dengan React, tapi mendukung Browser Standar. Apa itu?
12. React Component • Alih-alih data, sebuah fungsi JavaScript yang mengembalikan UI/React element. • Alasan membuat React component sama dengan kapan kita harus membuat sebuah fungsi.
13. Menangani UI Kompleks dan Terisolasi Bersifat Reusable Mengapa Harus React Component? React
16. Web Component ……………… Ada teknologi component yang mirip dengan React, tapi mendukung Browser Standar. Apa itu? Apa, hayo React
17. Quiz #2 DevCoach 176 React
18. Apa perbedaan besar antara React component dengan Web component? Quiz #2 DevCoach 176 React
19. youtube.com/@DicodingIndonesia
20. JSX, Sintaks Keren Bikin UI React
22. Sintaks Baru Bikin UI • JSX Markup Syntax • JSX Attributes • JSX Styling • JSX Event React
23. Quiz #3 DevCoach 176 React
24. Quiz #3 DevCoach 176 Apa fungsi Babel terhadap sintaks JSX?
26. createElement, The React Legacy React
27. import React from 'react'; const heading = React.createElement('h1', null, 'Biodata Perusahaan'); Membuat Element dengan createElement
28. import React from 'react'; const element = React.createElement( 'h1', { id: 'my-title', className: 'text-red', }, 'Biodata Perusahaan', ); Bikin UI dengan createElement React
30. createElement tidak butuh Babel, tapi kode jadi imperatif React
31. createElement JSX React
32. Terima kasih nurrizkiadip Nur Rizki Adi Prasetyo NAdiprasetyo nrizki@dicoding.com Nur Rizki Adi Prasetyo React
33. Feedback! dicoding.id/devcoachfeedback