React

Convert a ReadableStream to a String in JavaScript

I have recently come across the need to convert a ReadableStream to a String. In my case this was because I was using React’s react-dom/server to render a component in an edge worker. More specifically, I needed to build an email body from ReMirror JSON content using their static renderer.

Using ReactDOMServer.renderToReadableStream.

The renderToReadableStream method is the only option for rendering React DOM in a modern edge environment. That’s ok, it’s not hard to use a reader to build a string, chunk by chunk.

How to Create a Single Page App with NextJs

NextJs is very useful for creating static websites but how do you configure it if you are building a single page application (SPA)? The setup isn’t immediately obvious.

The key thing here is we don’t want to build a page on the server when the path is dynamic.

Let’s take a look at how you can set it up, it’s actually pretty straight-forward.

Rewrites

The first piece of this puzzle is the rewrites function within next.config.js.

Create Global UI State with React Context

How do you implement some UI state which can be changed from different parts of your React application?

In this example I implement a menu which can be toggled using a central UI context. I’ve built it in such a way that a central Provider component controls how this context will be updated. By doing it this way you will keep your code easy to read and will reduce the complexity of any bugs you encounter in the future.

Power of TypeScript for React Talk

Thanks to everyone who came to the South West React Meetup, I walked through my series on using React and Redux with TypeScript. Here are the slides.

Rocketmakers recorded the talks and put them up on SoundCloud.

Take a look through the series which this talk was based on. Feedback is gratefully received.

BoA Vantage Points app, the React Native / Redux Challenge

Read this article on medium

I begun this week with a challenge. I’ve got a bit of time between contracts and have been wanting to get my teeth into React Native so I gave myself the task to build and release an app to the AppStore in 5 days.

I live in a beautiful town just outside Bath called Bradford on Avon. One of the things I love most about living here is that it holds so many secret vantage points and views across the town and surrounding country-side. I will often wander out and take a different route in to work in the morning and stumble upon something new.

The Power Of A Virtual Dom

This article is also on medium

I first got started building with React over a year ago when I was on the labs team at Sainsbury’s. I have to admit when React first came to my attention I dismissed it as another fad because I thought JSX was the point. Whilst I saw some benefits I couldn’t see a game changer in that alone. However a few months after, whilst reading more I realised that the actual game changer with React was the virtual DOM and the immutable approach.