React-Query

Path To A Clean(er) React Architecture (Part 8)

Clean Architecture and React-Query? This article shows how both can fit together.

Domain Logic

Path To A Clean(er) React Architecture (Part 7)

Ever wondered where to put all the small functions that often end up in utility files? The domain layer might be the answer.

Business Logic Separation

Path To A Clean(er) React Architecture (Part 6)

Business logic can bloat React components and make them difficult to test. In this article, we discuss how extracting them to hooks in combination with dependency injection can improve maintainability and testability.

Infrastructure Services & Dependency Injection For Testability

Path To A Clean(er) React Architecture (Part 5)

Logic inside your React app’s API layer can be difficult to test. In this article, we discuss how singleton services combined with dependency injection can improve testability.

Domain Entities & DTOs

Path To A Clean(er) React Architecture

Passing data structures of API responses directly to the UI code often isn’t ideal. In this article, we isolate the React components from the server by separating data transfer objects (DTOs) and domain entities.

API Layer & Data Transformations

Path To A Clean(er) React Architecture

Mixing transformations of API data and UI code quickly leads to messy and unmaintainable code. In this article, we take a step towards a cleaner React architecture by extracting data transformations to an API layer.

API Layer & Fetch Functions

Path To A Clean(er) React Architecture

Mixing API and UI code quickly leads to messy and unmaintainable code. In this article, we take a step towards a cleaner React architecture by extracting fetch functions to an API layer.

A Shared API Client

Path To A Clean(er) React Architecture

Discover the foundational steps towards a clean React architecture by centralizing API requests with a shared API client. Learn how to streamline your codebase for maintainability and scalability.

React useEffect and objects as dependency

4 approaches to avoid unnecessary executions

React’s useEffect hook can lead to tricky situations. If you’re not careful it can cause unnecessary executions of the effect or even infinite re-renders. Especially when using objects as dependencies. Here are 4 approaches that avoid unnecessary executions.

Unraveling A Tightly Coupled Component

React Code Review

It’s not easy to spot! In this code review we see how two components are tightly coupled leading to mixed responsibilities. A better function name and some small changes lead to a clear separation of concerns.

The Mysterious Case of the Untracked Clicks

React Riddles

Embark on a thrilling debugging adventure in 'React Riddles', where elusive icons play hide-and-seek with our tracking events. Can you solve the puzzle?

You got the job! Now what?

Strategies to pass the probation period

Master your first tech job probation period! Explore strategies like preparation, clear communication, and maintaining the right balance between help and independence.

Reduced Complexity With A Single Source Of Truth

Refactoring A Junior’s React Code

How can you know if your code is any good? Learn from common mistakes! Follow this code review & refactoring to use a Single Source Of Truth in favor of duplicate state.

Avoid These Common Pitfalls Of React useState

Advice for Junior Developers

useState is the easiest and most common React hook. But so are some of its problems. Become aware of them and use the exercises on this page to improve your own code.

Minimal TypeScript Crash Course For React

With Interactive Code Exercises

Learning TypeScript is THE best investment. Here's everything you need to get started. Follow the story of a nasty CTO called Pat to learn the basics of TS and React.

Data Structures In Frontend JavaScript In The Real World

With React Code Examples

Never seen a linked list in frontend JavaScript code? Me neither. But here are real-world examples of data structures Map, Set, Stack, Queue, and Tree.

43% Less Code With A Better Data Structure

Refactoring A Junior’s React Code

As an (aspiring) Junior React developer it’s hard to know if you’re code is any good and how to improve it. In this session we review & refactor an interesting problem.

Conditional Rendering In React

With A Focus On Readability And Clean Code

There are many ways to conditionally render in React. But what are the best options regarding readability? Here's when to use early returns, ternary, &&, and others.

React & REST APIs: End-To-End TypeScript Based On OpenAPI Docs

Creating data types manually is tedious and error-prone. Use the OpenAPI docs of your REST API to generate and keep them in sync automatically. Here's how.

Separate API Layers In React Apps

6 Steps Towards Maintainable Code

Mixing API requests with UI code creates unmaintainable spaghetti. A layered approach can help. Creating an API layer isn't difficult if you follow this guide.

REST APIs - How To Mutate Data From Your React App Like The Pros

Based On An Advanced Example

Using simple click handlers to update API data seems easy but quickly gets out of hand. Let's build a snappy data-driven component with the react-query as example.

REST APIs - How To Connect Your React App Like The Pros

Two Approaches Including A Detailed Example

Data fetching = useEffect? In production apps that quickly gets out of hand. See why and how the pros use libraries for data-driven features with great UX.

How To Approach A React Pair Programming Interview

Not Only The Tech Skills Count

Live coding interviews are scary! But approach them right and you don't even need to finish the task. This intimidating situation is in fact an opportunity.

How To Debug React Apps With VS Code

Boost Your Debugging Productivity

Debugging a React app can be a painful process. Speed up your workflow with the VS Code debugger and decrease friction. Good news: It's super simple.

Codebase Tour Through An Advanced React Project

How The Pieces Fit Together

Looking at an advanced React project is confusing. What are all those folders and ".whatever" files? This video tour shows how the code and tools work together.

Real-World React Coding Challenges

For Your Interview Preparation

Test your CSS, React state management, API, and debugging skills in realistic scenarios & Learn how to approach coding challenges in React job interviews.

Testing React Apps In 2023 With Cypress

An In-Depth Guide For Beginners

Testing your React apps gives you a safety net. But getting started is cumbersome. Cypress makes it relatively easy. This guide shows you how with a detailed example.

Ease Your Imposter Syndrome As A Junior Dev

Experienced Programmers Struggle As Well

Senior developers aren't always blazing fast. They use Google all the time. They struggle! Here are some examples that might ease your imposter syndrome as a Junior developer.

How Professional (React) Developer Teams Plan & Estimate Features

Teams ideate, design, plan, estimate, and prioritize features before they start the implementation. Here is a typical feature planning process that you’ll likely encounter on your first job.

Continuous Integration Pipelines with GitHub Actions for (React) Developers

It’s easy to introduce bugs into production code. Professional teams use Continuous Integration pipelines to prevent this. Learn how to build your own with GitHub Actions.

Professional Git Workflow & GitHub Setup for (React) Developers

Solo devs work on the main branch. Teams don’t. They use professional workflows like Trunk-Based Development. This guide shows how you can too.

How to set up a React project (the professional way)

This guide explains how to create a new React app using a popular tech stack: Next.js, TypeScript, ESLint, Prettier, styled-components, Cypress, Storybook.

Evolution of a React folder structure and why to group by features right away

Screaming Architecture

How do different folder structures compare? This is a journey of a growing codebase with a feature-driven folder structure at its end.

Most Popular React Tech Stack in 2023

Based on Data

The React ecosystem is huge so it's hard to keep an overview. Based on data here is a list of the most popular React libs used in 2022.

Don't waste your time on a (React) portfolio website

This survey among 60+ hiring managers reveals

Junior web developers think they need a portfolio website to get a job. But do hiring managers even care? The results of this survey are clear and give better alternatives.

How to build a React portfolio that gets you a job

3 project ideas + a guide

If you want a job build your portfolio projects like a professional React developer. This guide explains how and provides 3 inspiring ideas.