Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

DevCoach 175: React | Kenalan dengan React: UI ...

Nad
November 03, 2024
0
60

DevCoach 175: React | Kenalan dengan React: UI Web Masa Kini

Nad

November 03, 2024
Tweet

More Decks by Nad

See All by Nad
Dicoding Sharing Session: Unlocking the Machine Learning Workflow
nadiaaa22
0
45
DevCoach 176: React | Cara Jitu React Membangun UI
nadiaaa22
0
100
DevCoach 174: Flutter | Bentangkan Sayap Kreativitasmu dengan Flutter Desktop
nadiaaa22
0
36
DevCoach 173: iOS | Mendalami SwiftUI, UI Framework Masa Depan!
nadiaaa22
0
110
DevCoach 172: Flutter | Tingkatkan Pengalaman Pengguna dengan Lokalisasi dan Aksesibilitas
nadiaaa22
0
72
DevCoach 171: Machine Learning in Google Cloud | Vertex AI di Google Cloud
nadiaaa22
0
190
DevCoach 170: Data Science | Data + Visuals = Dashboards with Impact!
nadiaaa22
0
91
DevCoach 169: Flutter | Jelajahi Media Gambar dengan Image Picker
nadiaaa22
0
66
DevCoach 168: ML in Google Cloud | Training dan Deployment Model Machine Learning dengan Google Cloud
nadiaaa22
0
81

Featured

See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
1.9k
Why You Should Never Use an ORM
jnunemaker
PRO
54
9.1k
Building an army of robots
kneath
302
43k
Art, The Web, and Tiny UX
lynnandtonic
297
20k
For a Future-Friendly Web
brad_frost
175
9.4k
Keith and Marios Guide to Fast Websites
keithpitt
410
22k
Building Adaptive Systems
keathley
38
2.3k
Writing Fast Ruby
sferik
627
61k
Building a Modern Day 
E-commerce SEO Strategy
aleyda
38
6.9k
Rails Girls Zürich Keynote
gr2m
94
13k
Optimising Largest Contentful Paint
csswizardry
33
2.9k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k

Transcript

  1. Kenalan dengan React: UI Web Masa Kini! Nur Rizki Adi

    Curriculum Developer React

  2. Topics • Pengenalan React • Alasan Perlu Memilih React •

    Konsep Composition • Declaration Code • Unidirectional Data Flow • React Adalah JavaScript React

  3. Sebutkan framework JavaScript yang kalian kenal dan disukai? React React?

    Angular? Vue.js? Svelte? Preact? Lit? HTMX? Alpine.js?

  4. Sebelum memulai, apakah kalian sudah bisa membuat aplikasi web ˮsederhanaˮ

    dengan JavaScript? React

  5. youtube.com/@DicodingIndonesia

  6. None

  7. Berkenalan dengan React

  8. https://react.dev

  9. None

  10. Mengapa perlu library untuk membangun interface web? Kita ingin membuat

    aplikasi (web) yang interaktif, tetapi DOM manipulation ... Catatan: Penggunaan library tidaklah wajib. Tidak ada salahnya jika Anda nyaman dengan cara native. Imperatif Tidak ada panduan yang jelas Sulit dipahami React

  11. Kenapa harus React? Popular Sustain Peluang Karier Komunitas Besar React

  12. Konsep yang Mendasari React Composition Declarative Code Unidirectional Data Flow

    JavaScript React

  13. Analogi Data Composition Secara Umum Proses menggabungkan banyak fungsi untuk

    menciptakan data yang lebih kompleks. function getProfilePicture(userId) { return ( `https://avatars.githubusercontent.com/u/${userId}` ); } function getProfileLink(username) { return `https://github.com/${username}`; } function getGithubInfo(username, userId) { return { profilePicture: getProfilePicture(userId), profileLink: getProfileLink(username), }; } React

  14. React Composition React Proses menggabungkan banyak komponen untuk menciptakan UI

    yang lebih kompleks. function ProfilePicture ({ userId }) { return ( <img src={`https://avatars.githubusercontent.com/u/${userId}`} /> ); } function ProfileLink ({ username }) { return ( <a href={`https://github.com/${username} `} /> ); } function GithubInfo ({ username, userId }) { return ( <div className='github-info'> <ProfilePicture userId={userId} /> <ProfileLink username={username} /> </div> ); } React

  15. Gambaran React Composition React

  16. Imperative Code <script type="text/javascript"> const app = document.getElementById('app'); const header

    = document.createElement('h1'); const text = 'Develop. Preview. Ship.'; const headerContent = document.createTextNode(text); header.appendChild(headerContent); app.appendChild(header); </script> <html> <body> <div id="app"></div> </body> </html> React

  17. Declarative Code di React <script type="text/jsx"> const domNode = document.getElementById

    ('app'); const root = ReactDOM.createRoot(domNode); root.render(<h1>Develop. Preview. Ship.</ h1>); </script> <html> <body> <div id="app"></div> <script src="https://unpkg.com/react@18/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script> <!-- Babel Script --> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> </body> </html> React

  18. Declarative Code di React function Contacts() { const names =

    ['Alex', 'Bagus', 'Cika']; return ( <ol className='contacts'> {names.map((name) => <li>{name}</li>)} </ol> ); } function Contacts() { function callContact() { const names = ['Alex', 'Bagus', 'Cika']; console.log('Calling contacts...'); } return ( <button onClick={callContact}> Call Contact </button> ); } Membuat UI List di React Memberikan Event pada Elemen React

  19. Quiz #1 DevCoach 175 React

  20. Quiz #1 DevCoach 175 Apa letak perbedaan dan persamaan antara

    Array.map dan Array.forEach?

  21. Unidirectional Data Flow React

  22. Two Way Data Flow React

  23. React Hanyalah JavaScript <ul id="contacts"> <li v-for="contact in contacts"> {{contact}}

    </li> </ul> List di <ul> {contacts.map((contact) => { return <li>{contact}</li>; })} </ul> List di <div> <p *ngIf="lang === 'en'">Hello, World!</p> <p *ngIf="lang === 'id'">Halo, Dunia!</p> </div> Kondisional Rendering di function SayHello({ lang }) { if (lang === 'en') { return <p>Hello, World!</p>; } return <p>Halo, Dunia!</p>; } Kondisional Rendering di React

  24. Quiz #2 DevCoach 175 React

  25. Apa nama konsep React yang berfungsi dalam menyusun beberapa komponen

    menjadi UI yang satu-kesatuan? Quiz #2 DevCoach 175 Declarative Code Unidirectional Data Flow JavaScript ……………….. React
  26. None

  27. https://legacy.reactjs.org

  28. https://react.dev

  29. dicoding.com/academies/403-belajar-membuat-aplikasi-web-dengan-react

  30. nextjs.org/learn/react-foundations

  31. None

  32. Quiz #3 DevCoach 175 React

  33. Quiz #3 DevCoach 175 Apa nama organisasi pembuat JavaScript library

    React dan apa nama sebelumnya?

  34. Terima kasih nurrizkiadip Nur Rizki Adi Prasetyo NAdiprasetyo [email protected] Nur

    Rizki Adi Prasetyo React

  35. Feedback! dicoding.id/devcoachfeedback

  36. None