Componentes

Podemos encapsular diferentes códigos y propiedades dentro de componentes. Un ejemplo sencillo:

class Componente extends React.Component {
  render() {
    return <h2>Soy un componente to chulo</h2>;
  }
}

ReactDOM.render(<Componente />, document.getElementById('root'));

Los componentes pueden tener constructores:

class Componente extends React.Component {
    constructor() {
        super();
        this.adjetivo ="to chulo";
    }
    render() {
        return <h2>Soy un componente {this.adjetivo}</h2>;
    }
}

Y propiedades que podemos pasar desde la renderización:

class Componente extends React.Component {
    constructor(props) {
        super(props);

    }
    render() {
        return <h2>Soy un componente {this.props.adjetivo}</h2>;
    }
}

ReactDOM.render(<Componente adjetivo="to guapo"/>, document.getElementById('root'));

Otro ejemplo accediendo a la propiedad children:

class Componente extends React.Component {
    constructor(props) {
        super(props);

    }
    render() {
        return <h2>Soy un componente {this.props.children} {this.props.children}</h2>;
    }
}

ReactDOM.render(<Componente>to guapo</Componente>, document.getElementById('root'));

Con estilos:

class Componente extends React.Component {
    constructor(props) {
        super(props);
        
    }
    render() {
         const componenteStyle={
            color:this.props.color
        };
        return <h2 style={componenteStyle}>Soy un componente {this.props.children} {this.props.children}</h2>;
    }
}

ReactDOM.render(<Componente color="yellow">to guapo</Componente>, document.getElementById('root'));

Propiedades por defecto:

class Componente extends React.Component {

    constructor(props) {
        super(props);

    }
    render() {
        const componenteStyle = {
            color: this.props.color
        };
        return <h2 style={componenteStyle}>Soy un componente {this.props.children} {this.props.children}</h2>;
    }
}
Componente.defaultProps = {
    color: 'red'
};
ReactDOM.render(<Componente >to guapo</Componente>, document.getElementById('root'));

Componentes anidados:

class Square extends React.Component {
    render() {
        var squareStyle = {
            height: 150,
            backgroundColor: this.props.color
        };
        return (
                <div style={squareStyle}>
                </div>
                );
    }
}
class Label extends React.Component {
    render() {
        var labelStyle = {
            fontFamily: "sans-serif",
            fontWeight: "bold",
            padding: 13,
            margin: 0
        };
        return (
                <p style={labelStyle}>{this.props.color}</p>
                );
    }
}
class Card extends React.Component {
    render() {
        var cardStyle = {
            height: 200,
            width: 150,
            padding: 0,
            backgroundColor: "#FFF",
            boxShadow: "0px 0px 5px #666"
        };
        return (
                <div style={cardStyle}>
                    <Square color={this.props.color}/>
                    <Label color={this.props.color}/>
                </div>
                );
    }
}

ReactDOM.render(<Card color="#FE0056"/>, document.getElementById('root'));