Rendering an array of data as a clickable list using React.js

React.js is great for quickly rendering arrays of data in a tabular format, and there’s loads of grid-like packages out there in npm, but sometimes you just need to hand-crank something yourself. Which is fine, until you want the row to be clickable…

So how would you usually render a page from an array of data? Well, I’d probably start with some form of iterating the array and building up the content that way. I’ll explain how I’d go about doing this now.

React.js Tutorials

I’ve created a few pages on here which are now growing into a bit of a tutorial, so thought I’d collate the links into one post (and append links to any new related posts in the future) so it’s easier to follow.

So to start off, I’ll rewind back to November 2015, when I created my Getting Started with React.js post. This was using JSX and ES5, along with Browserify to “compile” the code to “Vanilla JS” which the web browsers support. Fast forward now back to this year (2017), and I’ve created an update post to that, along with a few subsequent posts that take the journey a few steps further.

React.js Continued... State!

This time I’ll be looking at State. What it is and how to use it… Like last time, we’ll be continuing with the code from the previous post.

Last time we created 2 components, home (which was a stateful component) and header (which was a stateless component). This time we’re going to handle state within the home component by calling an API. As in previous posts, I’ll be using the UK Police API as it doesn’t require any authentication (or at least it doesn’t at the moment, that could change!) which cuts down on fluff.

React.js Continued... Components!

It’s time to continue on from my React.js Revisited post that I made a few days ago. This time we’ll look at creating some components…

So what exactly is a “Component” in the context of React.js? In my head, I visualise React.js a little like Web UI Lego. The idea is you build your web application in blocks which are then built in a way which suits you and your application. A component is therefore like your Lego brick. They can be the bigger 4x2 stud ones, or those tiny 1 stud ones that cripple you when you stand on it with bare feet at night :'(

The target='_blank' vulnerability

For many years, I was a fan of using target="_blank" inside any anchor tags on my website that linked to external sites so it would keep the viewer still on my site in the background so they can easily come back to it later on. However, Ben Halpern describes the problem (with examples) of how it is an issue on this page and how the window/tab containing the origin website (i.e. the one with the target anchor tag) could be manipulated to trick the user into providing details to a fake equivalent site.

React.js Revisited

Edit 05/03/2017 - My son has kindly followed this mini tutorial and has pointed out a few areas where I didn’t make much sense. All part of learning! But I’ve updated those areas below.

It’s been a while since I wrote up my beginner guide to React.js and I’ve been thinking it’s time to revisit it as things have changed since then with better tooling and ES6 support etc. so here I am!

Windows 8/10 computer not connecting to your network?

I have had a fair few people lately telling me that their Windows computers are struggling to connect to the Internet. After doing some digging into the problem, it turns out that it could be related to a failed Windows Update that Microsoft initially issued in December 2016, but some computers are slow in picking up the update (or the owners are similar to me, and don’t reboot very often to let updates take effect!)

npm package.json - Package From a Github Commit

Sometimes the version of an npm package has some functionality you want, but it has issues which break other stuff. What do you do? Pull the repo and build it yourself and shoehorn it in? Let’s see…

For my example, I’ll use the griddle-react package.

I quite like the Griddle component (griddle-react), I’ve posted about it in the past, and use it both at work and in side-projects at home whenever tabular data needs to be displayed as it’s quick and simple. However, I’ve had it occur twice where a bug is present in the current npm package version, but since the package was pushed to npm, the bug has been fixed in the Github repository. How do I get this version into my project!?

JSX/ES6 Syntax Highlighting in Visual Studio 2015

Visual Studio 2015 (by default) isn’t exactly crash hot for editing JavaScript, especially JSX/ES6 for React etc.

A lot of developers seem to opt for alternative IDEs/editors for writing JavaScript code instead of staying in Visual Studio, however it’s often more effort to manage multiple IDEs for one project. I’ve tried a few things myself to get things working, some of the steps below are courtesy of Nick Dewitt on this StackOverflow post.

Windows 10 IoT on a Raspberry Pi 2

I thought it a good idea to spend some time looking at Windows 10 IoT edition on my Raspberry Pi 2. I’ve been looking at this since it was first announced a while back, but never actually got around to having a proper look into it and getting it installed on one of our Pis.

What kit do I have then?

• Raspberry Pi 2
• Edimax EW-7811Un Nano USB Wireless Dongle (which turned out to be unsupported, but there is a workaround - details to come later)
• Official Power Supply (the white Raspberry Pi 2.1A model)

First of all I need to get the operating system downloaded. I found the Windows IoT Dashboard software available for free from Microsoft (I downloaded it from https://developer.microsoft.com/en-us/windows/iot/Downloads.htm) and installed it onto my laptop ready to go. This software allowed me to specify that it is intended for running on a Raspberry Pi (it lists the Pi 2 and 3 - I assume the Pi 1 isn’t powerful enough?) so I followed the steps and created my MicroSD card ready to go.