4 ms·

might be good if you know jquery and trying to learn react.

wolco 7y ago
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.
- pavlov 7y ago
  There's no templates in React...
  - nicoburns 7y ago
    Blocks of JSX are basically templates, even if they're not string-based like in frameworks.
    - rejschaap 7y ago
      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.
      - mewpmewp2 7y ago
        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.
      - nicoburns 7y ago
        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?
- ggregoire 7y ago
  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.

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.

pavlov 7y ago
There's no templates in React...
- nicoburns 7y ago
  Blocks of JSX are basically templates, even if they're not string-based like in frameworks.
  - rejschaap 7y ago
    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.
    - mewpmewp2 7y ago
      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.
    - nicoburns 7y ago
      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?
ggregoire 7y ago
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.