Johannes Kettmann articles - 59 total
Path To A Clean(er) React Architecture (Part 8) - How Does React-Query Fit Into The Picture?
Clean Architecture and React-Query? This article shows how both can fit together.
Path To A Clean(er) React Architecture (Part 7) - Domain Logic
Ever wondered where to put all the small functions that often end up in utility files? The domain layer might be the answer.
Path To A Clean(er) React Architecture (Part 6) - Business Logic Separation
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.
Path To A Clean(er) React Architecture (Part 5) - Infrastructure Services & Dependency Injection For Testability
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.
Path To A Clean(er) React Architecture - Domain Entities & DTOs
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.
Path To A Clean(er) React Architecture - API Layer & Data Transformations
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.
Path To A Clean(er) React Architecture - API Layer & Fetch Functions
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.
Path To A Clean(er) React Architecture - A Shared API Client
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.
React Code Review - Unraveling A Tightly Coupled Component & Mixed Responsibilities (Incl Video)
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.
React Riddles: The Mysterious Case of the Untracked Clicks
In this series, you confront real-world React mysteries. It's an opportunity to test your skills and...
You got the job! Now what? - Strategies to pass the probation period
In today's increasingly digital world, a significant number of junior developers are vying for...
Refactoring A Junior’s React Code - Reduced Complexity With A Single Source Of Truth
As an (aspiring) Junior React developer it’s hard to understand if you’re code is any good and how...
Avoid These Common Pitfalls Of React useState (incl exercises)
useState is the React hook that you use most often. It's everywhere. But so are some common mistakes....
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.
Refactoring A Junior’s React Code - 43% Less Code With A Better Data Structure
As an (aspiring) Junior React developer it’s hard to know if your 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
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 (Incl 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.
Create a "Table of Contents" for your dev.to posts with one click
For my posts on dev.to I always want to have a Table of Contents. Until now I did that manually which was a lot of work. So I created a small JS snippet that you can use as bookmarklet
Testing React Apps 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 in-depth guide shows you how based on an example app.
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 (incl video)
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.
React Coding Challenge Wednesday - Build A Pixel-Perfect Header (Incl Screencast)
Build A Pixel-Perfect Header Based On Figma Designs. Test your skills and prepare for job interviews by solving these challenges. They are based on a professional codebase and Figma designs.
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.
Experienced Programmers Struggle As Well: Ease Your Imposter Syndrome As A Junior Developer
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.