1.7 KiB
| title | localeTitle |
|---|---|
| Write a React Component from Scratch | Escribir un componente React desde cero |
Escribir un componente React desde cero
En este desafío, queremos crear un componente de reacción de class (los componentes de React pueden ser componentes de class o componentes de function ). Todos nuestros componentes de clase serán una extensión de React.Component . Por ejemplo, podemos comenzar a hacer un componente llamado FirstComponent con:
class FirstComponent extends React.Component {
};
También debemos asegurarnos de definir el constructor para nuestra nueva clase. Es una buena práctica llamar al constructor cualquier componente con super y pasar props a ambos. super tira del constructor de la clase padre de nuestro componente (en este caso, React.Component ). Ahora, el código para nuestro componente se ve así:
class FirstComponent extends React.Component {
constructor(props) {
super(props);
}
};
¡Ahora todo lo que queda por hacer es definir qué render nuestro componente! Hacemos esto llamando al método de render del componente y devolviendo nuestro código JSX:
class FirstComponent extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
// The JSX code you put here is what your component will render
);
}
};
Una vez que su código JSX está allí, ¡su componente está completo! Si desea un tutorial más detallado de los componentes React, Samer Buna escribió un excelente artículo .