React.gg – An interactive way to master modern React | Hacker News Reader

React.gg – An interactive way to master modern React

react.gg

47 pointsbundie27 comments

If 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.

> 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.

The parent commenter never claimed React is bad--just that it's a staple of modern job security.

The implication seemed pretty clear to me.

I 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.

Oracle 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!

I 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

Lovely 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.

Once 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.

"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.

You are right, I was talking about useHooks project specifically, which includes utility hooks like useDebounce, useLocalStorage etc.

Hooks 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.

Here they are: https://usehooks.com/

You'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]
    }

Don'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.

https://lit.dev/ is very class-y

I started with hooks, so I read them as a DSL. So missing the is incomprehensible to me. onClick = { () => toggle[1]() } just looks wrong

Nice 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).

The way to master modern React is to throw it in the bin

What alternatives to React do you suggest.?

I 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.

I 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.

Why was this flagged?

I have no idea.

It's a Show HN, there should be a way to demo/test the product.

That being said, maybe the landing page is good enough of a demo of what they are offering.

I 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.

I 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.

Reply on news.ycombinator.com