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

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.