Learn more: react-context / props drilling / compound components

[azinit]

• [x] https://ru.reactjs.org/docs/context.html
• [x] https://kentcdodds.com/blog/prop-drilling
• [x] https://ru.reactjs.org/docs/render-props.html
• [x] https://tproger.ru/translations/react-context-in-5-min/

[azinit]

Fun fact, there's nothing technically stopping you from writing your entire application as a single React Component. It can manage the state of your whole application and you'd have one giant render method... I am not advocating this though... Just something to think about :)

[azinit]

[azinit]

[azinit]

[azinit]

https://github.com/acl-services/paprika/wiki/React-SubComponent-Pattern https://www.youtube.com/watch?v=edW7rGz-QiM&list=PLPLlrF_vXpYaaweg3XLRE4cUWAAfficOA&index=27&t=3716s

[azinit]

• [x] https://kentcdodds.com/blog/compound-components-with-react-hooks/
• [x] https://github.com/acl-services/paprika/wiki/React-SubComponent-Pattern
• [x] https://medium.com/@Dane_s/react-js-compound-components-a6e54b5c9992
• [x] https://medium.com/better-programming/mastering-the-compound-component-pattern-cd0e56937fc3
• [x] https://css-tricks.com/compound-components-in-react-using-the-context-api/

[azinit]

Порой - проще реализовать абстрактную струкутуру через Compound Components

[azinit]

More about compound components

• [x] https://blog.logrocket.com/guide-to-react-compound-components-9c4b3eb482e9/#:~:text=What%20are%20compound%20components%3F,each%20other%20in%20the%20background.&text=When%20you%20click%20on%20an,knows%20which%20option%20you%20clicked.
• [x] https://hackernoon.com/3-easy-steps-to-writing-compound-components-5d4647b7bb7
• [x] https://www.obytes.com/blog/react-design-patterns-part-1-compound-components

[azinit]

[azinit]

• [x] https://medium.com/maxime-heckel/react-sub-components-513f6679abed

[azinit]

Three articles about subcomponents

Part 1

https://blog.maximeheckel.com/posts/react-sub-components-513f6679abed

This kind of pattern is really beneficial:

• to keep views consistent: you can actually show any kind of data using the Article component above. What matters here is that regardless of its purpose, it will look the same across the whole app.
• to keep your code tight and clean: Title, Comments, Subtitle, Metadata only make sense within Article and will only be able to be used within it (i.e. where they make sense, since these components are only used in the context of an “Article”).
• to have easily testable views: for testing such components, Jest and snapshot testing are our allies. It gives us the ability to quickly test any combination of sub-components when using Article. We’ll see how to use Jest to test such a pattern later.

Part 2

https://blog.maximeheckel.com/posts/react-sub-components-part-2-using-the-new-context-api-6f1c089acfe4

• using Context

Part 3

https://blog.maximeheckel.com/posts/react-sub-components-part-3-whitelisting-sub-components-with-flow-b04f9bcf80c2

• whitelist for children

[azinit]

Lib examples:

• https://react.semantic-ui.com/
• https://github.com/recharts/recharts
• https://react-bootstrap.github.io/