Andrew Hansen

Andrew Hansen

Sign in Subscribe

When To Use .ts And .tsx File Extensions

When To Use .ts And .tsx File Extensions

When TypeScript released version 1.0 in 2014, it didn't include support for JSX syntax. At the time, React was still a young project that had not yet grown into the huge name it is today. So there was little incentive for the TypeScript team to include functionality

How Children Types Work In React 18 And TypeScript 4

How Children Types Work In React 18 And TypeScript 4

One of the coolest features of React is that everything is "just JavaScript" (or TypeScript!) so the library mostly doesn't care what you provide as children as long as it can be rendered to the UI. We even can have functions as children (aka, render props)

What is the ! (exclamation mark / bang) operator in TypeScript?

What is the ! (exclamation mark / bang) operator in TypeScript?

Sometimes in a TypeScript codebase you might see code like this: const bar = myObject!.foo!.bar // or const obj = myObject! The exclamation/bang operator that comes after accessing a property (also called a "postfix bang") is known as a non-null assertion. The use case for this operator is

The Ultimate Guide to yarn.lock Lockfiles

The Ultimate Guide to yarn.lock Lockfiles

The npm ecosystem is a big reason why JavaScript has taken off like a rocket in development communities. The ability to npm install modular bits of code and compose them together has been a massive boost of productivity for developers. However, this modularity introduces its own problems: packages need a

How to convert a string to
a number in TypeScript

How to convert a string to a number in TypeScript

You're writing a TypeScript application and you hit an error like this: Argument of type 'string' is not assignable to parameter of type 'number'.(2345) This could happen for a number of reasons. For example, I often run into this when reading a value

Svelte: The Compiled Future of Front End

Svelte: The Compiled Future of Front End

When I learned React in 2014 it was a revelation. Coming from Angular 1, React was a breath of fresh air in a world full of foot-guns, confusing best practices, and unclear jargon (services, models, directives, oh my!) Instead, the future was simple: "everything is a component". Components

Testing Apollo Components using react-testing-library

Testing Apollo Components using react-testing-library

Apollo Client [https://www.apollographql.com/docs/react/] is a beast. It does a lot of heavy lifting for graphql react apps to manage data coming from a server including cache management, loading and error states, retries, and more. Plus, it's highly configurable what with the providers and

React Design Patterns: Generating User-configured UI Using The Visitor Pattern

React Design Patterns: Generating User-configured UI Using The Visitor Pattern

Let's learn how to build a React app that generates UI based on user-provided configuration.

Next.js vs. create-react-app: Which Should You Use For Your React Project?

Next.js vs. create-react-app: Which Should You Use For Your React Project?

Figuring out what library to use when starting a new React project is a struggle . There are a bunch of seemingly (hopefully) solid options out there mixed in with 20 different abandoned boilerplates with dependencies six months out of date. Two options seem to have risen to the top amongst