Componentes

Introducción

Un elemento es el bloque más chico en React, y describe qué mostrar en pantalla.

const element = <h1>Hello, world!</h1>;

Como vimos anteriormente, para mostrar un elemento en pantalla, se necesita un nodo del DOM que se utilizará como "raíz". En general, una aplicación construida en React sólo tendrá un nodo, pero si se agrega React a una aplicación existente, puede haber varios nodos “raíz”. Utilizando ReactDOM.render se podrá indicarle a React dónde renderizar el componente raíz.

const element = <h1>Hello, world</h1>;
ReactDOM.render(
    element,
    document.getElementById('root')
);

Conceptualmente, los componentes son como funciones JavaScript; reciben parámetros (props) y retornan lo que se debe mostrar en pantalla (utilizando JSX)

Functional Component (Stateless component)

function WelcomeMessage(props) {
    return <h1>Hello, {props.name}</h1>;
}

Class Component (Statefull component)

class WelcomeMessage extends React.Component {
    render() {
        return <h1>Hello, {this.props.name}</h1>;
    }
}

Estos dos componentes son equivalentes desde el punto de vista de React, aunque el class component tiene algunas características diferentes que veremos más adelante. Por ahora, notar que desde uno utilizamos this.props y desde el otro solo props

Anidar componentes

Hasta ahora vimos elementos de React que utilizan sólo tags de HTML, pero se pueden crear elementos a partir de los Componentes que nosotros mismos definimos.

// Definimos el Componente
function WelcomeMessage(props) {
    return <h1>Hello, {props.name}</h1>;
}

// Utilizamos el Componente
var element = <WelcomeMessage name="Anne" />;
ReactDOM.render(
    element,
    document.getElementById('root')
);

Como mencionamos, la idea de los componentes en React es poder componerlos y crear UIs complejas de forma sencilla:

function WelcomeMessage(props) {
    return <h1>Hello, {props.name}</h1>;
}
function App() {
    return (
        <div>
            <WelcomeMessage name="Anne" />
            <WelcomeMessage name="Marta" />
            <WelcomeMessage name="Lucía" />
        </div>
    );
}
ReactDOM.render(<App />, document.getElementById('root'));