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?
Johannes Kettmann
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
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.
