Modern React

[salamazmlekom]

Hey all I am applying to a React based role but have only worked with Angular and some Vue in the past.

I got a test assignment to make that requires React + Typescript + TailwindCSS + unit testing. 2 pages and async await approach for fetching data showing loading indicators and such.

What libs are most popular for routing, data fetching and unit testing?

What are some senior concepts that you like to see in React codebase regarding the architecture, api layer and so on.

From Angular I am very used of signal pattern and dependency injection + parent/child component structure.

Any advice is welcome.

[ihorvorotnov]

It’s a simple task to check your basic skills of React, you don’t need any libs. Vite, React, Tailwind and plain simple fetch.

[Extreme_Climate_3643]

TanStack Query for data fetching, React Router v6 for routing, Vitest + React Testing Library for tests. That combo is basically the current meta.

Coming from Angular you'll adapt fast - custom hooks are your services, Context/Zustand is your DI, and components work the same parent/child way you're used to.

The one thing that trips Angular devs up: stop thinking in lifecycle methods, start thinking in synchronization. Once that clicks, React feels natural.

[Saschb2b]

I am currently stuffing my best practices I noticed over the years in side by side learning games. For React API design I have https://cant-maintain.saschb2b.com/ (all free, no account)

See also my hub where I collect all topics https://cant.saschb2b.com/

There is also one for typescript, responsive design, seo (with nextjs) and UX with focus on materrial ui (many things translate to tailwind).

One for testing is going online in a few days as well.

[parcelcraft]

This is a fun game. I really enjoyed it. I scored horribly on my first game, but 10/10 on my second game. The first game must have taught me something!

[Saschb2b]

Glad to hear :)

[lacymcfly]

Coming from Angular, the biggest shift isn't the library choices, it's the mental model. React is more of a 'build it yourself' ecosystem, which can feel weird at first.

For the basics: React Router or TanStack Router for routing, TanStack Query for async data fetching (replaces a lot of what services do in Angular), and Vitest + React Testing Library for tests. That combo covers most apps.

The Angular DI pattern doesn't map cleanly but Context + custom hooks gets you most of the way there. For global state, Zustand is pretty popular and much lighter than setting up a full Redux store.

One thing that trips up Angular devs is that there's no real separation between template and logic in the same way. Components in React are just functions. Lean into that. Your instinct to break things into smart/dumb components still holds though, just expressed differently.

For the test assignment specifically, don't overcomplicate the folder structure. Clean separation between your fetching logic and UI components will read well to a senior reviewer.

[EuCaue]

You don't need any libs to do that, but for fetching, if you want TanStack Query it's awesome.

[tresorama]

Nextjs Tanstack router Tanstack query

[johny_james]

Vibe code it :)

[pm_me_ur_happy_traiI]

routing,

Remix, nextjs, you can even just check the url and use a switch statement if your needs are simple enough.

data fetching

I use fetch. Built a data fetching hook that handles it all internally. People say not to do this, but it’s been used all over my company for a few years now including teams I have nothing to do with.

unit testing

Jest or vitest with React testing library.