David Sánchez
Software Engineer. Passionate about technology. Developer by passion. Making cool things at @ubidots
Component Architecturing
React es como una naranja...
Component
=
JS Function
Independent
Reusable
Isolated
Props
React.createElement()
Arguments
Return Value
Component
=
Fancy way to describe a Function
Remember
JSX is just sugar syntax
function MyComponent({ foo, bar }) {
return (<p>Foo: {foo}, bar {bar}</p>)
}function MyComponent({ foo, bar }) {
const message = `Foo: ${foo}, bar: ${bar}`;
return React.createElement('p', { children: message });
}Is exactly the same as:
Let's checkout: https://kutt.it/wlFx6T
So why we would want to treat our components different to a Plain Old Function?
Uncle Bob could help us
* Take his book with a pinch of salt
Chapter 3: Functions
The first rule of functions is that they should be small. The second rule of functions is that they should be smaller than that”
Clean Code - Robert C. Martin - Chapter 3
Do one thing
Stepdown
Command/Query separation
Components should do one thing and be small
GoF enters the room
Favor Composition over Class Inheritance
Design Patterns: Elements of Reusable Object-Oriented Software - GoF - Chapter 1
White-box reuse vs Black-box reuse
Bound implementation vs "Delegation"
1
2
3
Design Patterns
Context Module
Compound Components
Flexible Compound Components
Component Architecturing
By David Sánchez
