React.js adibidea

index.jsx

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

/*
    todo lo que está entre llaves, {}, es interpretado como jsx.
    una cosa de jsx es que no puedes escribir el css directamente, sino que tienes que utilizar un objecto de javascript como abajo
*/
class Header extends Component {
    render() {
        return (
            <div style={{padding: "10px", backgroundColor: "#eee", fontFamily: "Comic Sans MS", textAlign: "center"}}>
                <h3>Ongi etorri!</h3>
            </div>
        );
    }
}

/*
    cada componente de react tiene estado, que es un objecto javascript. cada vez que cambia el estado el componente se vuelve a renderizar
    cuando se clica el boton, se ejecuta la funcion toggle del componente, que cambia la variable "visible" del estado
    lo de entre las llaves {} es jsx, como he dicho antes. por lo tanto, {this.state.visible ? "Hide" : "Show"} mostrara el texto "Hide" cuando visible
      sea true, y viceversa. (un if else de toda la vida)
    si no me interesa el else, habria que ponerlo como abajo, con { <condicion> && <lo que queremos mostrar> }
*/
class MainContent extends Component {
    constructor(props) {
        super(props);
        // el estado se puede inicializar así en el constructor. despues, solo se puede modificar con la funcion setState, como en la funcion de debajo
        // si el componente no necesita estado, no hace falta poner constructor. pero si se pone constructor tiene que ser con el atributo props y
        //   llamando a super(props);
        this.state = {
            visible: false
        };
    }
    toggle() {
        this.setState({visible: !this.state.visible});
    }
    render() {
        return (
            <div style={{padding: "10px"}}>
                <p>Lorem ipsum</p>
                <button type="button" onClick={() => this.toggle()}>{this.state.visible ? "Hide" : "Show"}</button>
                { this.state.visible && 
                    <h3>Sorpresa!</h3>
                }
            </div>
        );
    }
}

// en la clase App pongo <Footer> y le añado el atributo copyright. se puede acceder a estas propiedades mediante el objeto this.props, como debajo
// en este caso lo que hago con || es que si this.props.copyright no esta difinido, imprima el texto "Alguien". prueba a borrar el atributo copyright
class Footer extends Component {
    render() {
        return (
            <div style={{padding: "3px", backgroundColor:"#222", color: "#eee", position: "fixed", bottom: 0, width: "100%"}}>
                © {this.props.copyright || "Alguien"}
            </div>
        );
    }
}

class App extends Component {
    render() {
        return (
            <div>
                <Header />
                <MainContent />
                <Footer copyright="Unai Perez" />
            </div>
        );
    }
}

ReactDOM.render(
    <App />,
    document.getElementById("root")
);