More Related Content
Similar to Beginners Guide to React and Redux (20)
Beginners Guide to React and Redux
- 1. 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
- 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=/slideshow/beginners-guide-to-react-and-redux/105102677/"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=/slideshow/beginners-guide-to-react-and-redux/105102677/{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=/slideshow/beginners-guide-to-react-and-redux/105102677/"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=/slideshow/beginners-guide-to-react-and-redux/105102677/"http:/test.png" /> <span>Trimikha</span> </div> <!-- Profile end --> </div> <!-- App end --> </div> </body>
- 19. Kesimpulan React - Kita bisa membuat component kita sendiri - Functional programming - Semua aktifitas code di kendalikan di JS
- 20. Apa itu Redux?
- 22. Redux Flow
- 23. Siapa saja yang menggunakan?
- 27. Kapan tidak menggunakan React?
- 29. Link yang bermanfaat ≒ https://github.com/facebookincubator/create- react-app ≒ https://redux.js.org ≒ https://facebook.github.io/react/
- 30. BaliJS Meetup