// wersja funkcyjna:

//Tworzysz komponent Button, który składa się z przycisku button. Text, który jest wyświetlany na przycisku jest wzięty z propsów tego komponentu, które są przekazane w momencie jakby 'wywoływania' tego komponentu Button w komponencie-rodzicu Message (text=Tak / text=Nie).
//Komponent Button jest też 'wywoływany' w komponencie-rodzicu App, a tam dostaje w propsach inny tekst(text=Zaloguj / text=Zarejestruj)

function Button(props) {
    return <button> {props.text} </button>;
}


// Tworzysz komponent Message, który składa się z <p> i dwóch komponentów Button (i tu przekazujesz im propsy text). W elemencie <p> z kolei wyświetla się tekst, który jest przekazywany do Message jako props w komponencie-rodzicu, czyli w App.
function Message(props) {
    return (
        <div>
            <p> {props.messageText} </p>
            <Button text = "Tak" />
            <Button text = "Nie" />
        </div>
    )
}

// w App wykorzystujesz oba subkomponenty:
// Dwa razy Message, któremu przekazujesz odpowiedni tekst do propsów (a w samym Message są jeszcze dwa buttony, więc każde umieszczenie w App Message 'wywoła jeszcze po 2 buttony w każdym z nich
// Dwa razy Button, któremy przekazujesz odpowiedni tekst do propsów

function App() {
    return (
        <div>
            <Message messageText = "Czy znasz już nasz portal?"/>
            <Message messageText = "Czy logowałeś się już do naszego portalu?"/>
            <Button text = "Zaloguj" />
            <Button text = "Zarejestruj" />
        </div>
    )
}


ReactDOM.render(
    <App />,
    document.getElementById('app')
);