4 ms·

I'm just now getting back into webdev after 3 years. Can you please recommend a good tutorial/demo using Hooks? Especially if it's using Typescript! I strong

I'm just now getting back into webdev after 3 years. Can you please recommend a good tutorial/demo using Hooks? Especially if it's using Typescript! I strongly dislike the create-react-app project because it abstracts everything away.

julianeon 6y ago
For react hooks: the base results are decent, for that particular search phrase. You won't go wrong with the reactjs docs, prominently placed there. https://reactjs.org/docs/hooks-intro.html https://reactjs.org/docs/hooks-intro.html For react hooks typescript: sorry, I can't. This is a pretty good example of the problem, because I just searched Google's first page of results for react hooks typescript tutuorial, and they were all bad. 3 of very top results seemed to be a derivative of each other, where they presented a list of concepts, which is not really relevant in teaching you to use them. Some of the other ones were a very slight improvement, but still not good enough that I'd feel very comfortable recommending them. On the 1st 2 pages of results, this was the best result I found for react and typescript (not hooks), which at least addresses the topic directly with relevant code. https://www.educative.io/blog/react-and-typescript https://www.educative.io/blog/react-and-typescript Also I want to call out this example for being especially ridiculous, because it titles itself as "Using React Hooks with Typescript" and then doesn't actually use any Typescript! https://blog.usejournal.com/using-react-hooks-with-typescript-aae6c7b2a3a9 https://blog.usejournal.com/using-react-hooks-with-typescrip... Anyway, this nicely illustrates the problem. I may try to write a tutorial on this myself, after seeing how bad these are. But for now, this is what's out there.
- acemarke 6y ago
  There is an excellent community resource on using React with TypeScript here: https://github.com/typescript-cheatsheets/react-typescript-cheatsheet https://github.com/typescript-cheatsheets/react-typescript-c...
  - julianeon 6y ago
    Thank you! Much better answer - I'd now recommend this.
- mikewhy 6y ago
  > Also I want to call out this example for being especially ridiculous, because it titles itself as "Using React Hooks with Typescript" and then doesn't actually use any Typescript! That is all 100% valid, fully typed TypeScript TypeScript's inference is smart enough to know that ... const [count, setCount] = useState(0) ... is the same as ... const [count, setCount] = useState<number>(0)
mikewhy 6y ago
> I strongly dislike the create-react-app project because it abstracts everything away That's the point of it, really. CRA sets up your build (webpack) and test runner (jest). Has nothing to do with hooks. I'd strongly suggest using it, unless you're interested in learning how all that stuff works.
- kingdomcome50 6y ago
  Any dev worth their salt should know how to set up these tools from scratch anyway. The day I first ejected a CRA app I had started was the day I decided to never use it again. I could not believe the sheer amount of code behind that project... I’ve been writing reasonably complex React/ Typescript projects for years, and have never had any problems with nothing more than a few simple config files to bootstrap everything.
  - mikewhy 6y ago
    > Any dev worth their salt should know how to set up these tools from scratch anyway. Yeah, I don't agree with that kind of gate keeping. I've known plenty of developers who are proficient with React, Redux, graphql, etc, but might not know where to begin when it comes to build tooling. Almost like they're totally different things. And that's great that you trudge along with your own lesser version of create-react-app. I've personally built my own JS build toolchains and the second I used CRA I never wanted to look back.
    - kingdomcome50 6y ago
      Is it gate keeping to suggest that developers should understand their tooling? I guess if we can agree the bar we are reaching for is "proficient", then yeah, I suppose a React dev doesn't need to understand how their project is built. There is nothing wrong with "proficient"! I work with lots of "proficient" developers. Great people. Good workers. I set the bar for myself quite a bit higher than that though. I mentor "proficient" developers because I know with a little push some of these developers can become "excellent". It's usually not for lack of ability that developers stagnate, rather, passion (relative to everything else), curiosity, and time. Sometimes I can bring that glint back into their eyes, sometimes not. Again, there is nothing wrong with that! Having a some reliable code monkeys around is, frankly, usually good for a business. And FWIW the longer you do this the more apparent it becomes that "less is more"!

julianeon 6y ago

For react hooks: the base results are decent, for that particular search phrase. You won't go wrong with the reactjs docs, prominently placed there. https://reactjs.org/docs/hooks-intro.html https://reactjs.org/docs/hooks-intro.html For react hooks typescript: sorry, I can't. This is a pretty good example of the problem, because I just searched Google's first page of results for react hooks typescript tutuorial, and they were all bad. 3 of very top results seemed to be a derivative of each other, where they presented a list of concepts, which is not really relevant in teaching you to use them. Some of the other ones were a very slight improvement, but still not good enough that I'd feel very comfortable recommending them. On the 1st 2 pages of results, this was the best result I found for react and typescript (not hooks), which at least addresses the topic directly with relevant code. https://www.educative.io/blog/react-and-typescript https://www.educative.io/blog/react-and-typescript Also I want to call out this example for being especially ridiculous, because it titles itself as "Using React Hooks with Typescript" and then doesn't actually use any Typescript! https://blog.usejournal.com/using-react-hooks-with-typescript-aae6c7b2a3a9 https://blog.usejournal.com/using-react-hooks-with-typescrip... Anyway, this nicely illustrates the problem. I may try to write a tutorial on this myself, after seeing how bad these are. But for now, this is what's out there.

acemarke 6y ago
There is an excellent community resource on using React with TypeScript here: https://github.com/typescript-cheatsheets/react-typescript-cheatsheet https://github.com/typescript-cheatsheets/react-typescript-c...
- julianeon 6y ago
  Thank you! Much better answer - I'd now recommend this.
mikewhy 6y ago
> Also I want to call out this example for being especially ridiculous, because it titles itself as "Using React Hooks with Typescript" and then doesn't actually use any Typescript! That is all 100% valid, fully typed TypeScript TypeScript's inference is smart enough to know that ... const [count, setCount] = useState(0) ... is the same as ... const [count, setCount] = useState<number>(0)

mikewhy 6y ago

> I strongly dislike the create-react-app project because it abstracts everything away That's the point of it, really. CRA sets up your build (webpack) and test runner (jest). Has nothing to do with hooks. I'd strongly suggest using it, unless you're interested in learning how all that stuff works.

kingdomcome50 6y ago
Any dev worth their salt should know how to set up these tools from scratch anyway. The day I first ejected a CRA app I had started was the day I decided to never use it again. I could not believe the sheer amount of code behind that project... I’ve been writing reasonably complex React/ Typescript projects for years, and have never had any problems with nothing more than a few simple config files to bootstrap everything.
- mikewhy 6y ago
  > Any dev worth their salt should know how to set up these tools from scratch anyway. Yeah, I don't agree with that kind of gate keeping. I've known plenty of developers who are proficient with React, Redux, graphql, etc, but might not know where to begin when it comes to build tooling. Almost like they're totally different things. And that's great that you trudge along with your own lesser version of create-react-app. I've personally built my own JS build toolchains and the second I used CRA I never wanted to look back.
  - kingdomcome50 6y ago
    Is it gate keeping to suggest that developers should understand their tooling? I guess if we can agree the bar we are reaching for is "proficient", then yeah, I suppose a React dev doesn't need to understand how their project is built. There is nothing wrong with "proficient"! I work with lots of "proficient" developers. Great people. Good workers. I set the bar for myself quite a bit higher than that though. I mentor "proficient" developers because I know with a little push some of these developers can become "excellent". It's usually not for lack of ability that developers stagnate, rather, passion (relative to everything else), curiosity, and time. Sometimes I can bring that glint back into their eyes, sometimes not. Again, there is nothing wrong with that! Having a some reliable code monkeys around is, frankly, usually good for a business. And FWIW the longer you do this the more apparent it becomes that "less is more"!