Using Facade pattern with JSX

Even though the JSX resemble HTML at the first glance it is only the description of the expected UI and is not the UI by itself. What if we can use this fact and play a little with the JSX tags to make the HOC that will allow us to create similar repetitive components in our apps? I will present a small pattern that I found quite useful in one project for creating different users list.

Transcript

1. Using Facade pattern with JSX Olena Sovyn (@frontendgirl)
2. Avatar Name Email Phone EditUser
4. components.jsx
5. App.js
6. user-list.jsx
7. user-list.jsx
9. App.js
10. App.js
11. Facade pattern Source: https://www.sitepoint.com/manage-complexity-with-the-facade-pattern/
12. user-list.jsx
14. extendable textarea react component: https://github.com/andreypopp/react-textarea-autosize
15. Compound Components … or the
16. user-list.jsx
18. 100% correct solution
19. Why? • Business requirements are different between the projects • Size of the project are different • Our React ecosystem can be different between the projects • We do not know the future
20. JSX
21. JSX