Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Avatar for Nad Nad
November 03, 2024
90
0

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

Avatar for Nad

Nad

November 03, 2024

More Decks by Nad

See All by Nad
DevCoach 180: Back-End | Deploy Aplikasi dengan Aman dan Cepat Menggunakan CI/CD
Avatar for Nad nadiaaa22
0
90
DevCoach 179: Flutter | Ciptakan Animasi Epik dengan Animation
Avatar for Nad nadiaaa22
0
110
DevCoach 178: React | Teknik React Menghidupkan UI dengan State
Avatar for Nad nadiaaa22
0
61
Dicoding Sharing Session: Unlocking the Machine Learning Workflow
Avatar for Nad nadiaaa22
0
100
DevCoach 176: React | Cara Jitu React Membangun UI
Avatar for Nad nadiaaa22
0
150
DevCoach 174: Flutter | Bentangkan Sayap Kreativitasmu dengan Flutter Desktop
Avatar for Nad nadiaaa22
0
57
DevCoach 173: iOS | Mendalami SwiftUI, UI Framework Masa Depan!
Avatar for Nad nadiaaa22
0
140
DevCoach 172: Flutter | Tingkatkan Pengalaman Pengguna dengan Lokalisasi dan Aksesibilitas
Avatar for Nad nadiaaa22
0
120
DevCoach 171: Machine Learning in Google Cloud | Vertex AI di Google Cloud
Avatar for Nad nadiaaa22
0
270

Featured

See All Featured
The AI Search Optimization Roadmap by Aleyda Solis
Avatar for Aleyda Solis aleyda
1
5.9k
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
Avatar for Ines Montani inesmontani
PRO
3
2.3k
Why Mistakes Are the Best Teachers: Turning Failure into a Pathway for Growth
Avatar for Umar Saidu Auna auna
0
170
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
29
4.3k
Leadership Guide Workshop - DevTernity 2021
Avatar for David Neal reverentgeek
1
310
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
21
1.5k
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
31
6k
HTML-Aware ERB: The Path to Reactive Rendering @ RubyCon 2026, Rimini, Italy
Avatar for Marco Roth marcoroth
2
250
The Organizational Zoo: Understanding Human Behavior Agility Through Metaphoric Constructive Conversations (based on the works of Arthur Shelley, Ph.D)
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
370
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
Avatar for Kenny Baas-Schwegler baasie
0
590
Jamie Indigo - Trashchat’s Guide to Black Boxes: Technical SEO Tactics for LLMs
Avatar for Tech SEO Connect techseoconnect
PRO
0
210
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
31
3.2k

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