React Component Pattern

Transcript

1. React Component Patterns Juliane Albuquerque
2. “Componentes permitem dividir a interface do usuário em partes independentes e reutilizáveis, e pensar sobre cada parte isoladamente.” reactjs.org
3. 5 tipos de componentes
5. Círculo
6. Círculo render props context state lifecycle events
7. render props context state lifecycle events render props context
8. Stateful render props context state lifecycle events Stateless render props context
9. Círculo Pequeno círculo
10. Pequeno círculo no círculo
11. Pequeno círculo no círculo Verde
12. Pequeno círculo no círculo Azul
13. Nós podemos reutilizar o pequeno círculo
14. class SmallCircleInCircle { constructor() { super() this.state = { smarts: “smarts”} } render() { return <SmallCircle {… state} /> } } const SmallCircle = props => <div>{props.smarts}</div> Pequeno círculo no círculo
15. class SmallCircleInCircle { constructor() { super() this.state = { smarts: “smarts”} } render() { return <SmallCircle {… state} /> } } const SmallCircle = props => <div>{props.smarts}</div> Pequeno círculo no círculo
16. Pequeno círculo no círculo class SmallCircleInCircle { constructor() { super() this.state = { smarts: “smarts”} } render() { return <SmallCircle {… state} /> } } const SmallCircle = props => <div>{props.smarts}</div>
17. Pequeno círculo no círculo class SmallCircleInCircle { constructor() { super() this.state = { smarts: “smarts”} } render() { return <SmallCircle {… state} /> } } const SmallCircle = props => <div>{props.smarts}</div>
18. Pequeno círculo no círculo class SmallCircleInCircle { constructor() { super() this.state = { smarts: “smarts”} } render() { return <SmallCircle {… state} /> } } const SmallCircle = props => <div>{props.smarts}</div>
19. Container Component
20. Porém esta é só a metade da solução
21. Eu quero reutilizar os círculos
23. Pequeno círculo no círculo no círculo pontilhado
24. function DottedCircle(AnyCircle) { return class Circle extends React.Component { constructor() { super() this.state = { smarts: “smarts”} } render() { return <AnyCircle {…this.state} /> } } } function SmallCircle(props) { return <div>{props.smarts}</div> } const SmallCircleInCircle = DottedCircle(SmallCircle)
25. function DottedCircle(AnyCircle) { return class Circle extends React.Component { constructor() { super() this.state = { smarts: “smarts”} } render() { return <AnyCircle {…this.state} /> } } } function SmallCircle(props) { return <div>{props.smarts}</div> } const SmallCircleInCircle = DottedCircle(SmallCircle)
26. function DottedCircle(AnyCircle) { return class Circle extends React.Component { constructor() { super() this.state = { smarts: “smarts”} } render() { return <AnyCircle {…this.state} /> } } } function SmallCircle(props) { return <div>{props.smarts}</div> } const SmallCircleInCircle = DottedCircle(SmallCircle)
27. function DottedCircle(AnyCircle) { return class Circle extends React.Component { constructor() { super() this.state = { smarts: “smarts”} } render() { return <AnyCircle {…this.state} /> } } } function SmallCircle(props) { return <div>{props.smarts}</div> } const SmallCircleInCircle = DottedCircle(SmallCircle)
28. function DottedCircle(AnyCircle) { return class Circle extends React.Component { constructor() { super() this.state = { smarts: “smarts”} } render() { return <AnyCircle {…this.state} /> } } } function SmallCircle(props) { return <div>{props.smarts}</div> } const SmallCircleInCircle = DottedCircle(SmallCircle)
29. Container Component
31. Higher order components (HOC’s)
33. Pequeno círculo no círculo tracejado no círculo
34. class Circle extends React.Component { constructor() { super() this.state = { smarts: “smarts”} } render() { return this.props.dashedCircle(this.state) } } function SmallCircle(props) { return <div>{props.smarts}</div> } const SmallCircleInCircle = <Circle dashedCircle={state => ( <SmallCircle {...state} /> )} />
35. class Circle extends React.Component { constructor() { super() this.state = { smarts: “smarts”} } render() { return this.props.dashedCircle(this.state) } } function SmallCircle(props) { return <div>{props.smarts}</div> } const SmallCircleInCircle = <Circle dashedCircle={state => ( <SmallCircle {...state} /> )} />
36. class Circle extends React.Component { constructor() { super() this.state = { smarts: “smarts”} } render() { return this.props.dashedCircle(this.state) } } function SmallCircle(props) { return <div>{props.smarts}</div> } const SmallCircleInCircle = <Circle dashedCircle={state => ( <SmallCircle {...state} /> )} /> this.state
37. class Circle extends React.Component { constructor() { super() this.state = { smarts: “smarts”} } render() { return this.props.dashedCircle(this.state) } } function SmallCircle(props) { return <div>{props.smarts}</div> } const SmallCircleInCircle = <Circle dashedCircle={state => ( <SmallCircle {...state} /> )} />
38. class Circle extends React.Component { constructor() { super() this.state = { smarts: “smarts”} } render() { return this.props.dashedCircle(this.state) } } function SmallCircle(props) { return <div>{props.smarts}</div> } const SmallCircleInCircle = <Circle dashedCircle={state => ( <SmallCircle {...state} /> )} />
39. Container Component
41. Render Props
42. 5 tipos de componentes
43. Stateful Components
44. Stateless Components
45. Container Components
46. Higher order components (HOC’s)
47. Render Props
48. Container Component
49. Obrigada! Juliane Albuquerque Referências: https://medium.com/teamsubchannel/react-component-patterns-e7fb75be7bb0 https://www.youtube.com/watch?v=YaZg8wg39QQ