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.

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. JS