React: 4 tipos de componentes para gobernarlos a todos

Descubre los distintos componentes que puedes definir en React

Partiendo de cero

https://www.youtube.com/watch?v=YaZg8wg39QQ

Presentational components

const Box = props => <div>{props.name}</div>

Container components

class ContainerBox {
constructor() {
super();
this.state = { name: "Gerardo" }
}
render() {
return <Box {...state} />
}
}

High order components

function ContainerBoxHoc(AnyBox) {
return class ContainerBox extends React.Component {
constructor() {
super();
this.state = { name: “Gerardo” }
}
render() {
return <AnyBox {…this.state} />
}
}
}
const ContainerBox = ContainerBoxHoc(Box);function SpanBox = props => <span>{props.name}</span>
const OtherContainerBox = ContainerBoxHoc(SpanBox)

Render props

class ContainerBox extends React.Component {
constructor() {
super();
this.state = { name: “Gerardo” }
}
render() {
return this.props.renderBox(this.state);
}
}
const Box = props => <div>{props.name}</div>const ContainerBoxWithBox = (
<ContainerBox renderBox={state => (<Box {…state} />)} />
);

Conclusión

¿Quieres recibir más artículos como este?

Entre paseo y paseo con Simba desarrollo en Symfony y React

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store