1.5 KiB
1.5 KiB
title | localeTitle |
---|---|
React - Components | React - Componentes |
React - Componentes
Los componentes son reutilizables en react.js. Puede inyectar valor en los accesorios como se indica a continuación:
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
const element = <Welcome name="Faisal Arkan" />;
ReactDOM.render(
element,
document.getElementById('root')
);
name="Faisal Arkan"
le dará valor en {props.name}
de la function Welcome(props)
y devolverá el componente que haya dado un valor por name="Faisal Arkan"
, luego de que reaccione se convertirá el elemento en html.
Otras formas de declarar componentes.
Hay muchas formas de declarar componentes al usar React.js, pero hay dos tipos de componentes, componentes sin estado y componentes con estado .
Con estado
Clase de componentes de clase
class Cat extends React.Component {
constructor(props) {
super(props);
this.state = {
humor: 'happy'
}
}
render() {
return(
<div>
<h1>{this.props.name}</h1>
<p>
{this.props.color}
</p>
</div>
);
}
}
Componentes sin estado
Componentes funcionales (función de flecha de ES6)
const Cat = props => {
return (
<div>
<h1>{props.name}</h1>
<p>{props.color}</p>
</div>;
);
};
Componentes de retorno implícito
const Cat = props =>
<div>
<h1>{props.name}</h1>
<p>{props.color}</p>
</div>;