DevCoach 178: React | Teknik React Menghidupkan UI dengan State

Transcript

1. Nur Rizki Adi Curriculum Developer Teknik React Menghidupkan UI dengan State React
2. Todayʼs Topics • Class, The Legacy Component • Event Handling • React Hooks • Pengenalan React DevTools React
3. React
4. Menangani UI Kompleks dan Terisolasi Bersifat Reusable Mengapa Harus React Component? React
5. createElement, The React Legacy React import React from 'react'; const element = React.createElement( 'h1', { id: 'my-title', className: 'text-red', }, 'Biodata Perusahaan', );
6. Nggak ada Bedanya dengan DOM Manipulation “Biasaˮ
7. HTML in JS const heading = React.createElement('h1', null, 'React'); const strong = React.createElement('strong', null, 'best tool'); const paragraph = React.createElement('p', null, ['The ', strong, ' for building UI']) const divContainer = React.createElement('div', { className: 'container' }, [heading, paragraph]); const divContainer = ( <div className="container"> <h1>React</h1> <p>The <strong>best tool</strong> for building UI</p> </div> ); HTML in JS Version
8. Quiz #1 DevCoach 178 React
9. Quiz #1 DevCoach 178 Apa nama lain dari HTML in JS?
10. Dua API untuk React Component Functional Class React
11. “Talk is cheap, Show me The Codeˮ Linus Torvalds
12. Strategi React Tree TodoList App
13. Component State React
14. Quiz #2 DevCoach 178 React
15. Quiz #2 DevCoach 178 Apa yang terjadi jika tombol “Ubahˮ diklik?
16. Component State klik! Interaksi pengguna akan memperbarui state State merupakan data di dalam component yang bila nilainya berubah component akan me-render ulang. Nilai state akan berubah ketika ada interaksi dari pengguna.
17. Implementasi Component State class Counter extends React.Component { constructor(props) { super(props); // Inisialisasi state this.state = { count: 0 }; } onIncrease() { this.setState((prevState) => { return { count: prevState.count + 1 } }); } render() { return ( <div> <h1>{this.state.count}</h1> <button onClick={() => this.onIncrease()}> Increase </button> </div> ); } }
18. Props Drilling
19. Strategi React Tree TodoList App
20. State component hanya tersedia di Class Component! React Jika Tanpa React Hooks
21. React Hook?
22. legacy.reactjs.org/docs/hooks-intro.html
23. Quiz #3 DevCoach 178 React
24. Apa yang terjadi jika tombol “Tambahˮ diklik? Quiz #3 DevCoach 178 React
25. Terima kasih nurrizkiadip Nur Rizki Adi Prasetyo NAdiprasetyo nrizki@dicoding.com Nur Rizki Adi Prasetyo React
26. Feedback! dicoding.id/devcoachfeedback React