---
title: React - Components
localeTitle: React - Componentes
---
## React - Componentes
Los componentes son reutilizables en react.js. Puede inyectar valor en los accesorios como se indica a continuación:
```jsx
function Welcome(props) {
return
Hello, {props.name}
;
}
const element = ;
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
```jsx
class Cat extends React.Component {
constructor(props) {
super(props);
this.state = {
humor: 'happy'
}
}
render() {
return(
{this.props.name}
{this.props.color}
);
}
}
```
### Componentes sin estado
#### Componentes funcionales (función de flecha de ES6)
```jsx
const Cat = props => {
return (
{props.name}
{props.color}
;
);
};
```
#### Componentes de retorno implícito
```jsx
const Cat = props =>
{props.name}
{props.color}
;
```