Beginner's Guide to React & Redux Development
Download as PPTX, PDF1 like477 views
Dokumen ini menjelaskan tentang React dan Redux, termasuk manfaat penggunaan virtual DOM dan cara merender komponen dengan JSX. React adalah library JavaScript untuk membuat antarmuka pengguna, sementara Redux digunakan untuk mengelola state dengan API minimal. Juga dijelaskan kapan sebaiknya menggunakan React dan sumber daya terkait untuk pembelajaran lebih lanjut.
Beginner's Guide to React & Redux Development
- 1. Trimikha Valentius Senior Developer @ Ogilvy Australia Co-initiator/organizer @ BaliJS Bekraf Developer Day – Bali, May 2017
- 2. Beginners guide to React and Redux
- 4. React React adalah library Javascript untuk membuat User Interface. • Virtual DOM • Fokus ke UI/View, bukan sebuah framework • One way data flow
- 5. Virtual DOM DOM API is slow. (akan terlihat penurunan performance ketika kita mencoba me-render ulang DOM)
- 8. Manfaat Virtual DOM • Read/write operations hanya per-bagian. • Sub-tree update yang efisien. • Meng-improve performa secara general
- 9. Contoh Syntax <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <script src="main.js"></script> </head> <body> <div id="example"></div> </body> </html> index.html
- 10. Contoh Syntax 2 import React from 'react'; import ReactDOM from 'react-dom'; const exampleElement = document.getElementById('example'); ReactDOM.render(<h1>Halo, Bali!</h1>, exampleElement); main.js
- 11. JSX JSX adalah syntax tambahan pada Javascript, yang mirip dengan XML/HTML // Input (JSX): var app = <Nav color="blue" />; // Output (JS): var app = React.createElement(Nav, {color:"blue"});
- 12. Merender Component main.js import React from 'react'; import ReactDOM from 'react-dom'; const App = () => { return (<p>Halo, Bali!</p>); } const exampleNode = document.getElementById('example'); ReactDOM.render(<App />, exampleNode);
- 13. Merender Component Index.html <body> <div id="example"> <p> <!-- App start --> Hello World! </p> <!-- App end --> </div> </body>
- 14. Component terpisah profile.js import React from 'react'; const Profile = ({avatar, name}) => { return ( <div> <img src={avatar} /> <span>{name}</span> </div> ); }
- 15. Component terpisah 2 main.js import React from 'react'; import ReactDOM from 'react-dom'; import Profile from ‘./profile'; const App = () => { return ( <div> <h1>Halo, Bali!</h1> <Profile avatar="http://test.png" name="Trimikha" /> </div> ); } const exampleNode = document.getElementById('example'); ReactDOM.render(<App />, exampleNode);
- 16. Component terpisah 3 Index.html <body> <div id="example"> <div> <!-- App start --> <h1>Hello World!</h1> <div> <!-- Profile start --> <img src="http://test.png" /> <span>Trimikha</span> </div> <!-- Profile end --> </div> <!-- App end --> </div> </body>
- 17. Stateless Function Components Functional Programming: - hindari changing-state - hindari mutable data - Memanggil fungsi lebih dari satu kali dengan argumen yang sama akan menghasilkan hasil yang sama
- 18. Manfaat functional programming - Mudah dimengerti - Mudah untuk di test
- 19. Kesimpulan React - Kita bisa membuat component kita sendiri - Functional programming - Semua aktifitas code di kendalikan di JS
- 20. Apa itu Redux?
- 21. Redux Redux memungkinkan kita untuk me-manage state dengan minimal API tapi dan mudah untuk dimengerti.
- 22. Redux Flow
- 23. Siapa saja yang menggunakan?
- 24. React - Facebook, Firefox, Airbnb , Instagram, dll Redux - Firefox, Docker, Airbnb, Zapier, dll
- 26. Web App Interactive App Web dengan feature yang dinamis & Real time
- 27. Kapan tidak menggunakan React?
- 28. Web Statis Landing Page Website Berita (News site)
- 29. Link yang bermanfaat • https://github.com/facebookincubator/create- react-app • https://redux.js.org • https://facebook.github.io/react/
- 30. BaliJS Meetup