Hacker News Reader

Comment by wolco | Hacker News Reader

I know JQuery, love Vue and liked angularjs when it came out. I've played with react application using local state/drilling down only. I found this to be the best tuturial for me introducing setState.. after reading this I'm starting to understand/accept putting the event code directly in the template rather than it belongs somewhere else.

View on HN

If the code of the event handler inside the "template" bothers you, you can extract it outside:

    function App() {
        const [draft, setDraft] = React.useState("")
        const handleClick = () => setDraft("smiley")
        return (
            <div>
                <input type="text" value={draft} />
                <button onClick={handleClick}>smiley</button>
            </div>
        )
    }

It's actually what most people do.

There's no templates in React...

Blocks of JSX are basically templates, even if they're not string-based like in frameworks.

Speaking of mental models, "basically templates" is the wrong mental model for JSX. JSX is syntactic sugar for the React.createElement() function. Writing some components using this function directly will lead to a much better understanding than treating it as templating.

I treat them as templates also in my mind. Don't see anything wrong with that. In which scenario do you think it doesn't work out well?

You could also argue that any template is syntactic sugar for whatever is happening behind the hoods.

Also if you do not treat it as a template, I'm concerned you will do something very hacky, unreadable and unmaintainable.

I'd argue that not only is JSX "like templates", it actually is a template. I know what the syntax sugar compiles down to, and I'm very appreciative of the benefits over traditional string-based templates. But for me the fundamental property of template is an easy way to interpolate data into a rendering structure, and JSX definitely is that. Perhaps you have a more restrictive idea of what constitutes a template?

Reply on news.ycombinator.com