Download to read offline
Uploaded byRick Beerendonk
ReactJS maakt het web eenvoudig
The document discusses React, an open-source JavaScript library developed by Facebook, designed for building user interfaces and managing state efficiently through a virtual DOM. It highlights various features such as unidirectional data flow, immutability, and the separation of concerns, as well as tools like React Developer Tools and JSX compilation. The document also includes links to demos, resources, and examples for further learning and application.
More Related Content
![[DevDay2019] The Evolvolution of Microservices and Web Component - By Ngo Thi...](https://cdn.slidesharecdn.com/ss_thumbnails/devday2019theevolvolutionofmicroservicesandwebcomponent-byngothiendatseniordeveloperatmgmtechnologyp-190408080135-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to ReactJS maakt het web eenvoudig
ReactJS maakt het web eenvoudig
- 1. ReactJS maakt hetweb eenvoudig Rick Beerendonk twitter.com/rickbeerendonk
- 2.
- 3. Made byFacebook Used by Facebook IE8 en hoger Alle recente mobile browsers Fork op Github voor IE6 + IE7 Open source op GitHub: http://facebook.github.io/react/ ReactJS.NET, open source op Github: http://reactjs.net/ Wat is React?
- 4. Tart “best practices” Watis React?
- 5. Wat wordtnu gebruikt? Welke problemen ervaar je? Why React?
- 6. Synchroniseren vanstate is moeilijk => Daarom Databinding => Kettingreactie van callbacks Kleine wijziging kan leiden tot ongekend grote reactie Wat doet dat met performance? Update DOM is moeilijk Debuggen • Waar plaats ik breakpoint? • Vooruit, niet achteruit • Regel voor regel Problemen
- 7. “Our intellectual powersare rather geared to master static relations and our powers to visualize processes evolving in time are relatively poorly developed. For that reason we should do (as wise programmers aware of our limitations) our utmost to shorten the conceptual gap between the static program and the dynamic process, to make the correspondence between the program (spread out in tekst space) and the process (spread out in time) as trivial as possible” Edsger Dijkstra
- 8. Herbouwen i.p.v.update Immutable i.p.v. Mutable • Flow in één richting i.p.v. twee richtingen Debuggen • Minimum aantal wijzigingslocaties (waar plaats ik breakpoint?) • Van wijziging naar wijziging i.p.v. van regel naar regel Oplossingen
- 9. 20e eeuw:Oude server situatie eenvoudig: Gooi oude pagina weg en genereer steeds een nieuw pagina. 2004: HTML = Composed string 2007: HTML = Composed string with XSS protection 2010: Reduce server callbacks by having more Javascript (databinding/MVC/etc.) 2013: React Ontstaan React
- 10.
- 11. Weggooien en herbouwenDOM: Verlies input focus + cursor positie Verlies tekst selectie Verlies scroll positie Verlies IFrame state DOM
- 12. React: Virtual DOM App VirtualDOM builds/modifies events DOM builds/modifies events
- 13.
- 14.
- 15.
- 16. React: Virtual DOM App New Virtual DOM builds events DOM modifies events Old VirtualDOM Queue Differences
- 17. Minimale verschillen Snelst mogelijke wijzigingen Minimale garbage collection Alleen schrijven naar de browser DOM Events alleen gekoppeld aan browser DOM root. Smart Virtual DOM
- 18.
- 19. Lijkt opXAML in WPF Prettig voor designers Compileert in JavaScript • Online: http://facebook.github.io/react/jsx-compiler.html • Offline: https://github.com/rickbeerendonk/react-om- examples/tree/master/Extra%2003.%20JSX%20Compiler Te genereren vanuit HTML • Online: http://facebook.github.io/react/html-jsx.html • Offline: https://github.com/reactjs/react-magic/blob/master/README- htmltojsx.md JSX
- 20. HTML in Javascript?Ben je gek!?!?!?! Separation of concerns
- 21.
- 22.
- 23. Synthetisch, cross-browserwrapper om het browser event Identiek over alle browsers Zelfde als browser event, incl. capturing/bubbling fases. Extra event property: nativeEvent Events 23
- 24. Clipboard events •onCopy onCut onPaste Keyboard events • onKeyDown onKeyPress onKeyUp Focus events • onFocus onBlur Form events • onChange onInput onSubmit Mouse events • onClick onDoubleClick onDrag onDragEnd onDragEnter onDragExit onDragLeave onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeave onMouseMove onMouseOut onMouseOver onMouseUp Ondersteunde events (1) 24
- 25. Touch events •onTouchCancel onTouchEnd onTouchMove onTouchStart UI events • onScroll Wheel events • onWheel Ondersteunde events (2) ) 25
- 26.
- 27.
- 28. Mutable Maaralleen te wijzigen door setState() en replaceState(). Demo: https://github.com/rickbeerendonk/react-om- examples/tree/master/05.%20State State
- 29.
- 30.
- 31. JSX compilatie(optioneel: ECMAScript 6) JSX bundling & minification Rendering ASP.NET MVC • Demo: https://github.com/rickbeerendonk/react-om- examples/tree/master/Extra%2004.%20Server%20Side%20ASP.NET%20 MVC Node.js • Example: https://github.com/mhart/react-server-example PHP Server Side
- 32. React: Virtual DOM Server AppVirtual DOM builds/modifies <HTML> builds/modifies
- 33.
- 34. React componentsearch engine (npm): http://react-components.com/ React-router: https://github.com/rackt/react-router React-bootstrap: http://react-bootstrap.github.io/ Handige links
- 35. “Flux is theapplication architecture that Facebook uses for building client-side web applications. It complements React's composable view components by utilizing a unidirectional data flow.” https://facebook.github.io/flux/ Flux
- 36. Om: https://github.com/swannodette/om Undo/Redo: http://swannodette.github.io/2013/12/31/time-travel/ Goya (app): http://jackschaedler.github.io/goya/ Om: Undo/Redo
- 37. Let’s React! Twitter: http://twitter.com/rickbeerendonk Mail:rick@nforza.nl Slides: http://www.slideshare.net/RickBeerendonk Sources: https://github.com/rickbeerendonk/react-examples