Hoping to see the forest for the trees

There has to be a good reason for React, right? So far, it seems like a lot of passing information from one place to another without any apparent reason and a lot more typing. If you want to make something, you can’t just make it. You have to make what it might be, then set up the ability to make it, then make it.

Let’s make a button:

<button type='button' class='pretty-button' onclick='someFunction()'>
    Click Me!
</button>

But in React, you need it to be a functional stateless component, so it’s more like:

const Button = ({ className, onclick, children }) =>
    <button type='button' onclick={onclick} className={className}>
        {children}
    </button>

But that’s not enough, because that component is inside a parent, where it gets its properties:

<Button className='pretty-button' onclick={someFunction>
    Click Me!
</Button>

So at least in this case, you’ve more than doubled how much you need to write (which they say doubles your chances for a typo or other error). I’m sure there’s a good reason for doing things this way, but I sure haven’t seen evidence of it yet.