5 ms·
React.gg – An interactive way to master modern React
- beders 4y agoLovely page layout. Feels like an overly long game though :) I was scared by "50 custom hooks": why is that a good thing? (honest question). It seems daunting to have to learn when and why you'd use them.
- benatkin 4y agoHere they are: https://usehooks.com/ https://usehooks.com/
- Xeoncross 4y agoHooks and components are just functions, a large react codebase has hundreds of functions. Things like HTTP requests and reading from localstorage are good candidates for custom hooks.
- hakanderyal 4y agoOnce you start using React for some time, the benefits of these hooks becomes obvious. Think of them as small utilities, like lodash, or standard lib. Reusable snippets of code that you occasionally need.
- ricardobeat 4y ago"Reusable" within very limited scopes. Every React project ends up with tons of custom hooks that are only used in one or two places. I don't think they can be compared to generic utilities like that.
- hakanderyal 4y agoYou are right, I was talking about useHooks project specifically, which includes utility hooks like useDebounce, useLocalStorage etc.
- iudqnolq 4y agoYou're learning how to build them, not just how to use them. The selling point of react hooks is that they're much easier to compose than class methods. The idea is you can easily build your own custom ones that are thin wrappers around one or more of the builtin ones. This course is presumably walking you through building 50 high-quality hooks so that you're prepared to build your own. For example, one of the 50 is useFirestoreQuery. Understanding how to build that presumably prepares you to learn how to write useMyCorpNotificationMechanism. A lot of their 50 are trivial but handy. For example const useToggle = (initialState = false) => { const [state, setState] = useState(initialState); const toggle = useCallback(() => setState(state => !state), []); return [state, toggle] }
- ricardobeat 4y agoDon't forget the mandatory destructuring on the other side const [state, toggle] = useToggle() otherwise you'll end up causing unnecessary re-renders. Happens too often on hooks returning objects. You can also memoize the whole hook. I miss classes sometimes.
- password4321 4y agoIf this was a "Show HN" it would be disqualified, it's a landing page collecting emails. Best of luck to the creators, I'm sure they'll do well because React is job security for its adherents - the "IBM" of front end development.
- roflyear 4y ago> React is job security for its adherents It is true, but React isn't that bad. I think it's overused but being real, it has a lot of value.
- lopkeny12ko 4y agoThe parent commenter never claimed React is bad--just that it's a staple of modern job security.
- MBCook 4y agoThe implication seemed pretty clear to me.
- axlee 4y agoI feel this is a bit of negative comment with an unwarranted tongue-in-cheek remark, but I can't deny that a course fully hidden behing a paywall (albeit a very pretty one) doesn't qualify as HN submission worthy.
- Existenceblinks 4y agoOracle or SAP vibe to me. I shake my head every day on React code base. My personal js heavy project is so nice all logic functions are testable individually, the views are clean. All effects are at boundary .. no waterfall shits!
- 5Qn8mNbc2FNCiVV 4y agoI would flag the solution code in a code review because the Badge is not a composable component and still concerns itself with passing in the styles from outside. If it would have accepted any children and only provided the box, it should have included the minimum styles for styling the border and making the spacing consistent and leave the children up for insertion. Like this: <Badge> <Avatar img={user.img}> <div> ... However if the Badge should be concerned exactly with that use-case, it should not even allow having so much flexibility over the styles and it should be called something else because the name "Badge" is too valueable to waste / misleading at best. "AvatarBadge" would have done it better
- lopkeny12ko 4y agoWhy was this flagged?
- pelagicAustral 4y agoI always think it is so fascinating to think that hooks and reusable components are nothing more than methods you may call once in the lifespan of the app, just that instead of making them call a two-liner on a single programming language someone decided it was better to embed HTML, JS and CSS and whatever else into a pre-packed, 1000-dependency, unmaintainable, hell-hole... and call it modern.
- bundie 4y agoI completely agree that simplicity and maintainability should be at the forefront of our minds as we develop software. The more complex our codebases become, the more difficult it can be to make changes, fix bugs, and add new features. It's important to strike a balance between functionality and simplicity, and to avoid getting bogged down by overly complex code.
- chrismsimpson 4y agoThe way to master modern React is to throw it in the bin
- bundie 4y agoWhat alternatives to React do you suggest.?
- aobdev 4y agoI don’t agree with the above sentiment, but Vue 3 is quite good. It feels more “complete” to me than react in the sense that I don’t need to keep up with what’s going on with redux vs. alternatives, or what changes are in the latest version of react-router, or what’s going on with Next 13/server components, or update my webpack plugins or decide if I’m moving to vite. Long story short 95% of cases have an official solution. Similarly, I don’t often have to look beyond the official Vue docs to fully understand how things work. React hooks are good enough but they don’t have the same approachability as Vue’s composition API.
- XCSme 4y agoI use React for "big" projects, that have to be more robust and customizable. I use Vue whenever I have to prototype something, their <script setup> syntax is awesome.
- XCSme 4y agoNice landing page! > The interactive way to master modern React I was a bit disappointed, reading this I thought the game UI was interactive, but it's not (e.g. I could move the pawn using my mouse or keyboard).