Skip to main content

19 posts tagged with "React"

The React library.

View All Tags

MUI React Tree View: check children, uncheck parents

· 5 min read
John Reilly
OSS Engineer - TypeScript, Azure, React, Node.js, .NET

Every now and then, I need to use a treeview component in a React application. The Material-UI (MUI) library provides a treeview component that is very useful. However, some of the default behaviours of the component differ from that which you typically find in a treeview component. I'm speaking, of course, about node selection. I'm used to a treeview component that, when a parent node is selected, auto selects the child nodes underneath. And by turn, when nodes are deselected, the parent nodes get deselected.

This post documents how to implement this behaviour with the MUI treeview component.

Since initially writing this, I've learned that it is likely that the kind of behaviour I'm hand-rolling here, will natively land in the component. So, all being well, what follows should become unnecessary! To track native support watch this GitHub issue.

title image reading "MUI React Tree View: check children, uncheck parents" with the MUI logo

Text-first MUI Tabs

· 7 min read
John Reilly
OSS Engineer - TypeScript, Azure, React, Node.js, .NET

I love the Material-UI (MUI) library for React. Hand on heart, I'm not very good at making UIs that are attractive. So I always grab for something to paper over the cracks. MUI is awesome for that.

One of the components that I use frequently is the tabs component. However, I've found that it can be a little tricky to use in a "text-first" way, that also remains strongly typed. This post documents how to do just that!

title image reading "Text-first MUI Tabs" with the MUI logo

TypeScript 5.1: declaring JSX element types

· 6 min read
John Reilly
OSS Engineer - TypeScript, Azure, React, Node.js, .NET

A new feature arrives with TypeScript 5.1, it is described as "Decoupled Type-Checking Between JSX Elements and JSX Tag Types".

It's all about handing control of JSX type definitions to libraries. With this feature, libraries can control what types are used for JSX elements. Why does this matter? Great question! Until version 5.1, TypeScript did an imperfect job of representing what is possible with JSX. This feature allows libraries to do a better job of that, and we'll look into it in this post.

It's probably worth saying, that this is a complicated feature. If you don't understand it (and as the author of this post I'll confess that I had to work quite hard to understand it), that is okay. This is a low level feature that is only likely to be used by library / type definition authors. It's a primitive that will unlock possibilites for people writing JSX - but it's something that people will mainly feel the benefit of, without directly doing anything themselves, or necessarily noticing that things have changed for the better.

title image reading "TypeScript 5.1: declaring JSX element types" with the TypeScript logo

Structured data, SEO and React

· 8 min read
John Reilly
OSS Engineer - TypeScript, Azure, React, Node.js, .NET

People being able to discover your website when they search is important. This post is about how you can add structured data to a site. Adding structured data will help search engines like Google understand your content, and get it in front of more eyeballs. We'll illustrate this by making a simple React app which incorporates structured data.

title image reading "Structured data, SEO and React" with a screenshot of the rich results tool in the background

Throttling data requests with React Hooks

· 14 min read
John Reilly
OSS Engineer - TypeScript, Azure, React, Node.js, .NET

When an application loads data, typically relatively few HTTP requests will be made. For example, if we imagine we're making a student administration application, then a "view" screen might make a single HTTP request to load that student's data before displaying it.

From create-react-app to PWA

· 11 min read
John Reilly
OSS Engineer - TypeScript, Azure, React, Node.js, .NET

Progressive Web Apps are a (terribly named) wonderful idea. You can build an app once using web technologies which serves all devices and form factors. It can be accessible over the web, but also surface on the home screen of your Android / iOS device. That app can work offline, have a splash screen when it launches and have notifications too.

react-select with less typing lag

· 3 min read
John Reilly
OSS Engineer - TypeScript, Azure, React, Node.js, .NET

This is going out to all those people using react-select with 1000+ items to render. To those people typing into the select and saying out loud "it's so laggy.... This can't be... It's 2019... I mean, right?" To the people who read this GitHub issue top to bottom 30 times and still came back unsure of what to do. This is for you.

Auth0, TypeScript and ASP.NET Core

· 10 min read
John Reilly
OSS Engineer - TypeScript, Azure, React, Node.js, .NET

Most applications I write have some need for authentication and perhaps authorisation too. In fact, most apps most people write fall into that bracket. Here's the thing: Auth done well is a *big* chunk of work. And the minute you start thinking about that you almost invariably lose focus on the thing you actually want to build and ship.

Things Done Changed

· 11 min read
John Reilly
OSS Engineer - TypeScript, Azure, React, Node.js, .NET

Some people fear change. Most people actually. I'm not immune to that myself, but not in the key area of technology. Any developer that fears change when it comes to the tools and languages that he / she is using is in the wrong business. Because what you're using to cut code today will not last. The language will evolve, the tools and frameworks that you love will die out and be replaced by new ones that are different and strange. In time, the language you feel you write as a native will fall out of favour, replaced by a new upstart.